Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
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!