Why will my picasso.js graph not render?

gibran-shah · ‎2023-06-19

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!

General Question