Update Chart Pie in Real Time


Topic: Update Chart Pie in Real Time

Flavien Satiat pro asked 8 years ago

Hi, How can I update charts pie in real time ? I try to modify attribute "data-percent" and reInit him but it's doesn't work. I do refresh my page for update pie chart :( Any function for this ? And how use this ? Best regards,
Hello Flavien Satiat, You can set time interval on updated chart. It can be done same as on example which I found on stackoverflow: HTML: <canvas id="myChart"></canvas> JS:

$(document).ready(function(){
  var count = 10;
  var data = {
      labels : ["1","2","3","4","5", "6", "7", "8", "9", "10"],
        datasets : [
          {
                fillColor : "rgba(220,220,220,0.5)",
                strokeColor : "rgba(220,220,220,1)",
                pointColor : "rgba(220,220,220,1)",
                pointStrokeColor : "#fff",
                data : [65,59,90,81,56,45,30,20,3,37]
            },
            {
                fillColor : "rgba(151,187,205,0.5)",
                strokeColor : "rgba(151,187,205,1)",
                pointColor : "rgba(151,187,205,1)",
                pointStrokeColor : "#fff",
                data : [28,48,40,19,96,87,66,97,92,85]
            }
        ]
  }
  // this is ugly, don't judge me
  var updateData = function(oldData){
    var labels = oldData["labels"];
    var dataSetA = oldData["datasets"][0]["data"];
    var dataSetB = oldData["datasets"][1]["data"];

    labels.shift();
    count++;
    labels.push(count.toString());
    var newDataA = dataSetA[9] + (20 - Math.floor(Math.random() * (41)));
    var newDataB = dataSetB[9] + (20 - Math.floor(Math.random() * (41)));
    dataSetA.push(newDataA);
    dataSetB.push(newDataB);
    dataSetA.shift();
    dataSetB.shift();    };

  var optionsAnimation = {
    //Boolean - If we want to override with a hard coded scale
    scaleOverride : true,
    //** Required if scaleOverride is true **
    //Number - The number of steps in a hard coded scale
    scaleSteps : 10,
    //Number - The value jump in the hard coded scale
    scaleStepWidth : 10,
    //Number - The scale starting value
    scaleStartValue : 0
  }

  // Not sure why the scaleOverride isn't working...
  var optionsNoAnimation = {
    animation : false,
    //Boolean - If we want to override with a hard coded scale
    scaleOverride : true,
    //** Required if scaleOverride is true **
    //Number - The number of steps in a hard coded scale
    scaleSteps : 20,
    //Number - The value jump in the hard coded scale
    scaleStepWidth : 10,
    //Number - The scale starting value
    scaleStartValue : 0
  }

  //Get the context of the canvas element we want to select
  var ctx = document.getElementById("myChart").getContext("2d");
  var optionsNoAnimation = {animation : false}
  var myNewChart = new Chart(ctx);
  myNewChart.Line(data, optionsAnimation);  

  setInterval(function(){
    updateData(data);
    myNewChart.Line(data, optionsNoAnimation)
    ;}, 2000
  );
});
Regards, Adrian

Flavien Satiat pro answered 8 years ago

Hello, thank's for your response but i would like update ChartPie. Not line or other. it's not the same init .. For chart Pie : $('.min-chart#chart-pompe').easyPieChart({ barColor: "#0000FF", onStep: function (from, to, percent) { $(this.el).find('.percent').text(Math.round(percent)); } }); Best regards, Flavien
Hello Sorry, my bad. If you want to update your pie chart you can remove your canvas and append a new one with new data. example: HTML
<div id="graph-container">
    <canvas id="myChart"></canvas>
</div>
<button id="update">chart update </button>
javaScript

$(function() {

    var data = [{
        value: 300,
        color: "#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    }, {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
    }, {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow"
    }]

    var option = {
        animation: true,
        animationSteps: 30,
        animationEasing: "linear",
        responsive: true,
    };

    var ctx = document.getElementById("myChart").getContext('2d');

    var myPieChart = new Chart(ctx).Pie(data, option);

    $("#update").on('click', function(myPieChart) {

        $('#myChart').remove(); // this is my <canvas> element
        $('#graph-container').append('<canvas id="myChart"><canvas>');

        var ctx = document.getElementById("myChart").getContext('2d');
        for (var i = 0; i < data.length; i++) {
            data[i].value += 20;
        }
        
        var myPieChart = new Chart(ctx).Pie(data, option);

    });
});
Regards, Adrian

Flavien Satiat pro answered 8 years ago

Hi, thank you for your help. I just found how update chartPie : pourcent ----> new value for charPie $('#chart').data('easyPieChart').update(pourcent); Best regards,
I'm happy that you found the best answer for your needs. Regards, Adrian

prasadgk answered 6 years ago

how to update charts with dropdown selection

Piotr Glejzer staff commented 6 years ago

Hi, What exactly do you want? Best, Piotr

prasadgk answered 6 years ago

how to update charts with dropdown selection
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags