25:["$","title",null,{"children":"Line graph | Karim Ghaleb's Workspace | Observable"}] 49:[{"id":"6a5b3fedd1b1cb88b78dd174c284cd40d916157d1f7cffd132d5cc361d45bce5cb673f562117207f1e911a8bb3edf3a22fca052d25012d571ed93aee5e2de196","href":"https://static.observableusercontent.com/files/6a5b3fedd1b1cb88b78dd174c284cd40d916157d1f7cffd132d5cc361d45bce5cb673f562117207f1e911a8bb3edf3a22fca052d25012d571ed93aee5e2de196","name":"80224_Concrete is the new oil2.csv","type":"text/csv","lastModified":1707408523168.801,"size":15117}] 29:{"id":"c2ff9ca67ee39b0b","slug":null,"title":"Line graph","thumbnail":"b39e256cd5bc13452f34e109bf9af10b8d7453165d37bbe34d11b1ae1e165231","access_level":"public","create_time":"$D2024-02-08T16:05:52.511Z","update_time":"$D2024-02-08T16:09:43.328Z","view_time":null,"first_public_time":"$D2024-02-08T16:05:52.511Z","has_unpublished_edits":null,"fork":{"id":"57eb260398d45e9a","slug":"line-graph","title":"Line graph","owner":{"id":"18743efc18c8f64e","login":"ghn","name":"Germain"}},"stars":0,"starred":false,"owner":{"type":"team","id":"9cabc1091b105b17","login":"karim-ghaleb-ws","name":"Karim Ghaleb's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/7f15872f02ec8e58f6e0a39aa1df6cccb82e78029cc13a00b9460eabb00598e0","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":270,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"22090b353d80c559","login":"karim-ghaleb","name":"Karim Ghaleb","avatar_url":"https://avatars-next.observableusercontent.com/0b4ab2c5c33755c74186cd2f5bc9d23e7553e9f123ff0103404ae70b3947c64a","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"22090b353d80c559","login":"karim-ghaleb","name":"Karim Ghaleb","avatar_url":"https://avatars-next.observableusercontent.com/0b4ab2c5c33755c74186cd2f5bc9d23e7553e9f123ff0103404ae70b3947c64a","tier":null,"role":"editor"},{"type":"team","id":"9cabc1091b105b17","login":"karim-ghaleb-ws","name":"Karim Ghaleb's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/7f15872f02ec8e58f6e0a39aa1df6cccb82e78029cc13a00b9460eabb00598e0","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"DOM.element('div', { id: 'chart' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"md`With interactions ?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"viewof interactive = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"md`## Dataset`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"_concreteIsTheNewOil2 = await FileAttachment(\"80224_Concrete is the new oil2.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"_concreteIsTheNewOil2","database":"$undefined"},{"id":191,"value":"md`## Data and options`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"series = [{\n name: \"Concrete Emissions Percetnage\",\n data: _concreteIsTheNewOil2(new Date('1930').getTime(), 15, { min: 0, max: 10 })\n}, {\n name: \"Oil Emissions\",\n data: _concreteIsTheNewOil2(new Date('1930').getTime(), 20, { min: 0, max: 10 })\n}]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"md`## Generate chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"chart.render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null