Chartjs-How does one add data to a Chart in an ajax call?

by

2👍

✅

Alright I got the newest ChartJS and tried it out with your scenario.

My html:

<canvas id="myChart" width="200" height="200"></canvas>

Creating the chart:

$(function () {
    var ctx = $("#myChart");
    var myChart = new Chart(ctx, { type: 'bar', data: { labels: [], datasets: [] } });

     UpdateChart(myChart)
});

I had to specify the type and a data object with empty labels and datasets for it to even render on the screen as an empty chart.

My function that updates the chart: 

function UpdateChart(chart) {
            var data =  {
                        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                        datasets: [{
                            label: '# of Votes',
                            data: [12, 19, 3, 5, 2, 3],
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                '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)'
                            ],
                            borderColor: [
                                'rgba(255,99,132,1)',
                                '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)'
                            ],
                            borderWidth: 1
                        }]
            }
            chart.data.labels = data.labels
            chart.data.datasets = data.datasets
            chart.update()
        }

I tried doing chart.data = data but that didn’t work for me. I had to specifically update data.labels then data.datasets before updating.

2👍

Worked fine by me, see my exact code below.

You have to make sure that you are using the updated .js file of the chart.js plugin. Of course, you have to include Jquery plugin on top of your every javascript file.

For this replication, I used the cdn provided by jquery and chart.js.

<canvas id="chart" height="400px" width="400px"></canvas>

<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script     src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js">    </script>
<script>

$.ajax({
        url: "http://localhost:8081/chart.php",
        dataType: "json",
        success: function(response)
        {
            var ctx = document.getElementById("chart");
            var myBarChart = new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: response.data.labels,
                    datasets: [{
                        label: 'Number of Active Customers',
                        data: response.data.chartData,
                        backgroundColor: [
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(255, 99, 132, 0.2)'
                        ],
                        borderColor: [
                            'rgba(75, 192, 192, 1)',
                            'rgba(255,99,132,1)'
                        ],
                        borderWidth: 1
                    }]
                }
            });
        }
});
</script>

chart.php file contains only the response JSON code as you may see below.

{
   "result":true,
   "message":null,
   "data":{
      "labels":[
         "Plant",
         "Process"
      ],
      "chartData":[
         "10",
         "1"
      ]
   }
}

Leave a comment