28:null 29:["$","title",null,{"children":"Line graph | Germain | Observable"}] 2e:[] 2c:{"id":"57eb260398d45e9a","slug":"line-graph","title":"Line graph","thumbnail":"c95bd354c2f2d14d428a908707a3cbedd569491ef7d2706ea5804807ff9de810","access_level":"public","create_time":"$D2019-06-04T13:16:19.724Z","update_time":"$D2019-06-07T07:30:14.864Z","view_time":null,"first_public_time":"$D2019-06-04T13:16:21.452Z","has_unpublished_edits":null,"fork":false,"stars":10,"starred":false,"owner":{"type":"team","id":"18743efc18c8f64e","login":"ghn","name":"Germain","avatar_url":"https://avatars-next.observableusercontent.com/0f78a32de59785cd8eb190731b265d3376f7e6eab3ac16ff2ce81cbea76a1639","tier":"starter_2024"},"version":263,"publish_version":263,"role":null,"authored":false,"authors":[{"type":"individual","id":"9bef305af322263e","login":"ghn","name":"Germain","avatar_url":"https://avatars-next.observableusercontent.com/0f78a32de59785cd8eb190731b265d3376f7e6eab3ac16ff2ce81cbea76a1639","tier":null}],"members":[{"type":"individual","id":"9bef305af322263e","login":"ghn","name":"Germain","avatar_url":"https://avatars-next.observableusercontent.com/0f78a32de59785cd8eb190731b265d3376f7e6eab3ac16ff2ce81cbea76a1639","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":31,"collection":{"id":"ee5f40fa94aa33b8","slug":"demos","title":"Demos","owner":{"id":"18743efc18c8f64e","login":"ghn","name":"Germain"}},"type":"notebook","body":{"title":"Line graph","cells":[{"id":0,"value":"md`# Line graph\n\nDraw line charts with ApexCharts\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"DOM.element('div', { id: 'chart' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"md`With interactions ?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"viewof interactive = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"md`## Dataset`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"ApexCharts = require('apexcharts@3.7.1/dist/apexcharts.amd.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"function randomInt(min, max) {\n return Math.floor(Math.random() * (max - min + 1)) + min;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"md`## Data and options`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"md`## Generate chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"chart = new ApexCharts.default(\n document.querySelector(\"#chart\"),\n options\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"chart.render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"