smssakutoko
Version:
MPWA Multi device beta
497 lines (468 loc) • 12.9 kB
JavaScript
$(document).ready(function () {
"use strict";
var options = {
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
}
},
series: [{
name: "Desktops",
data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
}],
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
title: {
text: 'Product Trends by Month',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
borderColor: 'rgba(94, 96, 110, .5)',
strokeDashArray: 4
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
labels: {
style: {
colors: 'rgba(94, 96, 110, .5)'
}
}
}
}
var chart = new ApexCharts(
document.querySelector("#apex1"),
options
);
chart.render();
var options2 = {
chart: {
height: 350,
type: 'area',
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
series: [{
name: 'series1',
data: [31, 40, 28, 51, 42, 109, 100]
}, {
name: 'series2',
data: [11, 32, 45, 32, 34, 52, 41]
}],
xaxis: {
type: 'datetime',
categories: ["2018-09-19T00:00:00", "2018-09-19T01:30:00", "2018-09-19T02:30:00", "2018-09-19T03:30:00", "2018-09-19T04:30:00", "2018-09-19T05:30:00", "2018-09-19T06:30:00"],
labels: {
style: {
colors: 'rgba(94, 96, 110, .5)'
}
}
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm'
},
},
grid: {
borderColor: 'rgba(94, 96, 110, .5)',
strokeDashArray: 4
}
}
var chart2 = new ApexCharts(
document.querySelector("#apex2"),
options2
);
chart2.render();
var options3 = {
chart: {
height: 350,
type: 'bar',
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded',
borderRadius: 10
},
},
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'],
labels: {
style: {
colors: 'rgba(94, 96, 110, .5)'
}
}
},
yaxis: {
title: {
text: '$ (thousands)'
}
},
fill: {
opacity: 1
},
tooltip: {
y: {
formatter: function (val) {
return "$ " + val + " thousands"
}
}
},
grid: {
borderColor: 'rgba(94, 96, 110, .5)',
strokeDashArray: 4
}
}
var chart3 = new ApexCharts(
document.querySelector("#apex3"),
options3
);
chart3.render();
var options4 = {
series: [{
name: 'Marine Sprite',
data: [44, 55, 41, 37, 22, 43, 21]
}, {
name: 'Striking Calf',
data: [53, 32, 33, 52, 13, 43, 32]
}, {
name: 'Tank Picture',
data: [12, 17, 11, 9, 15, 11, 20]
}, {
name: 'Bucket Slope',
data: [9, 7, 5, 8, 6, 9, 4]
}, {
name: 'Reborn Kid',
data: [25, 12, 19, 32, 25, 24, 10]
}],
chart: {
type: 'bar',
height: 350,
stacked: true,
stackType: '100%'
},
plotOptions: {
bar: {
horizontal: true,
},
},
stroke: {
width: 1,
colors: ['#fff']
},
title: {
text: '100% Stacked Bar'
},
xaxis: {
categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
},
tooltip: {
y: {
formatter: function (val) {
return val + "K"
}
}
},
fill: {
opacity: 1
},
legend: {
position: 'top',
horizontalAlign: 'left',
offsetX: 40
},
grid: {
borderColor: 'rgba(94, 96, 110, .5)',
strokeDashArray: 4
}
};
function generateDataBubble(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;
}
var chart4 = new ApexCharts(document.querySelector("#apex4"), options4);
chart4.render();
var options5 = {
series: [{
name: 'Bubble1',
data: generateDataBubble(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 60
})
},
{
name: 'Bubble2',
data: generateDataBubble(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 60
})
},
{
name: 'Bubble3',
data: generateDataBubble(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 60
})
},
{
name: 'Bubble4',
data: generateDataBubble(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 60
})
}],
chart: {
height: 350,
type: 'bubble',
},
dataLabels: {
enabled: false
},
fill: {
opacity: 0.8
},
title: {
text: 'Simple Bubble Chart'
},
xaxis: {
tickAmount: 12,
type: 'category',
},
yaxis: {
max: 70
}
};
function generateDataHeatMap(count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
series.push(y);
i++;
}
return series;
}
var data = [{
name: '10:00',
data: generateDataHeatMap(15, {
min: 0,
max: 90
})
},
{
name: '10:30',
data: generateDataHeatMap(15, {
min: 0,
max: 90
})
},
{
name: '11:00',
data: generateDataHeatMap(15, {
min: 0,
max: 90
})
},
{
name: '11:30',
data: generateDataHeatMap(15, {
min: 0,
max: 90
})
},
{
name: '12:00',
data: generateDataHeatMap(15, {
min: 0,
max: 90
})
},
{
name: '12:30',
data: generateDataHeatMap(15, {
min: 0,
max: 90
})
},
{
name: '13:00',
data: generateDataHeatMap(15, {
min: 0,
max: 90
})
},
{
name: '13:30',
data: generateDataHeatMap(15, {
min: 0,
max: 90
})
}
];
var chart5 = new ApexCharts(document.querySelector("#apex5"), options5);
chart5.render();
var options6 = {
series: data,
chart: {
height: 350,
type: 'heatmap'
},
dataLabels: {
enabled: false
},
plotOptions: {
heatmap: {
colorScale: {
inverse: true
}
}
},
colors: ["#F3B415", "#F27036", "#663F59", "#6A6E94", "#4E88B4", "#00A7C6", "#18D8D8", '#A9D794',
'#46AF78', '#A93F55', '#8C5E58', '#2176FF', '#33A1FD', '#7A918D', '#BAFF29'
],
xaxis: {
type: 'category',
categories: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10', 'W11', 'W12', 'W13', 'W14', 'W15']
},
title: {
text: 'Color Scales flipped Vertically'
},
};
var chart6 = new ApexCharts(document.querySelector("#apex6"), options6);
chart6.render();
var options7 = {
series: [{
name: 'Series 1',
data: [20, 100, 40, 30, 50, 80, 33],
}],
chart: {
height: 350,
type: 'radar',
},
dataLabels: {
enabled: true
},
plotOptions: {
radar: {
size: 140,
polygons: {
strokeColors: '#e9e9e9',
fill: {
colors: ['#f8f8f8', '#fff']
}
}
}
},
title: {
text: 'Radar with Polygon Fill'
},
colors: ['#FF4560'],
markers: {
size: 4,
colors: ['#fff'],
strokeColor: '#FF4560',
strokeWidth: 2,
},
tooltip: {
y: {
formatter: function (val) {
return val
}
}
},
xaxis: {
categories: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
},
yaxis: {
tickAmount: 7,
labels: {
formatter: function (val, i) {
if (i % 2 === 0) {
return val
} else {
return ''
}
}
}
}
};
var chart7 = new ApexCharts(document.querySelector("#apex7"), options7);
chart7.render();
var options8 = {
series: [{
name: "SAMPLE A",
data: [
[16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2], [10.9, 1], [13.6, 3.2], [10.9, 7.4], [10.9, 0], [10.9, 8.2], [16.4, 0], [16.4, 1.8], [13.6, 0.3], [13.6, 0], [29.9, 0], [27.1, 2.3], [16.4, 0], [13.6, 3.7], [10.9, 5.2], [16.4, 6.5], [10.9, 0], [24.5, 7.1], [10.9, 0], [8.1, 4.7], [19, 0], [21.7, 1.8], [27.1, 0], [24.5, 0], [27.1, 0], [29.9, 1.5], [27.1, 0.8], [22.1, 2]]
}, {
name: "SAMPLE B",
data: [
[36.4, 13.4], [1.7, 11], [5.4, 8], [9, 17], [1.9, 4], [3.6, 12.2], [1.9, 14.4], [1.9, 9], [1.9, 13.2], [1.4, 7], [6.4, 8.8], [3.6, 4.3], [1.6, 10], [9.9, 2], [7.1, 15], [1.4, 0], [3.6, 13.7], [1.9, 15.2], [6.4, 16.5], [0.9, 10], [4.5, 17.1], [10.9, 10], [0.1, 14.7], [9, 10], [12.7, 11.8], [2.1, 10], [2.5, 10], [27.1, 10], [2.9, 11.5], [7.1, 10.8], [2.1, 12]]
}, {
name: "SAMPLE C",
data: [
[21.7, 3], [23.6, 3.5], [24.6, 3], [29.9, 3], [21.7, 20], [23, 2], [10.9, 3], [28, 4], [27.1, 0.3], [16.4, 4], [13.6, 0], [19, 5], [22.4, 3], [24.5, 3], [32.6, 3], [27.1, 4], [29.6, 6], [31.6, 8], [21.6, 5], [20.9, 4], [22.4, 0], [32.6, 10.3], [29.7, 20.8], [24.5, 0.8], [21.4, 0], [21.7, 6.9], [28.6, 7.7], [15.4, 0], [18.1, 0], [33.4, 0], [16.4, 0]]
}],
chart: {
height: 350,
type: 'scatter',
zoom: {
enabled: true,
type: 'xy'
}
},
xaxis: {
tickAmount: 10,
labels: {
formatter: function (val) {
return parseFloat(val).toFixed(1)
}
}
},
yaxis: {
tickAmount: 7
}
};
var chart8 = new ApexCharts(document.querySelector("#apex8"), options8);
chart8.render();
});