Why will my picasso.js graph not render?

gibran-shah — Mon, 19 Jun 2023 13:41:47 GMT

Hello,

I'm trying out picasso.js and I'm following along with this guide. I believe I did everything it says to do yet my graph won't render.

Here is my code:

index.html:

<html> <head> <script src="https://cdn.jsdelivr.net/npm/picasso.js" crossorigin></script> <script src="./logic.js"></script> </head> <body onload="load()"> <div id="barChartContainer">chart goes here</div> </body> </html>

logic.js:

//import picasso from 'picasso.js'; var exampledata = [ { type: "matrix", data: [ ["Month", "Sales", "Margin"], ["Jan", 1106, 7], ["Feb", 5444, 53], ["Mar", 3450, 64], ["Apr", 7499, 47], ["May", 4300, 62], ["June", 9735, 13], ["July", 7435, 15], ["Aug", 1482, 45], ["Sep", 2659, 76], ["Oct", 1261, 73], ["Nov", 3085, 56], ["Dec", 3035, 91] ] } ]; var scales = { month: { data: { field: "Month" } }, sales: { data: { field: "Sales" }, invert: true, expand: 0.1, include: [0] }, margin: { data: { field: "Margin" }, include: [0] } }; var barcomponent = [{ type: 'box', data: { extract: { field: 'Month', props: { start: 0, end: { field: 'Sales' } } } }, settings: { major: { scale: 'month' }, minor: { scale: 'sales' } } }]; var axiscomponents = [ { type: "axis", scale: "month", dock: "bottom" }, { type: "axis", scale: "sales", dock: "left" } ]; function load() { var barChartContainer = document.querySelector('#barChartContainer'); console.log(barChartContainer); console.log(axiscomponents); console.log(barcomponent); console.log(scales); console.log(exampledata); picasso.chart({ element: barChartContainer, // Referencing our container cell data: exampledata, settings: { scales: scales, components: [].concat(barcomponent, axiscomponents) // Concat the bar and axis' into a single array } }); }

It seems to be grabbing and using the main div where the chart is to be injected as I'm no longer seeing the text "chart goes here" but I just get a blank screen instead. My console logs print out with the expected data so I know the main "load" function is running.

Can anyone see what could be wrong? Thanks!

topic Why will my picasso.js graph not render? in App Development

Why will my picasso.js graph not render?