Sum of results filtered by month in a chart [LARAVEL]

Viewed 311

I am currently trying to do a chart with chart.js, and I would like to get the total number of sales over a year in 1 month increments. I'm currently wondering how to break down the number of sales I make every month knowing that I have the "created_at" column for each order. I know how to do the total for each month with a foreach loop, but to cut out the sales and put the total in a table, I don't see how I could do it.

This is what my table looks like:

my table

This is what my chart looks like:

  moment().locale('fr');
        var canvas = document.getElementById("bellegaiaChart");
        var ctx = canvas.getContext('2d');

        // Global Options:
        Chart.defaults.global.defaultFontColor = 'black';
        Chart.defaults.global.defaultFontSize = 16;

        var data = {
            labels: ["Jan", "Fev", "Mar", "Avr", "Mai", "Juin", "Jui", "Aoû", "Sep", "Oct", "Nov", "Dec"],
            datasets: [{
                label: "Ventes",
                fill: false,
                lineTension: 0.1,
                backgroundColor: "rgba(225,0,0,0.4)",
                borderColor: "red", // The main line color
                borderCapStyle: 'square',
                borderDash: [], // try [5, 15] for instance
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "black",
                pointBackgroundColor: "white",
                pointBorderWidth: 1,
                pointHoverRadius: 8,
                pointHoverBackgroundColor: "yellow",
                pointHoverBorderColor: "brown",
                pointHoverBorderWidth: 2,
                pointRadius: 4,
                pointHitRadius: 10,
                // notice the gap in the data and the spanGaps: true
                data: [65, 59, 80, 81, 56, 110, 40 ,60,55,30,78],
                spanGaps: false,
            }, {
                label: "Nouveaux Clients",
                fill: false,
                lineTension: 0.1,
                backgroundColor: "rgba(167,105,0,0.4)",
                borderColor: "rgb(167, 105, 0)",
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "white",
                pointBackgroundColor: "black",
                pointBorderWidth: 1,
                pointHoverRadius: 8,
                pointHoverBackgroundColor: "brown",
                pointHoverBorderColor: "yellow",
                pointHoverBorderWidth: 2,
                pointRadius: 4,
                pointHitRadius: 10,
                // notice the gap in the data and the spanGaps: false
                data: [10, 20, 60, 95, 64, 78, 90,70,40,70,89, 73],
                spanGaps: false,
            }

            ]
        };

        // Notice the scaleLabel at the same level as Ticks
        var options = {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Moola',
                        fontSize: 20
                    }
                }]
            }
        };

        // Chart declaration:
        var myBarChart = new Chart(ctx, {
            type: 'line',
            data: data,
            options: options
        });

This chart is currently integrated in my blade view. The goal would be to have a table containing all the sales totals per month (so 12 entries in the table) in order to be able to specify it in the data of my chart.

0 Answers
Related