chart.js 2.3 dynamicually load pie chart data

Question

I have a pie chart that want to be able toggle between MTD and YTD data. The chart to load fine on page load. I'm have difficulty changing the data via AJAX from MTD to YTD.

I've looked at many post regarding this but everything I've found is for an older version of chart.js 1.0.1.

I want to use the latest version chart.js 2.3. Here is code any help would be greatly appreciated.

HTML:

<div class="chart-responsive">
   <canvas id="myPieChart" />
</div>

JAVASCRIPT:

var pieconfig = {
  type: 'doughnut',
  data: {
    datasets: [{
      data: [<cfoutput>#valueList(myPieData.totalAmt)#</cfoutput>], // the returned data looks like this (1254.52,223.50,etc.)
      backgroundColor: [
        "#F7464A",
        "#46BFBD",
        "#FDB45C",
        "#949FB1",
        "#4D5360",
        "#60A2C9",
        "#00A65A",
        "#D2D6DE",
        "#4D5360",
        "#00C0EF"
      ],
      label: 'Dataset 1'
    }],
    labels: [
      <cfoutput>#ListQualify(valueList(myPieData.busUnit), "'",  ",")#</cfoutput> // the returned label looks like this ('Joe','Jim',etc.)
    ]
  },
  options: {
    responsive: true,
    legend: {
      position: 'right',
    },
    title: {
      display: false,
      text: 'Chart.js Doughnut Chart'
    },
    animation: {
      animateScale: true,
      animateRotate: true
    }
  }
};

window.onload = function() {
  var ctx = document.getElementById("myPieChart").getContext("2d");    
  myDoughnut = new Chart(ctx, pieconfig);
};

The above code works fine on page load. Below is my code to update the data in my pie chart.

$.ajax({
  type: "POST",
  url: "/main/piechartdata/",
  data: {'workList':'sale','rtype':$rType},
  dataType: "json",
  success: function(rData) {
    console.log(rData.labels);
    locData = {
      type: 'doughnut',
      data: {
        datasets: [{
          data: rData.datapoint // return data looks like this: 4469.37,2455153.58,672038.48,83.27,58821.22,36606.71
          backgroundColor: [
            "#F7464A",
            "#46BFBD",
            "#FDB45C",
            "#949FB1",
            "#4D5360",
            "#60A2C9",
            "#00A65A",
            "#D2D6DE",
            "#4D5360",
            "#00C0EF"
          backgroundColor: [
            "#F7464A",
            "#46BFBD",
            "#FDB45C",
            "#949FB1",
            "#4D5360",
            "#60A2C9",
            "#00A65A",
            "#D2D6DE",
            "#4D5360",
            "#00C0EF"
          ],
          label: 'Dataset 1'
        }],
        labels: rData.labels //return data looks like this: 'CBS','CFM','CIA','Millennium','OTHER','Thrifty'
      },
      options: {
        responsive: true,
        legend: {
          position: 'right',
        },
        title: {
          display: false,
          text: 'Chart.js Doughnut Chart'
        },
        animation: {
          animateScale: true,
          animateRotate: true
        }
      }
    };  

    var ctx = document.getElementById("myPieChart").getContext("2d");    
    myDoughnut = new Chart(ctx, locData);

  }
});

This was my latest failed attempt. Thank in advance for your help!

Brett Jeffreson Brett Jeffreson · Accepted Answer · 2016-11-01T02:29:44

Keno's answer is accurate, I'll expand upon it a bit here:

You already have a chart object called myDoughnut here, and like any javascript object, you can access any of it's members, similar to a class in a traditional oop language.

In your case, after creating locData, you should be able to use:

myDoughnut.data = locData;
myDoughnut.update();

Instead of creating a new chart, you're just replacing the data in the existing chart with new data. You have to call update() in order for the changes to occur.

Hopefully this solves your issue.

chart.js 2.3 dynamicually load pie chart data

2 Answers