Chart.js example using Jquery Ajax to populate labels and data

chartjs_jquery_ajax_example.html

<canvas id="myChart" width="400" height="100"></canvas>

<script src="/js/Chart.min.js"></script>
<script>
$(function () {
    var ctx = document.getElementById("myChart").getContext("2d");
    // examine example_data.json for expected response data
    var json_url = "example_data.json";

    // draw empty chart
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [],
            datasets: [
                {
                    label: "My First dataset",
                    fill: false,
                    lineTension: 0.1,
                    backgroundColor: "rgba(75,192,192,0.4)",
                    borderColor: "rgba(75,192,192,1)",
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: "rgba(75,192,192,1)",
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "rgba(75,192,192,1)",
                    pointHoverBorderColor: "rgba(220,220,220,1)",
                    pointHoverBorderWidth: 2,
                    pointRadius: 1,
                    pointHitRadius: 10,
                    data: [],
                    spanGaps: false,
                }
            ]
        },
        options: {
            tooltips: {
                mode: 'index',
                intersect: false
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });

    ajax_chart(myChart, json_url);

    // function to update our chart
    function ajax_chart(chart, url, data) {
        var data = data || {};

        $.getJSON(url, data).done(function(response) {
            chart.data.labels = response.labels;
            chart.data.datasets[0].data = response.data.quantity; // or you can iterate for multiple datasets
            chart.update(); // finally update our chart
        });
    }
});
</script>

example_data.json

{
    "labels": ["January", "February", "March", "April", "May", "June", "July"],
    "data": {
        "quantity": [65, 59, 80, 81, 56, 55, 40]
    }
}

How to add onchange select? Im trying to add

select id="pies" onchange="ajax_chart()

and then pass data
var x = document.getElementById("pies").value;

var json_url = "url.php?q=" + x;

But it works only on first change.

remove onchange="ajax_chart()" from your select tag
then try this, assuming your chart var is myChart:

document.getElementById('pies').onchange = e => {
    var x = e.target.value;
    var json_url = "url.php?q=" + x;

    fetch(json_url)
        .then(response => response.json())
        .then(result => {
            myChart.data.labels = result.labels;
            myChart.data.datasets[0].data = result.data.quantity; // or you can iterate for multiple datasets
            myChart.update(); 
        }
}

Thank you for quick responding. I tried to add your code there but that makes the page blank.

Heres fulls script:

select id="pies"
options

$(function () {
    var ctx = document.getElementById("myChart").getContext("2d");
        
    var json_url = "url.php";

    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [],
            datasets: [
                {
                    label: "My First dataset",
                    data: [],
                }
            ]
        },
    });

    ajax_chart(myChart, json_url);


    function ajax_chart(chart, url, data) {
        var data = data || {};

        $.getJSON(url, data).done(function(response) {
            chart.data.labels = response.labels;
            chart.data.datasets[0].data = response.data.quantity; // or you can iterate for multiple datasets
            chart.update(); // finally update our chart
        });
    }
   
document.getElementById('pies').onchange = e => {
    var x = e.target.value;
    var json_url = "url.php?q=" + x;

    fetch(json_url)
        .then(response => response.json())
        .then(result => {
            myChart.data.labels = result.labels;
            myChart.data.datasets[0].data = result.data.quantity; // or you can iterate for multiple datasets
            myChart.update(); 
        }
}    
    
});

finally got it:

select onchange myFunction()

function myFunction() {
  var x = document.getElementById("pies").value;
 
    var json_url = "url.php?q=" + x;
    var data = data || {};

        $.getJSON(json_url, data).done(function(response) {
            bar.data.labels = response.labels;
            bar.data.datasets[0].data = response.data.quantity; // or you can iterate for multiple datasets
            bar.update(); // finally update our chart
        });        
}