Assigning values to chart.js

Ask the community
,
1

Hi all,

I’m working with Chart.js querying multiple collections, passing the info to a function to create an object and ultimately display it.

I can get the chart working using sample data from a query but not with my custom object, I get the following error:

item.map is not a function

The full code is:

export function populateChart(
    owner,
    month_current,
    month_minus_1,
    month_minus_2,
    month_minus_3,
    month_minus_4,
    month_minus_5,
    month_minus_6,
    month_minus_7,
    month_minus_8,
    month_minus_9,
    month_minus_10,
    month_minus_11,
) {

    let months = [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ];

    let currentMonth = new Date().getMonth();
    let monthsB = months.splice((currentMonth + 1) % 12).reverse();
    months = months.reverse();
    months.push(monthsB);
    months = months.flat();

    let item = {
        label: [
            months[0],
            months[1],
            months[2],
            months[3],
            months[4],
            months[5],
            months[6],
            months[7],
            months[8],
            months[9],
            months[10],
            months[11]
        ],
        data: [
            month_current,
            month_minus_1,
            month_minus_2,
            month_minus_3,
            month_minus_4,
            month_minus_5,
            month_minus_6,
            month_minus_7,
            month_minus_8,
            month_minus_9,
            month_minus_10,
            month_minus_11,
        ],
        background_colour: [
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 206, 86, 0.2)",
            "rgba(75, 192, 192, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)",
            "rgba(255, 99, 132, 0.2)",
            "rgba(85, 162, 235, 0.2)",
            "rgba(33, 206, 86, 0.2)",
            "rgba(180, 192, 192, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(200, 159, 64, 0.2)",
            "rgba(100, 99, 132, 0.2)"
        ],
        border_colour: [
            "rgba(54, 162, 235, 1)",
            "rgba(255, 206, 86, 1)",
            "rgba(75, 192, 192, 1)",
            "rgba(153, 102, 255, 1)",
            "rgba(255, 159, 64, 1)",
            "rgba(255, 99, 132, 1)",
            "rgba(85, 162, 235, 1)",
            "rgba(33, 206, 86, 1)",
            "rgba(180, 192, 192, 1)",
            "rgba(200, 102, 255, 1)",
            "rgba(255, 159, 64, 1)",
            "rgba(100, 99, 132, 1)"
        ]

    };

    let chart = new ChartJSAPI($w('#customElement1'));
    chart.customization = chartCustomization;
    const labels = item.map(item => item.label);
    const data = item.map(item => Number(item.data));
    const background_colour = item.map(item => item.background_colour);
    const border_colour = item.map(item => item.border_colour);

    chart.data = {
        labels,
        datasets: [{ data, background_colour, border_colour }]
    }

Any ideas where I am going wrong?