30:[] 2e:{"title":"Line graph","cells":[{"id":0,"value":"md`# Line graph\n\nDraw line charts with ApexCharts\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"DOM.element('div', { id: 'chart' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"md`With interactions ?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"viewof interactive = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"md`## Dataset`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"ApexCharts = require('apexcharts@3.7.1/dist/apexcharts.amd.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"function randomInt(min, max) {\n return Math.floor(Math.random() * (max - min + 1)) + min;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"function generateDayWiseTimeSeries(baseval, count, yrange) {\n var series = []\n for(var i=0; i < count; i++) {\n var x = baseval + (i * 86400000) + randomInt(0, 86400000)\n var y = randomInt(yrange.min, yrange.max)\n\n series.push({\n x: x, \n y: y,\n title: `title ${i}`,\n comment: `comment ${i}`,\n level: randomInt(1, 10)\n })\n }\n return series\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"md`## Data and options`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"series = [{\n name: \"Desktops\",\n data: generateDayWiseTimeSeries(new Date('1 Jan 2010').getTime(), 15, { min: 0, max: 10 })\n}, {\n name: \"Mobiles\",\n data: generateDayWiseTimeSeries(new Date('1 Jan 2010').getTime(), 20, { min: 0, max: 10 })\n}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"options = ({\n chart: {\n type: 'line',\n toolbar: {\n show: false,\n tools: {\n download: false,\n selection: false,\n zoom: false,\n zoomin: false,\n zoomout: false,\n pan: false,\n reset: false\n }\n }\n },\n dataLabels: {\n enabled: false\n },\n legend: {\n show: interactive\n },\n markers: {\n size: 6,\n style: 'full',\n },\n stroke: {\n curve: 'straight'\n },\n series: series,\n xaxis: {\n type: 'datetime'\n },\n yaxis: {\n min: -1,\n max: 11,\n tickAmount: 5\n },\n tooltip: {\n enabled: interactive,\n custom: function({_, seriesIndex, dataPointIndex, w}) {\n return `

${series[seriesIndex].data[dataPointIndex].title}

${series[seriesIndex].data[dataPointIndex].comment}

Level: ${series[seriesIndex].data[dataPointIndex].level}

`\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":188,"value":"md`## Generate chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"chart = new ApexCharts.default(\n document.querySelector(\"#chart\"),\n options\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"chart.render()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}