lavkach3
1document.addEventListener("DOMContentLoaded", function () {2// Basic Line Chart -------> LINE CHART3var options_line = {4series: [5{6name: "Desktops",7data: [10, 41, 35, 51, 49, 62, 69, 91, 148],8},9],10chart: {11height: 350,12type: "line",13fontFamily: "inherit",14zoom: {15enabled: false,16},17offsetX: -10,18toolbar: {19show: false,20},21},22dataLabels: {23enabled: false,24},25colors: ["var(--bs-primary)"],26stroke: {27curve: "straight",28},29grid: {30row: {31colors: ["transparent"], // takes an array which will be repeated on columns32opacity: 0.5,33},34padding: {35top: 0,36right: 0,37bottom: 0,38left: 0,39},40borderColor: "transparent",41},42xaxis: {43categories: [44"Jan",45"Feb",46"Mar",47"Apr",48"May",49"Jun",50"Jul",51"Aug",52"Sep",53],54labels: {55style: {56colors: "#a1aab2",57},58},59},60yaxis: {61labels: {62style: {63colors: "#a1aab2",64},65},66},67tooltip: {68theme: "dark",69},70};71
72var chart_line_basic = new ApexCharts(73document.querySelector("#chart-line-basic"),74options_line
75);76chart_line_basic.render();77
78// Data Label Line Chart -------> LINE CHART79var options = {80series: [81{82name: "High - 2013",83data: [28, 29, 33, 36, 32, 32, 33],84},85{86name: "Low - 2013",87data: [12, 11, 14, 18, 17, 13, 13],88},89],90chart: {91fontFamily: "inherit",92height: 350,93type: "line",94dropShadow: {95enabled: true,96color: "#000",97top: 18,98left: 7,99blur: 10,100opacity: 0.2,101},102toolbar: {103show: false,104},105},106colors: ["var(--bs-primary)", "var(--bs-secondary)"],107dataLabels: {108enabled: true,109},110stroke: {111curve: "smooth",112},113grid: {114borderColor: "transparent",115row: {116colors: ["transparent"], // takes an array which will be repeated on columns117opacity: 0.5,118},119},120markers: {121size: 1,122},123xaxis: {124categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],125labels: {126style: {127colors:"#a1aab2",128},129},130},131yaxis: {132min: 5,133max: 40,134labels: {135style: {136colors:"#a1aab2",137},138},139},140tooltip: {141theme: "dark",142},143legend: {144position: "top",145horizontalAlign: "right",146floating: true,147offsetY: -25,148offsetX: -5,149},150};151
152var chart_line_data = new ApexCharts(153document.querySelector("#chart-line-with-data-label"),154options
155);156chart_line_data.render();157
158// Zoomable Line Chart -------> LINE CHART159var options_zoomable = {160series: [161{162name: "XYZ MOTORS",163data: [164{165x: "02-10-2017 GMT",166y: 34,167},168{169x: "02-11-2017 GMT",170y: 43,171},172{173x: "02-12-2017 GMT",174y: 31,175},176{177x: "02-13-2017 GMT",178y: 43,179},180{181x: "02-14-2017 GMT",182y: 33,183},184{185x: "02-15-2017 GMT",186y: 52,187},188],189},190],191chart: {192fontFamily: "inherit",193type: "area",194stacked: false,195height: 350,196zoom: {197type: "x",198enabled: true,199autoScaleYaxis: true,200},201toolbar: {202autoSelected: "zoom",203show: false,204},205},206dataLabels: {207enabled: false,208},209grid: {210borderColor: "transparent",211padding: {212top: 0,213right: 0,214bottom: 0,215left: 0,216},217},218colors: ["var(--bs-primary)"],219markers: {220size: 0,221},222fill: {223type: "gradient",224gradient: {225shadeIntensity: 1,226inverseColors: false,227opacityFrom: 0.12,228opacityTo: 0,229stops: [0, 90, 100],230},231},232yaxis: {233labels: {234formatter: function (val) {235return (val / 1000000).toFixed(0);236},237style: {238colors:"#a1aab2",239},240},241},242xaxis: {243type: "datetime",244labels: {245style: {246colors:"#a1aab2",247},248},249},250tooltip: {251shared: false,252y: {253formatter: function (val) {254return (val / 1000000).toFixed(0);255},256},257theme: "dark",258},259};260
261var chart_line_zoomable = new ApexCharts(262document.querySelector("#chart-line-zoomable"),263options_zoomable
264);265chart_line_zoomable.render();266
267// Gradient Line Chart -------> LINE CHART268var options_gradient = {269series: [270{271name: "Likes",272data: [4, 3, 10, 9, 29, 19, 22, 9, 12, 7, 19, 5, 13, 9, 17, 2, 7, 5],273},274],275chart: {276fontFamily: "inherit",277height: 350,278type: "line",279toolbar: {280show: false,281},282},283stroke: {284width: 7,285curve: "smooth",286},287xaxis: {288type: "datetime",289categories: [290"1/11/2000",291"2/11/2000",292"3/11/2000",293"4/11/2000",294"5/11/2000",295"6/11/2000",296"7/11/2000",297"8/11/2000",298"9/11/2000",299"10/11/2000",300"11/11/2000",301"12/11/2000",302"1/11/2001",303"2/11/2001",304"3/11/2001",305"4/11/2001",306"5/11/2001",307"6/11/2001",308],309labels: {310style: {311colors:"#a1aab2",312},313},314},315grid: {316borderColor: "transparent",317padding: {318top: 0,319right: 0,320bottom: 0,321left: 0,322},323},324colors: ["#39b69a"],325fill: {326type: "gradient",327gradient: {328shade: "dark",329gradientToColors: ["var(--bs-primary)"],330shadeIntensity: 1,331type: "horizontal",332opacityFrom: 1,333opacityTo: 1,334stops: [0, 100, 100, 100],335},336},337markers: {338size: 4,339colors: ["var(--bs-primary)"],340strokeColors: "#fff",341strokeWidth: 2,342hover: {343size: 7,344},345},346yaxis: {347min: -10,348max: 40,349labels: {350style: {351colors:"#a1aab2",352},353},354},355tooltip: {356theme: "dark",357},358};359
360var chart_line_gradient = new ApexCharts(361document.querySelector("#chart-line-gradient"),362options_gradient
363);364chart_line_gradient.render();365
366var lastDate = 0;367var data = [];368var TICKINTERVAL = 86400000;369let XAXISRANGE = 777600000;370
371function getDayWiseTimeSeries(baseval, count, yrange) {372var i = 0;373while (i < count) {374var x = baseval;375var y =376Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;377
378data.push({379x,380y,381});382lastDate = baseval;383baseval += TICKINTERVAL;384i++;385}386}387
388getDayWiseTimeSeries(new Date("11 Feb 2017 GMT").getTime(), 10, {389min: 10,390max: 90,391});392
393function getNewSeries(baseval, yrange) {394var newDate = baseval + TICKINTERVAL;395lastDate = newDate;396
397for (var i = 0; i < data.length - 10; i++) {398// IMPORTANT399// we reset the x and y of the data which is out of drawing area400// to prevent memory leaks401data[i].x = newDate - XAXISRANGE - TICKINTERVAL;402data[i].y = 0;403}404
405data.push({406x: newDate,407y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min,408});409}410
411function resetData() {412// Alternatively, you can also reset the data at certain intervals to prevent creating a huge series413data = data.slice(data.length - 10, data.length);414}415
416// Realtime Line Chart -------> LINE CHART417var options_realtime = {418series: [419{420data: data.slice(),421},422],423chart: {424fontFamily: "inherit",425id: "realtime",426height: 350,427type: "line",428animations: {429enabled: true,430easing: "linear",431dynamicAnimation: {432speed: 1000,433},434},435toolbar: {436show: false,437},438
439zoom: {440enabled: false,441},442},443grid: {444borderColor: "transparent",445padding: {446top: 0,447right: 0,448bottom: 0,449left: 0,450},451},452colors: ["var(--bs-primary)"],453dataLabels: {454enabled: false,455},456stroke: {457curve: "smooth",458},459markers: {460size: 0,461},462xaxis: {463type: "datetime",464range: XAXISRANGE,465labels: {466style: {467colors:"#a1aab2",468},469},470},471yaxis: {472max: 100,473labels: {474style: {475colors:"#a1aab2",476},477},478},479tooltip: {480theme: "dark",481},482legend: {483show: false,484},485};486
487var chart_line_realtime = new ApexCharts(488document.querySelector("#chart-line-real-time"),489options_realtime
490);491chart_line_realtime.render();492
493window.setInterval(function () {494getNewSeries(lastDate, {495min: 10,496max: 90,497});498
499chart_line_realtime.updateSeries([500{501data: data,502},503]);504}, 1000);505});506