Skip to content
GitLab
Commit 27ca663e authored by Rushikesh Padsala's avatar Rushikesh Padsala
Browse files

Added Viewer

parent e21f1f45
Hide whitespace changes
Inline Side-by-side
Showing
with 2782 additions and 0 deletions
+2782 -0
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/column/basic-column.html 0 → 100644
+ 92
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Basic Column - Grouped</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script>
var options = {
chart: {
height: 350,
type: 'bar',
},
plotOptions: {
bar: {
horizontal: false,
endingShape: 'rounded',
columnWidth: '55%',
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
series: [{
name: 'Net Profit',
data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
}, {
name: 'Revenue',
data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
}, {
name: 'Free Cash Flow',
data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
}],
xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
},
yaxis: {
title: {
text: '$ (thousands)'
}
},
fill: {
opacity: 1
},
tooltip: {
y: {
formatter: function (val) {
return "$ " + val + " thousands"
}
}
}
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/column/column-with-data-labels.html 0 → 100644
+ 135
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Column with Data Labels</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script>
var options = {
chart: {
height: 350,
type: 'bar',
},
plotOptions: {
bar: {
dataLabels: {
position: 'top', // top, center, bottom
},
}
},
dataLabels: {
enabled: true,
formatter: function (val) {
return val + "%";
},
offsetY: -20,
style: {
fontSize: '12px',
colors: ["#304758"]
}
},
series: [{
name: 'Inflation',
data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2]
}],
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
position: 'top',
labels: {
offsetY: -18,
},
axisBorder: {
show: false
},
axisTicks: {
show: false
},
crosshairs: {
fill: {
type: 'gradient',
gradient: {
colorFrom: '#D8E3F0',
colorTo: '#BED1E6',
stops: [0, 100],
opacityFrom: 0.4,
opacityTo: 0.5,
}
}
},
tooltip: {
enabled: true,
offsetY: -35,
}
},
fill: {
gradient: {
shade: 'light',
type: "horizontal",
shadeIntensity: 0.25,
gradientToColors: undefined,
inverseColors: true,
opacityFrom: 1,
opacityTo: 1,
stops: [50, 0, 100, 100]
},
},
yaxis: {
axisBorder: {
show: false
},
axisTicks: {
show: false,
},
labels: {
show: false,
formatter: function (val) {
return val + "%";
}
}
},
title: {
text: 'Monthly Inflation in Argentina, 2002',
floating: true,
offsetY: 320,
align: 'center',
style: {
color: '#444'
}
},
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/column/column-with-negative.html 0 → 100644
+ 104
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Basic Bar</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script>
var options = {
chart: {
height: 350,
type: 'bar',
},
plotOptions: {
bar: {
colors: {
ranges: [
{
from: -100,
to: -46,
color: '#F15B46'
}, {
from: -45,
to: 0,
color: '#FEB019'
}
]
},
columnWidth: '80%',
}
},
dataLabels: {
enabled: false,
},
series: [{
name: 'Cash Flow',
data: [1.45, 5.42, 5.9, -0.42, -12.6, -18.1, -18.2, -14.16, -11.1, -6.09, 0.34, 3.88, 13.07,
5.8, 2, 7.37, 8.1, 13.57, 15.75, 17.1, 19.8, -27.03, -54.4, -47.2, -43.3, -18.6, -
48.6, -41.1, -39.6, -37.6, -29.4, -21.4, -2.4
]
}],
yaxis: {
title: {
text: 'Growth',
},
labels: {
formatter: function (y) {
return y.toFixed(0) + "%";
}
}
},
xaxis: {
// TODO: uncomment below and fix the error
//type: 'datetime',
categories: [
'2011-01-01', '2011-02-01', '2011-03-01', '2011-04-01', '2011-05-01', '2011-06-01',
'2011-07-01', '2011-08-01', '2011-09-01', '2011-10-01', '2011-11-01', '2011-12-01',
'2012-01-01', '2012-02-01', '2012-03-01', '2012-04-01', '2012-05-01', '2012-06-01',
'2012-07-01', '2012-08-01', '2012-09-01', '2012-10-01', '2012-11-01', '2012-12-01',
'2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01', '2013-06-01',
'2013-07-01', '2013-08-01', '2013-09-01'
],
labels: {
rotate: -90
}
},
tooltip: {
}
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/column/column-with-rotated-labels.html 0 → 100644
+ 110
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Column with Rotates Labels</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script>
var options = {
annotations: {
points: [{
x: 'Bananas',
seriesIndex: 0,
label: {
borderColor: '#775DD0',
offsetY: 0,
style: {
color: '#fff',
background: '#775DD0',
},
text: 'Bananas are good',
}
}]
},
chart: {
height: 350,
type: 'bar',
},
plotOptions: {
bar: {
columnWidth: '50%',
endingShape: 'rounded'
}
},
dataLabels: {
enabled: false
},
stroke: {
width: 2
},
series: [{
name: 'Servings',
data: [44, 55, 41, 67, 22, 43, 21, 33, 45, 31, 87, 65, 35]
}],
grid: {
row: {
colors: ['#fff', '#f2f2f2']
}
},
xaxis: {
labels: {
rotate: -45
},
categories: ['Apples', 'Oranges', 'Strawberries', 'Pineapples', 'Mangoes', 'Bananas',
'Blackberries', 'Pears', 'Watermelons', 'Cherries', 'Pomegranates', 'Tangerines', 'Papayas'
],
},
yaxis: {
title: {
text: 'Servings',
},
},
fill: {
type: 'gradient',
gradient: {
shade: 'light',
type: "horizontal",
shadeIntensity: 0.25,
gradientToColors: undefined,
inverseColors: true,
opacityFrom: 0.85,
opacityTo: 0.85,
stops: [50, 0, 100]
},
},
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/column/data.js 0 → 100644
+ 143
- 0
View file @ 27ca663e
/**
* Randomize array element order in-place.
* Using Durstenfeld shuffle algorithm.
*/
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
var arrayData = [{
y: 400,
quarters: [{
x: 'Q1',
y: 120
}, {
x: 'Q2',
y: 90
}, {
x: 'Q3',
y: 100
}, {
x: 'Q4',
y: 90
}]
}, {
y: 430,
quarters: [{
x: 'Q1',
y: 120
}, {
x: 'Q2',
y: 110
}, {
x: 'Q3',
y: 90
}, {
x: 'Q4',
y: 110
}]
}, {
y: 448,
quarters: [{
x: 'Q1',
y: 70
}, {
x: 'Q2',
y: 100
}, {
x: 'Q3',
y: 140
}, {
x: 'Q4',
y: 138
}]
}, {
y: 470,
quarters: [{
x: 'Q1',
y: 150
}, {
x: 'Q2',
y: 60
}, {
x: 'Q3',
y: 190
}, {
x: 'Q4',
y: 70
}]
}, {
y: 540,
quarters: [{
x: 'Q1',
y: 120
}, {
x: 'Q2',
y: 120
}, {
x: 'Q3',
y: 130
}, {
x: 'Q4',
y: 170
}]
}, {
y: 580,
quarters: [{
x: 'Q1',
y: 170
}, {
x: 'Q2',
y: 130
}, {
x: 'Q3',
y: 120
}, {
x: 'Q4',
y: 160
}]
}];
function makeData() {
var dataSet = shuffleArray(arrayData)
var dataYearSeries = [{
x: "2011",
y: dataSet[0].y,
color: colors[0],
quarters: dataSet[0].quarters
}, {
x: "2012",
y: dataSet[1].y,
color: colors[1],
quarters: dataSet[1].quarters
}, {
x: "2013",
y: dataSet[2].y,
color: colors[2],
quarters: dataSet[2].quarters
}, {
x: "2014",
y: dataSet[3].y,
color: colors[3],
quarters: dataSet[3].quarters
}, {
x: "2015",
y: dataSet[4].y,
color: colors[4],
quarters: dataSet[4].quarters
}, {
x: "2016",
y: dataSet[5].y,
color: colors[5],
quarters: dataSet[5].quarters
}];
return dataYearSeries
}
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/column/distributed-columns.html 0 → 100644
+ 77
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Distributed Bar</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
#chart .apexcharts-xaxis-label {
font-weight: bold;
}
</style>
</head>
<body>
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script>
var colors = ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#546E7A', '#26a69a', '#D10CE8'];
var options = {
chart: {
height: 350,
type: 'bar',
events: {
click: function(chart, w, e) {
console.log(chart, w, e )
}
},
},
colors: colors,
plotOptions: {
bar: {
columnWidth: '45%',
distributed: true
}
},
dataLabels: {
enabled: false,
},
series: [{
data: [21, 22, 10, 28, 16, 21, 13, 30]
}],
xaxis: {
categories: ['John', 'Joe', 'Jake', 'Amber', 'Peter', 'Mary', 'David', 'Lily'],
labels: {
style: {
colors: colors,
fontSize: '14px'
}
}
}
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/column/dynamic-loaded-chart.html 0 → 100644
+ 476
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dynamic Loaded Column Chart</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
body {
background: #fff;
}
.wrap {
margin: 45px auto;
max-width: 800px;
position: relative;
}
.chart-box {
padding-left: 0;
}
#chart-year,
#chart-quarter {
width: 96%;
max-width: 48%;
box-shadow: none;
}
#chart-year {
float: left;
position: relative;
transition: 1s ease transform;
z-index: 3;
}
#chart-year.chart-quarter-activated {
transform: translateX(0);
transition: 1s ease transform;
}
#chart-quarter {
float: left;
position: relative;
z-index: -2;
transition: 1s ease transform;
}
#chart-quarter.active {
transition: 1.1s ease-in-out transform;
transform: translateX(0);
z-index: 1;
}
@media screen and (min-width: 480px) {
#chart-year {
transform: translateX(50%);
}
#chart-quarter {
transform: translateX(-50%);
}
}
select#model {
display: none;
position: absolute;
top: -40px;
left: 0;
z-index: 2;
cursor: pointer;
transform: scale(0.8);
}
</style>
</head>
<body>
<div class="wrap">
<select id="model" class="flat-select">
<option value="iphone5">iPhone 5</option>
<option value="iphone6">iPhone 6</option>
<option value="iphone7">iPhone 7</option>
</select>
<div id="chart-year" class="chart-box"></div>
<div id="chart-quarter" class="chart-box"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script>
Apex = {
chart: {
toolbar: {
show: false
}
},
tooltip: {
shared: false
},
}
var colors = ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#00D9E9', '#FF66C3'];
/**
* Randomize array element order in-place.
* Using Durstenfeld shuffle algorithm.
*/
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
var arrayData = [{
y: 400,
quarters: [{
x: 'Q1',
y: 120
}, {
x: 'Q2',
y: 90
}, {
x: 'Q3',
y: 100
}, {
x: 'Q4',
y: 90
}]
}, {
y: 430,
quarters: [{
x: 'Q1',
y: 120
}, {
x: 'Q2',
y: 110
}, {
x: 'Q3',
y: 90
}, {
x: 'Q4',
y: 110
}]
}, {
y: 448,
quarters: [{
x: 'Q1',
y: 70
}, {
x: 'Q2',
y: 100
}, {
x: 'Q3',
y: 140
}, {
x: 'Q4',
y: 138
}]
}, {
y: 470,
quarters: [{
x: 'Q1',
y: 150
}, {
x: 'Q2',
y: 60
}, {
x: 'Q3',
y: 190
}, {
x: 'Q4',
y: 70
}]
}, {
y: 540,
quarters: [{
x: 'Q1',
y: 120
}, {
x: 'Q2',
y: 120
}, {
x: 'Q3',
y: 130
}, {
x: 'Q4',
y: 170
}]
}, {
y: 580,
quarters: [{
x: 'Q1',
y: 170
}, {
x: 'Q2',
y: 130
}, {
x: 'Q3',
y: 120
}, {
x: 'Q4',
y: 160
}]
}];
function makeData() {
var dataSet = shuffleArray(arrayData)
var dataYearSeries = [{
x: "2011",
y: dataSet[0].y,
color: colors[0],
quarters: dataSet[0].quarters
}, {
x: "2012",
y: dataSet[1].y,
color: colors[1],
quarters: dataSet[1].quarters
}, {
x: "2013",
y: dataSet[2].y,
color: colors[2],
quarters: dataSet[2].quarters
}, {
x: "2014",
y: dataSet[3].y,
color: colors[3],
quarters: dataSet[3].quarters
}, {
x: "2015",
y: dataSet[4].y,
color: colors[4],
quarters: dataSet[4].quarters
}, {
x: "2016",
y: dataSet[5].y,
color: colors[5],
quarters: dataSet[5].quarters
}];
return dataYearSeries
}
var optionsYear = {
chart: {
id: 'barYear',
height: 400,
width: '100%',
type: 'bar',
},
plotOptions: {
bar: {
distributed: true,
horizontal: true,
endingShape: 'arrow',
barHeight: '75%',
dataLabels: {
position: 'bottom'
}
}
},
dataLabels: {
enabled: true,
textAnchor: 'start',
style: {
colors: ['#fff']
},
formatter: function(val, opt) {
return opt.w.globals.labels[opt.dataPointIndex]
},
offsetX: 0,
dropShadow: {
enabled: true
}
},
colors: colors,
series: [{
data: makeData()
}],
states: {
normal: {
filter: {
type: 'desaturate'
}
},
active: {
allowMultipleDataPointsSelection: true,
filter: {
type: 'darken',
value: 1
}
}
},
tooltip: {
x: {
show: false
},
y: {
title: {
formatter: function(val, opts) {
return opts.w.globals.labels[opts.dataPointIndex]
}
}
}
},
title: {
text: 'Yearly Results',
offsetX: 15
},
subtitle: {
text: '(Click on bar to see details)',
offsetX: 15
},
yaxis: {
labels: {
show: false
}
},
}
var yearChart = new ApexCharts(
document.querySelector("#chart-year"),
optionsYear
);
yearChart.render();
function updateQuarterChart(sourceChart, destChartIDToUpdate) {
var series = [];
var seriesIndex = 0;
var colors = []
if (sourceChart.w.globals.selectedDataPoints[0]) {
var selectedPoints = sourceChart.w.globals.selectedDataPoints;
for (var i = 0; i < selectedPoints[seriesIndex].length; i++) {
var selectedIndex = selectedPoints[seriesIndex][i];
var yearSeries = sourceChart.w.config.series[seriesIndex];
series.push({
name: yearSeries.data[selectedIndex].x,
data: yearSeries.data[selectedIndex].quarters
})
colors.push(yearSeries.data[selectedIndex].color)
}
if(series.length === 0) series = [{
data: []
}]
return ApexCharts.exec(destChartIDToUpdate, 'updateOptions', {
series: series,
colors: colors,
fill: {
colors: colors
}
})
}
}
var optionsQuarters = {
chart: {
id: 'barQuarter',
height: 400,
width: '100%',
type: 'bar',
stacked: true
},
plotOptions: {
bar: {
columnWidth: '50%',
horizontal: false
}
},
series: [{
data: []
}],
legend: {
show: false
},
grid: {
yaxis: {
lines: {
show: false,
}
},
xaxis: {
lines: {
show: true,
}
}
},
yaxis: {
labels: {
show: false
}
},
title: {
text: 'Quarterly Results',
offsetX: 10
},
tooltip: {
x: {
formatter: function(val, opts) {
return opts.w.globals.seriesNames[opts.seriesIndex]
}
},
y: {
title: {
formatter: function(val, opts) {
return opts.w.globals.labels[opts.dataPointIndex]
}
}
}
}
}
var chartQuarters = new ApexCharts(
document.querySelector("#chart-quarter"),
optionsQuarters
)
chartQuarters.render();
yearChart.addEventListener('dataPointSelection', function (e, chart, opts) {
var quarterChartEl = document.querySelector("#chart-quarter");
var yearChartEl = document.querySelector("#chart-year");
if (opts.selectedDataPoints[0].length === 1) {
if(quarterChartEl.classList.contains("active")) {
updateQuarterChart(chart, 'barQuarter')
}
else {
yearChartEl.classList.add("chart-quarter-activated")
quarterChartEl.classList.add("active");
updateQuarterChart(chart, 'barQuarter')
}
} else {
updateQuarterChart(chart, 'barQuarter')
}
if (opts.selectedDataPoints[0].length === 0) {
yearChartEl.classList.remove("chart-quarter-activated")
quarterChartEl.classList.remove("active");
}
})
yearChart.addEventListener('updated', function (chart) {
updateQuarterChart(chart, 'barQuarter')
})
document.querySelector("#model").addEventListener("change", function (e) {
yearChart.updateSeries([{
data: makeData()
}])
})
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/column/histogram.html 0 → 100644
+ 125
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Time Series</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 800px;
margin: 35px auto;
}
#timeline-chart .apexcharts-toolbar {
opacity: 1;
border: 0;
}
</style>
</head>
<body>
<div id="chart">
<div id="timeline-chart"></div>
Selected: <span id="selected-count">0</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script>
var options = {
chart: {
type: "histogram",
height: 380,
foreColor: "#999",
events: {
dataPointSelection: function(e, chart,opts) {
var arraySelected = []
opts.selectedDataPoints.map((selectedIndex) => {
selectedIndex.map((s) => {
arraySelected.push(chart.w.globals.series[0][s])
})
});
arraySelected = arraySelected.reduce((acc, curr) => {
return acc + curr;
}, 0)
document.querySelector("#selected-count").innerHTML = arraySelected
}
}
},
plotOptions: {
bar: {
distributed: true,
dataLabels: {
enabled: false
}
}
},
series: [{
data: [4, 3, 10, 9, 29, 19, 22]
}],
states: {
active: {
allowMultipleDataPointsSelection: true
}
},
markers: {
size: 5,
strokeColor: "#fff",
strokeWidth: 3,
strokeOpacity: 1,
fillOpacity: 1,
hover: {
size: 8
}
},
xaxis: {
categories: [10,20,30,40,50,60,70],
axisBorder: {
show: false
},
axisTicks: {
show: false
}
},
yaxis: {
tickAmount: 4,
labels: {
offsetX: -5,
offsetY: -5
},
},
tooltip: {
x: {
format: "dd MMM yyyy"
},
},
};
var chart = new ApexCharts(document.querySelector("#timeline-chart"), options);
chart.render();
chart.addEventListener("dataPointSelection", function(e, opts) {
console.log(e, opts)
})
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/column/stacked-column-100.html 0 → 100644
+ 80
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Stacked Column</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script>
var options = {
chart: {
height: 350,
type: 'bar',
stacked: true,
stackType: '100%'
},
responsive: [{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: -10,
offsetY: 0
}
}
}],
series: [{
name: 'PRODUCT A',
data: [44, 55, 41, 67, 22, 43, 21, 49]
},{
name: 'PRODUCT B',
data: [13, 23, 20, 8, 13, 27, 33, 12]
},{
name: 'PRODUCT C',
data: [11, 17, 15, 15, 21, 14, 15, 13]
}],
xaxis: {
categories: ['2011 Q1', '2011 Q2', '2011 Q3', '2011 Q4', '2012 Q1', '2012 Q2', '2012 Q3', '2012 Q4'],
},
fill: {
opacity: 1
},
legend: {
position: 'right',
offsetX: 0,
offsetY: 50
},
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/column/stacked-column.html 0 → 100644
+ 92
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Stacked Column</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script>
var options = {
chart: {
height: 350,
type: 'bar',
stacked: true,
toolbar: {
show: true
},
zoom: {
enabled: true
}
},
responsive: [{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: -10,
offsetY: 0
}
}
}],
plotOptions: {
bar: {
horizontal: false,
},
},
series: [{
name: 'PRODUCT A',
data: [44, 55, 41, 67, 22, 43]
},{
name: 'PRODUCT B',
data: [13, 23, 20, 8, 13, 27]
},{
name: 'PRODUCT C',
data: [11, 17, 15, 15, 21, 14]
},{
name: 'PRODUCT D',
data: [21, 7, 25, 13, 22, 8]
}],
xaxis: {
type: 'datetime',
categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT', '01/05/2011 GMT', '01/06/2011 GMT'],
},
legend: {
position: 'right',
offsetY: 40
},
fill: {
opacity: 1
},
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/dashboards/dark/assets/scripts.js 0 → 100644
+ 424
- 0
View file @ 27ca663e
window.Apex = {
chart: {
foreColor: '#ccc',
toolbar: {
show: false
},
},
stroke: {
width: 3
},
dataLabels: {
enabled: false
},
tooltip: {
theme: 'dark'
},
grid: {
borderColor: "#535A6C",
xaxis: {
lines: {
show: true
}
}
}
};
var spark1 = {
chart: {
id: 'spark1',
group: 'sparks',
type: 'line',
height: 80,
sparkline: {
enabled: true
},
dropShadow: {
enabled: true,
top: 1,
left: 1,
blur: 2,
opacity: 0.2,
}
},
series: [{
data: [25, 66, 41, 59, 25, 44, 12, 36, 9, 21]
}],
stroke: {
curve: 'smooth'
},
markers: {
size: 0
},
grid: {
padding: {
top: 20,
bottom: 10,
left: 110
}
},
colors: ['#fff'],
tooltip: {
x: {
show: false
},
y: {
title: {
formatter: function formatter(val) {
return '';
}
}
}
}
}
var spark2 = {
chart: {
id: 'spark2',
group: 'sparks',
type: 'line',
height: 80,
sparkline: {
enabled: true
},
dropShadow: {
enabled: true,
top: 1,
left: 1,
blur: 2,
opacity: 0.2,
}
},
series: [{
data: [12, 14, 2, 47, 32, 44, 14, 55, 41, 69]
}],
stroke: {
curve: 'smooth'
},
grid: {
padding: {
top: 20,
bottom: 10,
left: 110
}
},
markers: {
size: 0
},
colors: ['#fff'],
tooltip: {
x: {
show: false
},
y: {
title: {
formatter: function formatter(val) {
return '';
}
}
}
}
}
var spark3 = {
chart: {
id: 'spark3',
group: 'sparks',
type: 'line',
height: 80,
sparkline: {
enabled: true
},
dropShadow: {
enabled: true,
top: 1,
left: 1,
blur: 2,
opacity: 0.2,
}
},
series: [{
data: [47, 45, 74, 32, 56, 31, 44, 33, 45, 19]
}],
stroke: {
curve: 'smooth'
},
markers: {
size: 0
},
grid: {
padding: {
top: 20,
bottom: 10,
left: 110
}
},
colors: ['#fff'],
xaxis: {
crosshairs: {
width: 1
},
},
tooltip: {
x: {
show: false
},
y: {
title: {
formatter: function formatter(val) {
return '';
}
}
}
}
}
var spark4 = {
chart: {
id: 'spark4',
group: 'sparks',
type: 'line',
height: 80,
sparkline: {
enabled: true
},
dropShadow: {
enabled: true,
top: 1,
left: 1,
blur: 2,
opacity: 0.2,
}
},
series: [{
data: [15, 75, 47, 65, 14, 32, 19, 54, 44, 61]
}],
stroke: {
curve: 'smooth'
},
markers: {
size: 0
},
grid: {
padding: {
top: 20,
bottom: 10,
left: 110
}
},
colors: ['#fff'],
xaxis: {
crosshairs: {
width: 1
},
},
tooltip: {
x: {
show: false
},
y: {
title: {
formatter: function formatter(val) {
return '';
}
}
}
}
}
new ApexCharts(document.querySelector("#spark1"), spark1).render();
new ApexCharts(document.querySelector("#spark2"), spark2).render();
new ApexCharts(document.querySelector("#spark3"), spark3).render();
new ApexCharts(document.querySelector("#spark4"), spark4).render();
var optionsLine = {
chart: {
height: 360,
type: 'line',
zoom: {
enabled: false
},
dropShadow: {
enabled: true,
top: 3,
left: 2,
blur: 4,
opacity: 1,
}
},
stroke: {
curve: 'smooth',
width: 2
},
//colors: ["#3F51B5", '#2196F3'],
series: [{
name: "Music",
data: [1, 15, 26, 20, 33, 27]
},
{
name: "Photos",
data: [3, 33, 21, 42, 19, 32]
},
{
name: "Files",
data: [0, 39, 52, 11, 29, 43]
}
],
title: {
text: 'Media',
align: 'left',
offsetY: 25,
offsetX: 20
},
subtitle: {
text: 'Statistics',
offsetY: 55,
offsetX: 20
},
markers: {
size: 6,
strokeWidth: 0,
hover: {
size: 9
}
},
grid: {
show: true
},
labels: ['01/15/2002', '01/16/2002', '01/17/2002', '01/18/2002', '01/19/2002', '01/20/2002'],
xaxis: {
tooltip: {
enabled: false
}
},
legend: {
position: 'top',
horizontalAlign: 'right',
offsetY: -20
}
}
var chartLine = new ApexCharts(document.querySelector('#line-adwords'), optionsLine);
chartLine.render();
var optionsCircle4 = {
chart: {
type: 'radialBar',
width: 380,
height: 360,
},
plotOptions: {
radialBar: {
size: undefined,
inverseOrder: true,
hollow: {
margin: 5,
size: '48%',
background: 'transparent',
},
track: {
show: false,
},
startAngle: -180,
endAngle: 180
},
},
stroke: {
lineCap: 'round'
},
series: [71, 63, 77],
labels: ['June', 'May', 'April'],
legend: {
show: true,
floating: true,
position: 'right',
offsetX: 70,
offsetY: 240
},
}
var chartCircle4 = new ApexCharts(document.querySelector('#radialBarBottom'), optionsCircle4);
chartCircle4.render();
var optionsBar = {
chart: {
height: 380,
type: 'bar',
stacked: true,
},
plotOptions: {
bar: {
columnWidth: '30%',
horizontal: false,
},
},
series: [{
name: 'PRODUCT A',
data: [14, 25, 21, 17, 12, 13, 11, 19]
}, {
name: 'PRODUCT B',
data: [13, 23, 20, 8, 13, 27, 33, 12]
}, {
name: 'PRODUCT C',
data: [11, 17, 15, 15, 21, 14, 15, 13]
}],
xaxis: {
categories: ['2011 Q1', '2011 Q2', '2011 Q3', '2011 Q4', '2012 Q1', '2012 Q2', '2012 Q3', '2012 Q4'],
},
fill: {
opacity: 1
},
}
var chartBar = new ApexCharts(
document.querySelector("#barchart"),
optionsBar
);
chartBar.render();
var optionsArea = {
chart: {
height: 380,
type: 'area',
stacked: false,
},
stroke: {
curve: 'straight'
},
series: [{
name: "Music",
data: [11, 15, 26, 20, 33, 27]
},
{
name: "Photos",
data: [32, 33, 21, 42, 19, 32]
},
{
name: "Files",
data: [20, 39, 52, 11, 29, 43]
}
],
xaxis: {
categories: ['2011 Q1', '2011 Q2', '2011 Q3', '2011 Q4', '2012 Q1', '2012 Q2'],
},
tooltip: {
followCursor: true
},
fill: {
opacity: 1,
},
}
var chartArea = new ApexCharts(
document.querySelector("#areachart"),
optionsArea
);
chartArea.render();
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/dashboards/dark/assets/styles.css 0 → 100644
+ 72
- 0
View file @ 27ca663e
body {
background: #343E59;
color: #777;
font-family: Montserrat, Arial, sans-serif;
}
.body-bg {
background: #F3F4FA !important;
}
h1, h2, h3, h4, h5, h6, strong {
font-weight: 600;
}
body {
/*background: linear-gradient(45deg,#3a3a60,#5f5f8e);
min-height: 100vh;*/
}
.content-area {
max-width: 1280px;
margin: 0 auto;
}
.box {
background-color: #2B2D3E;
padding: 25px 20px;
}
.shadow {
box-shadow: 0px 1px 15px 1px rgba(69, 65, 78, 0.08);
}
.sparkboxes .box {
padding-top: 10px;
padding-bottom: 10px;
text-shadow: 0 1px 1px 1px #666;
box-shadow: 0px 1px 15px 1px rgba(69, 65, 78, 0.08);
position: relative;
border-radius: 5px;
}
.sparkboxes .box .details {
position: absolute;
color: #fff;
transform: scale(0.7) translate(-22px, 20px);
}
.sparkboxes strong {
position: relative;
z-index: 3;
top: -8px;
color: #fff;
}
.sparkboxes .box1 {
background-image: linear-gradient( 135deg, #ABDCFF 10%, #0396FF 100%);
}
.sparkboxes .box2 {
background-image: linear-gradient( 135deg, #2AFADF 10%, #4C83FF 100%);
}
.sparkboxes .box3 {
background-image: linear-gradient( 135deg, #FFD3A5 10%, #FD6585 100%);
}
.sparkboxes .box4 {
background-image: linear-gradient( 135deg, #EE9AE5 10%, #5961F9 100%);
}
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/dashboards/dark/index.html 0 → 100644
+ 112
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dashboard - Dark Style</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/styles.css">
</head>
<body>
<div id="wrapper">
<div class="content-area">
<div class="container-fluid">
<div class="main">
<div class="row sparkboxes mt-4">
<div class="col-md-3">
<div class="box box1">
<div class="details">
<h3>1213</h3>
<h4>CLICKS</h4>
</div>
<div id="spark1"></div>
</div>
</div>
<div class="col-md-3">
<div class="box box2">
<div class="details">
<h3>422</h3>
<h4>VIEWS</h4>
</div>
<div id="spark2"></div>
</div>
</div>
<div class="col-md-3">
<div class="box box3">
<div class="details">
<h3>311</h3>
<h4>LEADS</h4>
</div>
<div id="spark3"></div>
</div>
</div>
<div class="col-md-3">
<div class="box box4">
<div class="details">
<h3>22</h3>
<h4>SALES</h4>
</div>
<div id="spark4"></div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-md-5">
<div class="box shadow mt-4">
<div id="radialBarBottom"> </div>
</div>
</div>
<div class="col-md-7">
<div class="box shadow mt-4">
<div id="line-adwords" class=""> </div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-md-5">
<div class="box shadow mt-4">
<div id="barchart"></div>
</div>
</div>
<div class="col-md-7">
<div class="box shadow mt-4">
<div id="areachart"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="assets/scripts.js"></script>
<script>
</script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/dashboards/material/assets/scripts.js 0 → 100644
+ 545
- 0
View file @ 27ca663e
window.Apex = {
dataLabels: {
enabled: false
}
};
var spark1 = {
chart: {
id: 'sparkline1',
type: 'line',
height: 140,
sparkline: {
enabled: true
},
group: 'sparklines'
},
series: [{
name: 'purple',
data: [25, 66, 41, 59, 25, 44, 12, 36, 9, 21]
}],
stroke: {
curve: 'smooth'
},
markers: {
size: 0
},
tooltip: {
fixed: {
enabled: true,
position: 'right'
},
x: {
show: false
}
},
title: {
text: '439',
style: {
fontSize: '26px'
}
},
colors: ['#734CEA']
}
var spark2 = {
chart: {
id: 'sparkline2',
type: 'line',
height: 140,
sparkline: {
enabled: true
},
group: 'sparklines'
},
series: [{
name: 'green',
data: [12, 14, 2, 47, 32, 44, 14, 55, 41, 69]
}],
stroke: {
curve: 'smooth'
},
markers: {
size: 0
},
tooltip: {
fixed: {
enabled: true,
position: 'right'
},
x: {
show: false
}
},
title: {
text: '387',
style: {
fontSize: '26px'
}
},
colors: ['#34bfa3']
}
var spark3 = {
chart: {
id: 'sparkline3',
type: 'line',
height: 140,
sparkline: {
enabled: true
},
group: 'sparklines'
},
series: [{
name: 'red',
data: [47, 45, 74, 32, 56, 31, 44, 33, 45, 19]
}],
stroke: {
curve: 'smooth'
},
markers: {
size: 0
},
tooltip: {
fixed: {
enabled: true,
position: 'right'
},
x: {
show: false
}
},
colors: ['#f4516c'],
title: {
text: '577',
style: {
fontSize: '26px'
}
},
xaxis: {
crosshairs: {
width: 1
},
}
}
var spark4 = {
chart: {
id: 'sparkline4',
type: 'line',
height: 140,
sparkline: {
enabled: true
},
group: 'sparklines'
},
series: [{
name: 'teal',
data: [15, 75, 47, 65, 14, 32, 19, 54, 44, 61]
}],
stroke: {
curve: 'smooth'
},
markers: {
size: 0
},
tooltip: {
fixed: {
enabled: true,
position: 'right'
},
x: {
show: false
}
},
colors: ['#00c5dc'],
title: {
text: '615',
style: {
fontSize: '26px'
}
},
xaxis: {
crosshairs: {
width: 1
},
}
}
new ApexCharts(document.querySelector("#spark1"), spark1).render();
new ApexCharts(document.querySelector("#spark2"), spark2).render();
new ApexCharts(document.querySelector("#spark3"), spark3).render();
new ApexCharts(document.querySelector("#spark4"), spark4).render();
var optionsBar = {
chart: {
type: 'bar',
height: 250,
width: '100%',
stacked: true,
foreColor: '#999'
},
plotOptions: {
bar: {
dataLabels: {
enabled: false
},
columnWidth: '75%',
endingShape: 'rounded'
}
},
colors: ["#00C5A4", '#F3F2FC'],
series: [{
name: "Sessions",
data: [20, 16, 24, 28, 26, 22, 15, 5, 14, 16, 22, 29, 24, 19, 15, 10, 11, 15, 19, 23],
}, {
name: "Views",
data: [20, 16, 24, 28, 26, 22, 15, 5, 14, 16, 22, 29, 24, 19, 15, 10, 11, 15, 19, 23],
}],
labels: [15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 1, 2, 3, 4],
xaxis: {
axisBorder: {
show: false
},
axisTicks: {
show: false
},
crosshairs: {
show: false
},
labels: {
show: false,
style: {
fontSize: '14px'
}
},
},
grid: {
xaxis: {
lines: {
show: false
},
},
yaxis: {
lines: {
show: false
},
}
},
yaxis: {
axisBorder: {
show: false
},
labels: {
show: false
},
},
legend: {
floating: true,
position: 'top',
horizontalAlign: 'right',
offsetY: -36
},
title: {
text: 'Web Statistics',
align: 'left',
},
subtitle: {
text: 'Sessions and Views'
},
tooltip: {
shared: true
}
}
var chartBar = new ApexCharts(document.querySelector('#bar'), optionsBar);
chartBar.render();
var optionsCircle1 = {
chart: {
type: 'radialBar',
height: 250,
zoom: {
enabled: false
},
},
colors: ['#E91E63'],
plotOptions: {
radialBar: {
dataLabels: {
name: {
show: false
},
value: {
offsetY: 0
}
}
}
},
series: [65],
theme: {
monochrome: {
enabled: false
}
},
title: {
text: 'Bounce Rate',
align: 'left'
}
}
var chartCircle1 = new ApexCharts(document.querySelector('#radialBar1'), optionsCircle1);
chartCircle1.render();
var optionsDonutTop = {
chart: {
height: 250,
type: 'donut',
},
plotOptions: {
pie: {
size: 76,
donut: {
size: '72%',
},
dataLabels: {
enabled: false
}
}
},
colors: ['#775DD0', '#00C8E1', '#FFB900'],
title: {
text: 'Visitors Source'
},
series: [2, 7, 5],
labels: ['Social Media', 'Blog', 'External'],
legend: {
show: false
}
}
var chartDonut2 = new ApexCharts(document.querySelector('#donutTop'), optionsDonutTop);
chartDonut2.render().then(function () {
// window.setInterval(function () {
// chartDonut2.updateSeries([getRandom(), getRandom(), getRandom()])
// }, 1000)
});
var optionsArea = {
chart: {
height: 421,
type: 'area',
background: '#fff',
stacked: true,
offsetY: 39,
zoom: {
enabled: false
}
},
plotOptions: {
line: {
dataLabels: {
enabled: false
}
}
},
stroke: {
curve: 'straight'
},
colors: ["#3F51B5", '#2196F3'],
series: [{
name: "Adwords Views",
data: [15, 26, 20, 33, 27, 43, 17, 26, 19]
},
{
name: "Adwords Clicks",
data: [33, 21, 42, 19, 32, 25, 36, 29, 49]
}
],
fill: {
type: 'gradient',
gradient: {
inverseColors: false,
shade: 'light',
type: "vertical",
opacityFrom: 0.9,
opacityTo: 0.6,
stops: [0, 100, 100, 100]
}
},
title: {
text: 'Visitor Insights',
align: 'left',
offsetY: -5,
offsetX: 20
},
subtitle: {
text: 'Adwords Statistics',
offsetY: 30,
offsetX: 20
},
markers: {
size: 0,
style: 'hollow',
strokeWidth: 8,
strokeColor: "#fff",
strokeOpacity: 0.25,
},
grid: {
show: false,
padding: {
left: 0,
right: 0
}
},
labels: ['01/15/2002', '01/16/2002', '01/17/2002', '01/18/2002', '01/19/2002', '01/20/2002', '01/21/2002', '01/22/2002', '01/23/2002'],
xaxis: {
type: 'datetime',
tooltip: {
enabled: false
}
},
legend: {
offsetY: -50,
position: 'top',
horizontalAlign: 'right'
}
}
var chartArea = new ApexCharts(document.querySelector('#area-adwords'), optionsArea);
chartArea.render();
var optionsCircle4 = {
chart: {
type: 'radialBar',
height: 280,
width: 380,
},
colors: ['#775DD0', '#00C8E1', '#FFB900'],
labels: ['q4'],
series: [71, 63, 77],
labels: ['June', 'May', 'April'],
theme: {
monochrome: {
enabled: false
}
},
plotOptions: {
radialBar: {
offsetY: -30
}
},
legend: {
show: true,
position: 'left',
containerMargin: {
right: 0
}
},
title: {
text: 'Growth'
}
}
var chartCircle4 = new ApexCharts(document.querySelector('#radialBarBottom'), optionsCircle4);
chartCircle4.render();
function generateData(baseval, count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = Math.floor(Math.random() * (750 - 1 + 1)) + 1;;
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
var z = Math.floor(Math.random() * (75 - 15 + 1)) + 15;
series.push([x, y, z]);
baseval += 86400000;
i++;
}
return series;
}
function getRandom() {
return Math.floor(Math.random() * (100 - 1 + 1)) + 1;
}
var options = {
chart: {
height: 294,
type: 'bubble',
sparkline: {
enabled: true
},
},
plotOptions: {
bubble: {
dataLabels: {
enabled: false
}
}
},
colors: ["#734CEA", "#34bfa3", "#f4516c", "#00c5dc"],
series: [{
name: 'Facebook',
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 60
})
},
{
name: 'Twitter',
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 60
})
},
{
name: 'Youtube',
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 60
})
},
{
name: 'LinkedIn',
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 60
})
}
],
fill: {
opacity: 0.8,
gradient: {
enabled: false
}
},
title: {
text: 'Social Media Reach'
},
xaxis: {
tickAmount: 12,
type: 'category',
min: -50,
max: 850
},
yaxis: {
max: 70
}
}
var chart = new ApexCharts(
document.querySelector("#bubbleChart"),
options
);
// a small hack to extend height in website sample dashboard
chart.render().then(function () {
var ifr = document.querySelector("#wrapper");
if (ifr.contentDocument) {
ifr.style.height = ifr.contentDocument.body.scrollHeight + 20 +'px';
}
});
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/dashboards/material/assets/styles.css 0 → 100644
+ 73
- 0
View file @ 27ca663e
body {
background: #F3F4FA;
color: #777;
font-family: Montserrat, Arial, sans-serif;
}
.body-bg {
background: #F3F4FA !important;
}
h1, h2, h3, h4, h5, h6, strong {
font-weight: 600;
}
body {
/*background: linear-gradient(45deg,#3a3a60,#5f5f8e);
min-height: 100vh;*/
}
#area-adwords {
min-height: 421px !important;
margin-right: -20px;
}
.content-area {
max-width: 1280px;
margin: 0 auto;
}
.box {
background-color: #fff;
padding: 25px 20px;
}
.shadow {
box-shadow: 0px 1px 15px 1px rgba(69, 65, 78, 0.08);
}
.sparkboxes .box {
padding-top: 30px;
padding-bottom: 30px;
text-shadow: 0 1px 1px 1px #666;
box-shadow: 0px 1px 15px 1px rgba(69, 65, 78, 0.08);
position: relative;
}
.sparkboxes strong {
position: relative;
z-index: 3;
top: -8px;
color: #fff;
}
.sparkboxes .box1 {
border-bottom: 3px solid #734CEA
}
.sparkboxes .box2 {
border-bottom: 3px solid #34bfa3
}
.sparkboxes .box3 {
border-bottom: 3px solid #f4516c;
}
.sparkboxes .box4 {
border-bottom: 3px solid #00c5dc;
}
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/dashboards/material/index.html 0 → 100644
+ 110
- 0
View file @ 27ca663e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dashboard - Material Style</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/styles.css">
</head>
<body>
<div id="wrapper">
<div class="content-area">
<div class="container-fluid">
<div class="main">
<div class="row mt-4">
<div class="col-md-5">
<div class="box shadow">
<div id="bar"> </div>
</div>
</div>
<div class="col-md-4">
<div class="box shadow">
<div id="donutTop"> </div>
</div>
</div>
<div class="col-md-3">
<div class="box shadow">
<div id="radialBar1"> </div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-md-6">
<div class="row sparkboxes mt-4">
<div class="col-md-6">
<div class="box box1">
<div id="spark1"></div>
</div>
</div>
<div class="col-md-6">
<div class="box box2">
<div id="spark2"></div>
</div>
</div>
</div>
<div class="row sparkboxes mt-3">
<div class="col-md-6">
<div class="box box3">
<div id="spark3"></div>
</div>
</div>
<div class="col-md-6">
<div class="box box4">
<div id="spark4"></div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="box body-bg">
<div id="area-adwords" style="background: #fff" class="shadow"> </div>
</div>
</div>
</div>
<div class="row mt-4 mb-5">
<div class="col-md-5">
<div class="box shadow">
<div id="radialBarBottom"> </div>
</div>
</div>
<div class="col-md-7">
<div class="box shadow">
<div id="bubbleChart"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="assets/scripts.js"></script>
</body>
</html>
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/dashboards/modern/assets/data.js 0 → 100644
+ 12
- 0
View file @ 27ca663e
var data = {"prices":[7114.25,7126.6,7116.95,7203.7,7233.75,7451.0,7381.15,7348.95,7347.75,7311.25,7266.4,7253.25,7215.45,7266.35,7315.25,7237.2,7191.4,7238.95,7222.6,7217.9,7359.3,7371.55,7371.15,7469.2,7429.25,7434.65,7451.1,7475.25,7566.25,7556.8,7525.55,7555.45,7560.9,7490.7,7527.6,7551.9,7514.85,7577.95,7592.3,7621.95,7707.95,7859.1,7815.7,7739.0,7778.7,7839.45,7756.45,7669.2,7580.45,7452.85,7617.25,7701.6,7606.8,7620.05,7513.85,7498.45,7575.45,7601.95,7589.1,7525.85,7569.5,7702.5,7812.7,7803.75,7816.3,7851.15,7912.2,7972.8,8145.0,8161.1,8121.05,8071.25,8088.2,8154.45,8148.3,8122.05,8132.65,8074.55,7952.8,7885.55,7733.9,7897.15,7973.15,7888.5,7842.8,7838.4,7909.85,7892.75,7897.75,7820.05,7904.4,7872.2,7847.5,7849.55,7789.6,7736.35,7819.4,7875.35,7871.8,8076.5,8114.8,8193.55,8217.1,8235.05,8215.3,8216.4,8301.55,8235.25,8229.75,8201.95,8164.95,8107.85,8128.0,8122.9,8165.5,8340.7,8423.7,8423.5,8514.3,8481.85,8487.7,8506.9,8626.2],"dates":["02 Jun 2017","05 Jun 2017","06 Jun 2017","07 Jun 2017","08 Jun 2017","09 Jun 2017","12 Jun 2017","13 Jun 2017","14 Jun 2017","15 Jun 2017","16 Jun 2017","19 Jun 2017","20 Jun 2017","21 Jun 2017","22 Jun 2017","23 Jun 2017","27 Jun 2017","28 Jun 2017","29 Jun 2017","30 Jun 2017","03 Jul 2017","04 Jul 2017","05 Jul 2017","06 Jul 2017","07 Jul 2017","10 Jul 2017","11 Jul 2017","12 Jul 2017","13 Jul 2017","14 Jul 2017","17 Jul 2017","18 Jul 2017","19 Jul 2017","20 Jul 2017","21 Jul 2017","24 Jul 2017","25 Jul 2017","26 Jul 2017","27 Jul 2017","28 Jul 2017","31 Jul 2017","01 Aug 2017","02 Aug 2017","03 Aug 2017","04 Aug 2017","07 Aug 2017","08 Aug 2017","09 Aug 2017","10 Aug 2017","11 Aug 2017","14 Aug 2017","16 Aug 2017","17 Aug 2017","18 Aug 2017","21 Aug 2017","22 Aug 2017","23 Aug 2017","24 Aug 2017","28 Aug 2017","29 Aug 2017","30 Aug 2017","31 Aug 2017","01 Sep 2017","04 Sep 2017","05 Sep 2017","06 Sep 2017","07 Sep 2017","08 Sep 2017","11 Sep 2017","12 Sep 2017","13 Sep 2017","14 Sep 2017","15 Sep 2017","18 Sep 2017","19 Sep 2017","20 Sep 2017","21 Sep 2017","22 Sep 2017","25 Sep 2017","26 Sep 2017","27 Sep 2017","28 Sep 2017","29 Sep 2017","03 Oct 2017","04 Oct 2017","05 Oct 2017","06 Oct 2017","09 Oct 2017","10 Oct 2017","11 Oct 2017","12 Oct 2017","13 Oct 2017","16 Oct 2017","17 Oct 2017","18 Oct 2017","19 Oct 2017","23 Oct 2017","24 Oct 2017","25 Oct 2017","26 Oct 2017","27 Oct 2017","30 Oct 2017","31 Oct 2017","01 Nov 2017","02 Nov 2017","03 Nov 2017","06 Nov 2017","07 Nov 2017","08 Nov 2017","09 Nov 2017","10 Nov 2017","13 Nov 2017","14 Nov 2017","15 Nov 2017","16 Nov 2017","17 Nov 2017","20 Nov 2017","21 Nov 2017","22 Nov 2017","23 Nov 2017","24 Nov 2017","27 Nov 2017","28 Nov 2017"]}
var monthDataSeries1 = {
"prices":[8107.85,8128.0,8122.9,8165.5,8340.7,8423.7,8423.5,8514.3,8481.85,8487.7,8506.9,8626.2,8668.95,8602.3,8607.55,8512.9,8496.25,8600.65,8881.1,9340.85],
"dates":["13 Nov 2017","14 Nov 2017","15 Nov 2017","16 Nov 2017","17 Nov 2017","20 Nov 2017","21 Nov 2017","22 Nov 2017","23 Nov 2017","24 Nov 2017","27 Nov 2017","28 Nov 2017","29 Nov 2017","30 Nov 2017","01 Dec 2017","04 Dec 2017","05 Dec 2017","06 Dec 2017","07 Dec 2017","08 Dec 2017"]
}
var monthDataSeries2 = {
"prices":[8423.7,8423.5,8514.3,8481.85,8487.7,8506.9,8626.2,8668.95,8602.3,8607.55,8512.9,8496.25,8600.65,8881.1,9040.85,8340.7,8165.5,8122.9,8107.85,8128.0]
}
\ No newline at end of file
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/dashboards/modern/assets/img/logo.png 0 → 100644
+ 0
- 0
View file @ 27ca663e
public/ThirdParty/apexcharts-bundle/samples/vanilla-js/dashboards/modern/assets/img/logo.png

218 Bytes

Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal