How to update the Pie chart in ChartNew.js?

Question

Hi I am using chartnewjs. I want to update the pie chart with animation. I am using line chart with live update. The updateChart(ctx,data,config,true,true) method is working fine. I have tried the same for pie chart but the chart is not getting updating.

Then I tried like every refresh creating new Chart(document.getElementById("peak_session").getContext("2d")).Pie(data,options) it is working fine and pie chart animation also gets working, I am removing the canvas from the DOM and recreating but the browser memory keep on increasing.

Then I tried like creating var ctx1 = new Chart(document.getElementById("peak_session").getContext("2d")); var ctx2 = new Chart(document.getElementById("current_session").getContext("2d")); globally. Then updating the context (ctx1, ctx2) in every refresh like ctx1.Pie(peak_data,options); ctx2.Pie(session_data,options); Its working fine but the chart is not animating.There is no visual display when the chart having same values. Could you please any one help to update the pie chart with animation and without memory leak?

score 0 · Answer 1 · answered Apr 07 '16 at 14:19

I'm able to update pie charts just fine. Perhaps try to only save your instances of the contexts.

Save your contexts to variables like so:

var ctx1 = document.getElementById('peak-session').getContext('2d');
var ctx2 = document.getElementById('current-session').getContext('2d');

Create your charts...

new Chart(ctx1).Pie(peak_data, options);
new Chart(ctx2).Pie(session_data, options);

Now you can use the ChartNew's updateChart function:

updateChart(ctx1, peak_data, options, true)
updateChart(ctx2, peak_data, options, true)

score 0 · Answer 2 · answered May 04 '16 at 19:29

There seems to be a pretty closely related example in the GitHub ChartNew.js file folder.

It looks like the provided example with a updating Pie chart in the ChartNew.Js library files shows that they are updating the data array then calling the updateChart function. I am not entirely sure what you are doing differently, but you should be able to copy the following example into a new Html file using notepad or whatever you prefer, save it, then open it to see how the update function should work.

<!doctype html>

<!--[if lte IE 8]><SCRIPT src='source/excanvas.js'></script><![endif]--><SCRIPT src='../ChartNew.js'></script>

<SCRIPT>

function setColor(area,data,config,i,j,animPct,value)
{
  if(value > 35)return("rgba(220,0,0,"+animPct);
  else return("rgba(0,220,0,"+animPct);

}

var charJSPersonnalDefaultOptions = { decimalSeparator : "," , thousandSeparator : ".", roundNumber : "none", graphTitleFontSize: 2 };

defCanvasWidth=600;
defCanvasHeight=300;

var mydata = [
    {
        value : 30,
        color: "#D97041",
        title : "data1",
    },
    {
        value : 90,
        color: "#C7604C",
        title : "data2"
    },
    {
        value : 24,
        color: "#21323D",
        title : "data3"
    },
    {
        value : 58,
        color: "#9D9B7F",
        title : "data4"
    },
    {
        value : 82,
        color: "#7D4F6D",
        title : "data5"
    },
    {
        value : 8,
        color: "#584A5E",
        title : "data6"
    }
]


var opt = {
      animation : true,
      canvasBorders : true,

      canvasBordersWidth : 3,
      canvasBordersColor : "black",
      graphTitle : "animation With Update",
      inGraphDataShow : true,
      inGraphDataTmpl: "<%=v2%>",
      onAnimationComplete : startUpdate,
      graphTitleFontSize: 18
};


function startUpdate(ctx, config, data, tp, count) {
console.log("onAnimationComplete Function executed");
};


function updt(ctx,data,config) {
    updtData(data);
    updateChart(ctx,data,config,true,true);
    setTimeout(function (){updt(ctx,data,config);}, 5000);
}

function updtData(data) {
    var i;
    for(i=0;i<data.length-1;i++) data[i].value=data[i+1].value;
    data[data.length-1].value=Math.floor(Math.random()*50);
}


</SCRIPT>


<html>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <head>
        <title>Demo ChartNew.js</title>
    </head>
    <body>

  <center>
    <FONT SIZE=6><B>Demo of ChartNew.js !</B></FONT>    <BR>

    <script>

    document.write("<canvas id=\"canvas_Pie\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
window.onload = function() {
    var myLine = new Chart(document.getElementById("canvas_Pie").getContext("2d")).Pie(mydata,opt);
    setTimeout(function (){updt(document.getElementById("canvas_Pie").getContext("2d"),mydata,opt);}, 5000);

 }
    </script>
  </body>
</html>

This example updates the chart with new random data every few seconds. Pretty much all of the update logic seems to be in the function:

function updt(ctx,data,config) {
        updtData(data);
        updateChart(ctx,data,config,true,true);
        setTimeout(function (){updt(ctx,data,config);}, 5000);
    }

I'm not sure if this helps at all, but you can look at some other examples at :https://github.com/FVANCOP/ChartNew.js/.

How to update the Pie chart in ChartNew.js?

2 Answers2