caisse-bliss/app/Resources/views/logged/history-script.html.twig

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script>

    var dataPoints = [
        {% for pair in statisticsSoldProducts %}
        {
            label: "{{ pair.name }}",
            x: {{ pair.count }},
            y: {{ pair.count }}
        },
        {% endfor %}
    ];
    var dataPointsChiffreAffaire = [
        {% for pair in statisticsSoldProducts %}
        {
            label: "{{ pair.name }}",
            x: {{ pair.value }},
            y: {{ pair.value }}
        },
        {% endfor %}
    ];
    var dataPointsFestivals = [
        {% for pair in statisticsFestivals %}
        {
            label: "{{ pair.name }} {{ pair.date|date('Y-m-d') }} , {{ pair.chiffreAffaire }} €",
            y: {{ pair.chiffreAffaire }} ,
            countClients : "{{ pair.clients_count }} clients"
        },
        {% endfor %}
    ];
    console.log(dataPointsFestivals);
    var chartFestival = new CanvasJS.Chart("chartContainerstatisticsFestivals", {
        title:{
            text: "Chiffre d'affaire par festival"
        },
        animationEnabled: true,
        data: [
            {
                // Change type to "doughnut", "line", "splineArea", etc.
                type: "column",
                dataPoints: dataPointsFestivals
            }
        ]
    });
    console.log('dataPointsFestivals', dataPointsFestivals);
    chartFestival.render();
    var chart = new CanvasJS.Chart("chartContainer", {
        title:{
            text: "Volume de produits vendus"
        },
        animationEnabled: true,
        data: [
            {
                // Change type to "doughnut", "line", "splineArea", etc.
                type: "pie",
                dataPoints: dataPoints
            }
        ]
    });
    chart.render();
    var chartContainerChiffreAffaire = new CanvasJS.Chart("chartContainerChiffreAffaire", {
        title:{
            text: "Valeur en euros des produits vendus"
        },
        animationEnabled: true,
        data: [
            {
                // Change type to "doughnut", "line", "splineArea", etc.
                type: "pie",
                dataPoints: dataPointsChiffreAffaire
            }
        ]
    });
    chartContainerChiffreAffaire.render();
</script>