Theme Assets
This commit is contained in:
776
assets/js/pages/demo.apex-area.js
Normal file
776
assets/js/pages/demo.apex-area.js
Normal file
@@ -0,0 +1,776 @@
|
||||
var colors = ["#fa6767"],
|
||||
dataColors = $("#basic-area").data("colors"),
|
||||
options = {
|
||||
chart: { height: 380, type: "area", zoom: { enabled: !1 } },
|
||||
dataLabels: { enabled: !1 },
|
||||
stroke: { width: 3, curve: "straight" },
|
||||
colors: (colors = dataColors ? dataColors.split(",") : colors),
|
||||
series: [{ name: "STOCK ABC", data: series.monthDataSeries1.prices }],
|
||||
title: { text: "Fundamental Analysis of Stocks", align: "left" },
|
||||
subtitle: { text: "Price Movements", align: "left" },
|
||||
labels: series.monthDataSeries1.dates,
|
||||
xaxis: { type: "datetime" },
|
||||
yaxis: { opposite: !0 },
|
||||
legend: { horizontalAlign: "left" },
|
||||
grid: { borderColor: "#f1f3fa" },
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 600,
|
||||
options: { chart: { toolbar: { show: !1 } }, legend: { show: !1 } },
|
||||
},
|
||||
],
|
||||
},
|
||||
chart = new ApexCharts(document.querySelector("#basic-area"), options),
|
||||
colors = (chart.render(), ["#727cf5", "#6c757d"]),
|
||||
dataColors = $("#spline-area").data("colors"),
|
||||
options = {
|
||||
chart: { height: 380, type: "area" },
|
||||
dataLabels: { enabled: !1 },
|
||||
stroke: { width: 3, curve: "smooth" },
|
||||
colors: (colors = dataColors ? dataColors.split(",") : colors),
|
||||
series: [
|
||||
{ name: "Series 1", data: [31, 40, 28, 51, 42, 109, 100] },
|
||||
{ name: "Series 2", data: [11, 32, 45, 32, 34, 52, 41] },
|
||||
],
|
||||
legend: { offsetY: 5 },
|
||||
xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"] },
|
||||
tooltip: { fixed: { enabled: !1, position: "topRight" } },
|
||||
grid: { borderColor: "#f1f3fa" },
|
||||
},
|
||||
colors =
|
||||
((chart = new ApexCharts(
|
||||
document.querySelector("#spline-area"),
|
||||
options
|
||||
)).render(),
|
||||
$(document).ready(function () {
|
||||
function t(e) {
|
||||
var t = document.querySelectorAll("button");
|
||||
Array.prototype.forEach.call(t, function (e) {
|
||||
e.classList.remove("active");
|
||||
}),
|
||||
e.target.classList.add("active");
|
||||
}
|
||||
var e = ["#6c757d"],
|
||||
a = $("#area-chart-datetime").data("colors"),
|
||||
a =
|
||||
(a && (e = a.split(",")),
|
||||
{
|
||||
annotations: {
|
||||
yaxis: [
|
||||
{
|
||||
y: 30,
|
||||
borderColor: "#999",
|
||||
label: {
|
||||
show: !0,
|
||||
text: "Support",
|
||||
style: { color: "#fff", background: "#00E396" },
|
||||
},
|
||||
},
|
||||
],
|
||||
xaxis: [
|
||||
{
|
||||
x: new Date("14 Nov 2012").getTime(),
|
||||
borderColor: "#999",
|
||||
yAxisIndex: 0,
|
||||
label: {
|
||||
show: !0,
|
||||
text: "Rally",
|
||||
style: { color: "#fff", background: "#775DD0" },
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
chart: { type: "area", height: 350 },
|
||||
stroke: { width: 3, curve: "smooth" },
|
||||
colors: e,
|
||||
dataLabels: { enabled: !1 },
|
||||
series: [
|
||||
{
|
||||
data: [
|
||||
[13273596e5, 30.95],
|
||||
[1327446e6, 31.34],
|
||||
[13275324e5, 31.18],
|
||||
[13276188e5, 31.05],
|
||||
[1327878e6, 31],
|
||||
[13279644e5, 30.95],
|
||||
[13280508e5, 31.24],
|
||||
[13281372e5, 31.29],
|
||||
[13282236e5, 31.85],
|
||||
[13284828e5, 31.86],
|
||||
[13285692e5, 32.28],
|
||||
[13286556e5, 32.1],
|
||||
[1328742e6, 32.65],
|
||||
[13288284e5, 32.21],
|
||||
[13290876e5, 32.35],
|
||||
[1329174e6, 32.44],
|
||||
[13292604e5, 32.46],
|
||||
[13293468e5, 32.86],
|
||||
[13294332e5, 32.75],
|
||||
[13297788e5, 32.54],
|
||||
[13298652e5, 32.33],
|
||||
[13299516e5, 32.97],
|
||||
[1330038e6, 33.41],
|
||||
[13302972e5, 33.27],
|
||||
[13303836e5, 33.27],
|
||||
[133047e7, 32.89],
|
||||
[13305564e5, 33.1],
|
||||
[13306428e5, 33.73],
|
||||
[1330902e6, 33.22],
|
||||
[13309884e5, 31.99],
|
||||
[13310748e5, 32.41],
|
||||
[13311612e5, 33.05],
|
||||
[13312476e5, 33.64],
|
||||
[13315068e5, 33.56],
|
||||
[13315932e5, 34.22],
|
||||
[13316796e5, 33.77],
|
||||
[1331766e6, 34.17],
|
||||
[13318524e5, 33.82],
|
||||
[13321116e5, 34.51],
|
||||
[1332198e6, 33.16],
|
||||
[13322844e5, 33.56],
|
||||
[13323708e5, 33.71],
|
||||
[13324572e5, 33.81],
|
||||
[13327128e5, 34.4],
|
||||
[13327992e5, 34.63],
|
||||
[13328856e5, 34.46],
|
||||
[1332972e6, 34.48],
|
||||
[13330584e5, 34.31],
|
||||
[13333176e5, 34.7],
|
||||
[1333404e6, 34.31],
|
||||
[13334904e5, 33.46],
|
||||
[13335768e5, 33.59],
|
||||
[13339224e5, 33.22],
|
||||
[13340088e5, 32.61],
|
||||
[13340952e5, 33.01],
|
||||
[13341816e5, 33.55],
|
||||
[1334268e6, 33.18],
|
||||
[13345272e5, 32.84],
|
||||
[13346136e5, 33.84],
|
||||
[13347e8, 33.39],
|
||||
[13347864e5, 32.91],
|
||||
[13348728e5, 33.06],
|
||||
[1335132e6, 32.62],
|
||||
[13352184e5, 32.4],
|
||||
[13353048e5, 33.13],
|
||||
[13353912e5, 33.26],
|
||||
[13354776e5, 33.58],
|
||||
[13357368e5, 33.55],
|
||||
[13358232e5, 33.77],
|
||||
[13359096e5, 33.76],
|
||||
[1335996e6, 33.32],
|
||||
[13360824e5, 32.61],
|
||||
[13363416e5, 32.52],
|
||||
[1336428e6, 32.67],
|
||||
[13365144e5, 32.52],
|
||||
[13366008e5, 31.92],
|
||||
[13366872e5, 32.2],
|
||||
[13369464e5, 32.23],
|
||||
[13370328e5, 32.33],
|
||||
[13371192e5, 32.36],
|
||||
[13372056e5, 32.01],
|
||||
[1337292e6, 31.31],
|
||||
[13375512e5, 32.01],
|
||||
[13376376e5, 32.01],
|
||||
[1337724e6, 32.18],
|
||||
[13378104e5, 31.54],
|
||||
[13378968e5, 31.6],
|
||||
[13382424e5, 32.05],
|
||||
[13383288e5, 31.29],
|
||||
[13384152e5, 31.05],
|
||||
[13385016e5, 29.82],
|
||||
[13387608e5, 30.31],
|
||||
[13388472e5, 30.7],
|
||||
[13389336e5, 31.69],
|
||||
[133902e7, 31.32],
|
||||
[13391064e5, 31.65],
|
||||
[13393656e5, 31.13],
|
||||
[1339452e6, 31.77],
|
||||
[13395384e5, 31.79],
|
||||
[13396248e5, 31.67],
|
||||
[13397112e5, 32.39],
|
||||
[13399704e5, 32.63],
|
||||
[13400568e5, 32.89],
|
||||
[13401432e5, 31.99],
|
||||
[13402296e5, 31.23],
|
||||
[1340316e6, 31.57],
|
||||
[13405752e5, 30.84],
|
||||
[13406616e5, 31.07],
|
||||
[1340748e6, 31.41],
|
||||
[13408344e5, 31.17],
|
||||
[13409208e5, 32.37],
|
||||
[134118e7, 32.19],
|
||||
[13412664e5, 32.51],
|
||||
[13414392e5, 32.53],
|
||||
[13415256e5, 31.37],
|
||||
[13417848e5, 30.43],
|
||||
[13418712e5, 30.44],
|
||||
[13419576e5, 30.2],
|
||||
[1342044e6, 30.14],
|
||||
[13421304e5, 30.65],
|
||||
[13423896e5, 30.4],
|
||||
[1342476e6, 30.65],
|
||||
[13425624e5, 31.43],
|
||||
[13426488e5, 31.89],
|
||||
[13427352e5, 31.38],
|
||||
[13429944e5, 30.64],
|
||||
[13430808e5, 30.02],
|
||||
[13431672e5, 30.33],
|
||||
[13432536e5, 30.95],
|
||||
[134334e7, 31.89],
|
||||
[13435992e5, 31.01],
|
||||
[13436856e5, 30.88],
|
||||
[1343772e6, 30.69],
|
||||
[13438584e5, 30.58],
|
||||
[13439448e5, 32.02],
|
||||
[1344204e6, 32.14],
|
||||
[13442904e5, 32.37],
|
||||
[13443768e5, 32.51],
|
||||
[13444632e5, 32.65],
|
||||
[13445496e5, 32.64],
|
||||
[13448088e5, 32.27],
|
||||
[13448952e5, 32.1],
|
||||
[13449816e5, 32.91],
|
||||
[1345068e6, 33.65],
|
||||
[13451544e5, 33.8],
|
||||
[13454136e5, 33.92],
|
||||
[13455e8, 33.75],
|
||||
[13455864e5, 33.84],
|
||||
[13456728e5, 33.5],
|
||||
[13457592e5, 32.26],
|
||||
[13460184e5, 32.32],
|
||||
[13461048e5, 32.06],
|
||||
[13461912e5, 31.96],
|
||||
[13462776e5, 31.46],
|
||||
[1346364e6, 31.27],
|
||||
[13467096e5, 31.43],
|
||||
[1346796e6, 32.26],
|
||||
[13468824e5, 32.79],
|
||||
[13469688e5, 32.46],
|
||||
[1347228e6, 32.13],
|
||||
[13473144e5, 32.43],
|
||||
[13474008e5, 32.42],
|
||||
[13474872e5, 32.81],
|
||||
[13475736e5, 33.34],
|
||||
[13478328e5, 33.41],
|
||||
[13479192e5, 32.57],
|
||||
[13480056e5, 33.12],
|
||||
[1348092e6, 34.53],
|
||||
[13481784e5, 33.83],
|
||||
[13484376e5, 33.41],
|
||||
[1348524e6, 32.9],
|
||||
[13486104e5, 32.53],
|
||||
[13486968e5, 32.8],
|
||||
[13487832e5, 32.44],
|
||||
[13490424e5, 32.62],
|
||||
[13491288e5, 32.57],
|
||||
[13492152e5, 32.6],
|
||||
[13493016e5, 32.68],
|
||||
[1349388e6, 32.47],
|
||||
[13496472e5, 32.23],
|
||||
[13497336e5, 31.68],
|
||||
[134982e7, 31.51],
|
||||
[13499064e5, 31.78],
|
||||
[13499928e5, 31.94],
|
||||
[1350252e6, 32.33],
|
||||
[13503384e5, 33.24],
|
||||
[13504248e5, 33.44],
|
||||
[13505112e5, 33.48],
|
||||
[13505976e5, 33.24],
|
||||
[13508568e5, 33.49],
|
||||
[13509432e5, 33.31],
|
||||
[13510296e5, 33.36],
|
||||
[1351116e6, 33.4],
|
||||
[13512024e5, 34.01],
|
||||
[1351638e6, 34.02],
|
||||
[13517244e5, 34.36],
|
||||
[13518108e5, 34.39],
|
||||
[135207e7, 34.24],
|
||||
[13521564e5, 34.39],
|
||||
[13522428e5, 33.47],
|
||||
[13523292e5, 32.98],
|
||||
[13524156e5, 32.9],
|
||||
[13526748e5, 32.7],
|
||||
[13527612e5, 32.54],
|
||||
[13528476e5, 32.23],
|
||||
[1352934e6, 32.64],
|
||||
[13530204e5, 32.65],
|
||||
[13532796e5, 32.92],
|
||||
[1353366e6, 32.64],
|
||||
[13534524e5, 32.84],
|
||||
[13536252e5, 33.4],
|
||||
[13538844e5, 33.3],
|
||||
[13539708e5, 33.18],
|
||||
[13540572e5, 33.88],
|
||||
[13541436e5, 34.09],
|
||||
[135423e7, 34.61],
|
||||
[13544892e5, 34.7],
|
||||
[13545756e5, 35.3],
|
||||
[1354662e6, 35.4],
|
||||
[13547484e5, 35.14],
|
||||
[13548348e5, 35.48],
|
||||
[1355094e6, 35.75],
|
||||
[13551804e5, 35.54],
|
||||
[13552668e5, 35.96],
|
||||
[13553532e5, 35.53],
|
||||
[13554396e5, 37.56],
|
||||
[13556988e5, 37.42],
|
||||
[13557852e5, 37.49],
|
||||
[13558716e5, 38.09],
|
||||
[1355958e6, 37.87],
|
||||
[13560444e5, 37.71],
|
||||
[13563036e5, 37.53],
|
||||
[13564764e5, 37.55],
|
||||
[13565628e5, 37.3],
|
||||
[13566492e5, 36.9],
|
||||
[13569084e5, 37.68],
|
||||
[13570812e5, 38.34],
|
||||
[13571676e5, 37.75],
|
||||
[1357254e6, 38.13],
|
||||
[13575132e5, 37.94],
|
||||
[13575996e5, 38.14],
|
||||
[1357686e6, 38.66],
|
||||
[13577724e5, 38.62],
|
||||
[13578588e5, 38.09],
|
||||
[1358118e6, 38.16],
|
||||
[13582044e5, 38.15],
|
||||
[13582908e5, 37.88],
|
||||
[13583772e5, 37.73],
|
||||
[13584636e5, 37.98],
|
||||
[13588092e5, 37.95],
|
||||
[13588956e5, 38.25],
|
||||
[1358982e6, 38.1],
|
||||
[13590684e5, 38.32],
|
||||
[13593276e5, 38.24],
|
||||
[1359414e6, 38.52],
|
||||
[13595004e5, 37.94],
|
||||
[13595868e5, 37.83],
|
||||
[13596732e5, 38.34],
|
||||
[13599324e5, 38.1],
|
||||
[13600188e5, 38.51],
|
||||
[13601052e5, 38.4],
|
||||
[13601916e5, 38.07],
|
||||
[1360278e6, 39.12],
|
||||
[13605372e5, 38.64],
|
||||
[13606236e5, 38.89],
|
||||
[136071e7, 38.81],
|
||||
[13607964e5, 38.61],
|
||||
[13608828e5, 38.63],
|
||||
[13612284e5, 38.99],
|
||||
[13613148e5, 38.77],
|
||||
[13614012e5, 38.34],
|
||||
[13614876e5, 38.55],
|
||||
[13617468e5, 38.11],
|
||||
[13618332e5, 38.59],
|
||||
[13619196e5, 39.6],
|
||||
],
|
||||
},
|
||||
],
|
||||
markers: { size: 0, style: "hollow" },
|
||||
xaxis: {
|
||||
type: "datetime",
|
||||
min: new Date("01 Mar 2012").getTime(),
|
||||
tickAmount: 6,
|
||||
},
|
||||
tooltip: { x: { format: "dd MMM yyyy" } },
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
opacityFrom: 0.7,
|
||||
opacityTo: 0.9,
|
||||
stops: [0, 100],
|
||||
},
|
||||
},
|
||||
}),
|
||||
o = new ApexCharts(document.querySelector("#area-chart-datetime"), a);
|
||||
o.render();
|
||||
document
|
||||
.querySelector("#one_month")
|
||||
.addEventListener("click", function (e) {
|
||||
t(e),
|
||||
o.updateOptions({
|
||||
xaxis: {
|
||||
min: new Date("28 Jan 2013").getTime(),
|
||||
max: new Date("27 Feb 2013").getTime(),
|
||||
},
|
||||
});
|
||||
}),
|
||||
document
|
||||
.querySelector("#six_months")
|
||||
.addEventListener("click", function (e) {
|
||||
t(e),
|
||||
o.updateOptions({
|
||||
xaxis: {
|
||||
min: new Date("27 Sep 2012").getTime(),
|
||||
max: new Date("27 Feb 2013").getTime(),
|
||||
},
|
||||
});
|
||||
}),
|
||||
document
|
||||
.querySelector("#one_year")
|
||||
.addEventListener("click", function (e) {
|
||||
t(e),
|
||||
o.updateOptions({
|
||||
xaxis: {
|
||||
min: new Date("27 Feb 2012").getTime(),
|
||||
max: new Date("27 Feb 2013").getTime(),
|
||||
},
|
||||
});
|
||||
}),
|
||||
document.querySelector("#ytd").addEventListener("click", function (e) {
|
||||
t(e),
|
||||
o.updateOptions({
|
||||
xaxis: {
|
||||
min: new Date("01 Jan 2013").getTime(),
|
||||
max: new Date("27 Feb 2013").getTime(),
|
||||
},
|
||||
});
|
||||
}),
|
||||
document.querySelector("#all").addEventListener("click", function (e) {
|
||||
t(e), o.updateOptions({ xaxis: { min: void 0, max: void 0 } });
|
||||
}),
|
||||
document
|
||||
.querySelector("#ytd")
|
||||
.addEventListener("click", function () {});
|
||||
}),
|
||||
["#0acf97", "#ffbc00"]),
|
||||
dataColors = $("#area-chart-negative").data("colors"),
|
||||
options = {
|
||||
chart: { height: 380, type: "area" },
|
||||
dataLabels: { enabled: !1 },
|
||||
stroke: { width: 2, curve: "straight" },
|
||||
colors: (colors = dataColors ? dataColors.split(",") : colors),
|
||||
series: [
|
||||
{
|
||||
name: "North",
|
||||
data: [
|
||||
{ x: 1996, y: 322 },
|
||||
{ x: 1997, y: 324 },
|
||||
{ x: 1998, y: 329 },
|
||||
{ x: 1999, y: 342 },
|
||||
{ x: 2e3, y: 348 },
|
||||
{ x: 2001, y: 334 },
|
||||
{ x: 2002, y: 325 },
|
||||
{ x: 2003, y: 316 },
|
||||
{ x: 2004, y: 318 },
|
||||
{ x: 2005, y: 330 },
|
||||
{ x: 2006, y: 355 },
|
||||
{ x: 2007, y: 366 },
|
||||
{ x: 2008, y: 337 },
|
||||
{ x: 2009, y: 352 },
|
||||
{ x: 2010, y: 377 },
|
||||
{ x: 2011, y: 383 },
|
||||
{ x: 2012, y: 344 },
|
||||
{ x: 2013, y: 366 },
|
||||
{ x: 2014, y: 389 },
|
||||
{ x: 2015, y: 334 },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "South",
|
||||
data: [
|
||||
{ x: 1996, y: 162 },
|
||||
{ x: 1997, y: 90 },
|
||||
{ x: 1998, y: 50 },
|
||||
{ x: 1999, y: 77 },
|
||||
{ x: 2e3, y: 35 },
|
||||
{ x: 2001, y: -45 },
|
||||
{ x: 2002, y: -88 },
|
||||
{ x: 2003, y: -120 },
|
||||
{ x: 2004, y: -156 },
|
||||
{ x: 2005, y: -123 },
|
||||
{ x: 2006, y: -88 },
|
||||
{ x: 2007, y: -66 },
|
||||
{ x: 2008, y: -45 },
|
||||
{ x: 2009, y: -29 },
|
||||
{ x: 2010, y: -45 },
|
||||
{ x: 2011, y: -88 },
|
||||
{ x: 2012, y: -132 },
|
||||
{ x: 2013, y: -146 },
|
||||
{ x: 2014, y: -169 },
|
||||
{ x: 2015, y: -184 },
|
||||
],
|
||||
},
|
||||
],
|
||||
xaxis: {
|
||||
type: "datetime",
|
||||
axisBorder: { show: !1 },
|
||||
axisTicks: { show: !1 },
|
||||
},
|
||||
yaxis: {
|
||||
tickAmount: 4,
|
||||
floating: !1,
|
||||
labels: { style: { color: "#8e8da4" }, offsetY: -7, offsetX: 0 },
|
||||
axisBorder: { show: !1 },
|
||||
axisTicks: { show: !1 },
|
||||
},
|
||||
fill: { opacity: 0.5, gradient: { enabled: !1 } },
|
||||
tooltip: {
|
||||
x: { format: "yyyy" },
|
||||
fixed: { enabled: !1, position: "topRight" },
|
||||
},
|
||||
legend: { offsetY: 5 },
|
||||
grid: {
|
||||
yaxis: { lines: { offsetX: -30 } },
|
||||
padding: { left: 0, bottom: 10 },
|
||||
borderColor: "#f1f3fa",
|
||||
},
|
||||
},
|
||||
colors =
|
||||
((chart = new ApexCharts(
|
||||
document.querySelector("#area-chart-negative"),
|
||||
options
|
||||
)).render(),
|
||||
["#FF7F00"]),
|
||||
dataColors = $("#area-chart-github2").data("colors"),
|
||||
optionsarea2 = {
|
||||
chart: {
|
||||
id: "chartyear",
|
||||
type: "area",
|
||||
height: 200,
|
||||
toolbar: { show: !1, autoSelected: "pan" },
|
||||
},
|
||||
colors: (colors = dataColors ? dataColors.split(",") : colors),
|
||||
stroke: { width: 0, curve: "smooth" },
|
||||
dataLabels: { enabled: !1 },
|
||||
fill: { opacity: 1, type: "solid" },
|
||||
series: [{ name: "commits", data: githubdata.series }],
|
||||
yaxis: { tickAmount: 10, labels: { show: !1 } },
|
||||
xaxis: { type: "datetime" },
|
||||
},
|
||||
chartarea2 = new ApexCharts(
|
||||
document.querySelector("#area-chart-github2"),
|
||||
optionsarea2
|
||||
),
|
||||
colors = (chartarea2.render(), ["#7BD39A"]),
|
||||
options =
|
||||
((dataColors = $("#area-chart-github").data("colors")) &&
|
||||
(colors = dataColors.split(",")),
|
||||
{
|
||||
chart: {
|
||||
height: 175,
|
||||
type: "area",
|
||||
toolbar: { autoSelected: "selection" },
|
||||
brush: { enabled: !0, target: "chartyear" },
|
||||
selection: {
|
||||
enabled: !0,
|
||||
xaxis: {
|
||||
min: new Date("05 Jan 2014").getTime(),
|
||||
max: new Date("04 Jan 2015").getTime(),
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: colors,
|
||||
dataLabels: { enabled: !1 },
|
||||
stroke: { width: 0, curve: "smooth" },
|
||||
series: [{ name: "commits", data: githubdata.series }],
|
||||
fill: { opacity: 1, type: "solid" },
|
||||
legend: { position: "top", horizontalAlign: "left" },
|
||||
xaxis: { type: "datetime" },
|
||||
}),
|
||||
colors =
|
||||
((chart = new ApexCharts(
|
||||
document.querySelector("#area-chart-github"),
|
||||
options
|
||||
)).render(),
|
||||
["#727cf5", "#0acf97", "#e3eaef"]),
|
||||
options =
|
||||
((dataColors = $("#stacked-area").data("colors")) &&
|
||||
(colors = dataColors.split(",")),
|
||||
{
|
||||
series: [
|
||||
{
|
||||
name: "South",
|
||||
data: generateDayWiseTimeSeries(
|
||||
new Date("11 Feb 2017 GMT").getTime(),
|
||||
20,
|
||||
{ min: 10, max: 60 }
|
||||
),
|
||||
},
|
||||
{
|
||||
name: "North",
|
||||
data: generateDayWiseTimeSeries(
|
||||
new Date("11 Feb 2017 GMT").getTime(),
|
||||
20,
|
||||
{ min: 10, max: 20 }
|
||||
),
|
||||
},
|
||||
{
|
||||
name: "Central",
|
||||
data: generateDayWiseTimeSeries(
|
||||
new Date("11 Feb 2017 GMT").getTime(),
|
||||
20,
|
||||
{ min: 10, max: 15 }
|
||||
),
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
type: "area",
|
||||
height: 350,
|
||||
stacked: !0,
|
||||
events: {
|
||||
selection: function (e, t) {
|
||||
console.log(new Date(t.xaxis.min));
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: ["#008FFB", "#00E396", "#CED4DC"],
|
||||
dataLabels: { enabled: !1 },
|
||||
stroke: { curve: "monotoneCubic" },
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: { opacityFrom: 0.6, opacityTo: 0.8 },
|
||||
},
|
||||
legend: { position: "top", horizontalAlign: "left" },
|
||||
xaxis: { type: "datetime" },
|
||||
});
|
||||
function generateDayWiseTimeSeries(e, t, a) {
|
||||
for (var o = 0, r = []; o < t; ) {
|
||||
var i = e,
|
||||
s = Math.floor(Math.random() * (a.max - a.min + 1)) + a.min;
|
||||
r.push([i, s]), (e += 864e5), o++;
|
||||
}
|
||||
return r;
|
||||
}
|
||||
(chart = new ApexCharts(
|
||||
document.querySelector("#stacked-area"),
|
||||
options
|
||||
)).render();
|
||||
for (
|
||||
var ts1 = 13885344e5,
|
||||
ts2 = 13886208e5,
|
||||
ts3 = 13890528e5,
|
||||
dataSet = [[], [], []],
|
||||
i = 0;
|
||||
i < 12;
|
||||
i++
|
||||
) {
|
||||
var innerArr = [(ts1 += 864e5), dataSeries[2][i].value];
|
||||
dataSet[0].push(innerArr);
|
||||
}
|
||||
for (i = 0; i < 18; i++) {
|
||||
innerArr = [(ts2 += 864e5), dataSeries[1][i].value];
|
||||
dataSet[1].push(innerArr);
|
||||
}
|
||||
for (i = 0; i < 12; i++) {
|
||||
innerArr = [(ts3 += 864e5), dataSeries[0][i].value];
|
||||
dataSet[2].push(innerArr);
|
||||
}
|
||||
(colors = ["#39afd1", "#fa5c7c", "#727cf5"]),
|
||||
(dataColors = $("#area-timeSeries").data("colors")) &&
|
||||
(colors = dataColors.split(",")),
|
||||
(options = {
|
||||
series: [
|
||||
{ name: "PRODUCT A", data: dataSet[0] },
|
||||
{ name: "PRODUCT B", data: dataSet[1] },
|
||||
{ name: "PRODUCT C", data: dataSet[2] },
|
||||
],
|
||||
chart: { type: "area", stacked: !1, height: 350, zoom: { enabled: !1 } },
|
||||
dataLabels: { enabled: !1 },
|
||||
markers: { size: 0 },
|
||||
colors: colors,
|
||||
fill: {
|
||||
gradient: {
|
||||
enabled: !0,
|
||||
shadeIntensity: 1,
|
||||
inverseColors: !1,
|
||||
opacityFrom: 0.45,
|
||||
opacityTo: 0.05,
|
||||
stops: [20, 100, 100, 100],
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: { color: "#8e8da4" },
|
||||
offsetX: 0,
|
||||
formatter: function (e) {
|
||||
return (e / 1e6).toFixed(0);
|
||||
},
|
||||
},
|
||||
axisBorder: { show: !1 },
|
||||
axisTicks: { show: !1 },
|
||||
},
|
||||
xaxis: {
|
||||
type: "datetime",
|
||||
tickAmount: 8,
|
||||
labels: {
|
||||
formatter: function (e) {
|
||||
return moment(new Date(e)).format("DD MMM YYYY");
|
||||
},
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: "Irregular Data in Time Series",
|
||||
align: "left",
|
||||
offsetX: 14,
|
||||
},
|
||||
tooltip: { shared: !0 },
|
||||
legend: { position: "top", horizontalAlign: "right", offsetX: -10 },
|
||||
}),
|
||||
(chart = new ApexCharts(
|
||||
document.querySelector("#area-timeSeries"),
|
||||
options
|
||||
)).render(),
|
||||
(colors = ["#6c757d"]),
|
||||
(dataColors = $("#area-chart-nullvalues").data("colors")),
|
||||
(options = {
|
||||
series: [
|
||||
{
|
||||
name: "Network",
|
||||
data: [
|
||||
{ x: "Dec 23 2017", y: null },
|
||||
{ x: "Dec 24 2017", y: 44 },
|
||||
{ x: "Dec 25 2017", y: 31 },
|
||||
{ x: "Dec 26 2017", y: 38 },
|
||||
{ x: "Dec 27 2017", y: null },
|
||||
{ x: "Dec 28 2017", y: 32 },
|
||||
{ x: "Dec 29 2017", y: 55 },
|
||||
{ x: "Dec 30 2017", y: 51 },
|
||||
{ x: "Dec 31 2017", y: 67 },
|
||||
{ x: "Jan 01 2018", y: 22 },
|
||||
{ x: "Jan 02 2018", y: 34 },
|
||||
{ x: "Jan 03 2018", y: null },
|
||||
{ x: "Jan 04 2018", y: null },
|
||||
{ x: "Jan 05 2018", y: 11 },
|
||||
{ x: "Jan 06 2018", y: 4 },
|
||||
{ x: "Jan 07 2018", y: 15 },
|
||||
{ x: "Jan 08 2018", y: null },
|
||||
{ x: "Jan 09 2018", y: 9 },
|
||||
{ x: "Jan 10 2018", y: 34 },
|
||||
{ x: "Jan 11 2018", y: null },
|
||||
{ x: "Jan 12 2018", y: null },
|
||||
{ x: "Jan 13 2018", y: 13 },
|
||||
{ x: "Jan 14 2018", y: null },
|
||||
],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
type: "area",
|
||||
height: 350,
|
||||
animations: { enabled: !1 },
|
||||
zoom: { enabled: !1 },
|
||||
},
|
||||
dataLabels: { enabled: !1 },
|
||||
stroke: { curve: "straight" },
|
||||
colors: (colors = dataColors ? dataColors.split(",") : colors),
|
||||
fill: {
|
||||
opacity: 0.8,
|
||||
gradient: { enabled: !1 },
|
||||
pattern: {
|
||||
enabled: !0,
|
||||
style: ["verticalLines", "horizontalLines"],
|
||||
width: 5,
|
||||
depth: 6,
|
||||
},
|
||||
},
|
||||
markers: { size: 5, hover: { size: 9 } },
|
||||
title: { text: "Network Monitoring" },
|
||||
tooltip: { intersect: !0, shared: !1 },
|
||||
theme: { palette: "palette1" },
|
||||
xaxis: { type: "datetime" },
|
||||
yaxis: { title: { text: "Bytes Received" } },
|
||||
});
|
||||
(chart = new ApexCharts(
|
||||
document.querySelector("#area-chart-nullvalues"),
|
||||
options
|
||||
)).render();
|
||||
Reference in New Issue
Block a user