31:[{"id":"bd499e4db2eaeb504b7be4b616e5c9650f79c1c3c2d33ed852e7eab43221eeeb5371b1a2d15d33838a1dd60be8635b63bae963de7424c3a3f386c8a4d5e81fd3","href":"https://static.observableusercontent.com/files/bd499e4db2eaeb504b7be4b616e5c9650f79c1c3c2d33ed852e7eab43221eeeb5371b1a2d15d33838a1dd60be8635b63bae963de7424c3a3f386c8a4d5e81fd3","name":"1-2@2.csv","type":"text/csv","lastModified":1616462415436.114,"size":126}] 2f:{"title":"Line graph - Food resources in hive","cells":[{"id":0,"value":"md`# Line graph - Food resources in hive\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-2@2.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":true,"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: 100,\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"}