31:[{"id":"58551b217d952bc4789ec00b876a06802406d0e8f1d03cb723a2d894ca1f3f892bdb77f907b79a26c8ccc005366847602c05c7662f9775cbe17782ae1aff5d1a","href":"https://static.observableusercontent.com/files/58551b217d952bc4789ec00b876a06802406d0e8f1d03cb723a2d894ca1f3f892bdb77f907b79a26c8ccc005366847602c05c7662f9775cbe17782ae1aff5d1a","name":"1@1.csv","type":"text/csv","lastModified":1587590039773.269,"size":118}] 2f:{"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":276,"value":"d3 = require ('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":273,"value":"s_1= {\n\n const allData = (d3.csvParse(await FileAttachment(\"1@1.csv\").text(), d3.autoType))\n .map(({ x, y, title, comment, level}) => ({x: x, y:y, title:title, comment:comment, level:level}))\n\n return allData\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"series= [{\n name: \"1\",\n data: s_1\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: 'smooth'\n },\n series: series,\n xaxis: {\n tickAmount:10\n //type: 'int'\n },\n yaxis: {\n min: 0,\n max: 1,\n tickAmount: 10\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":"$W31","stdlib":"1","titling":"auto"}