Chartjs-How to update with animation a Pie Chart?

by

0👍

✅

you need to add Chart.js Version: 1.0.2 form Here than it will work.

Html Code:

<canvas id="pieChart" style="height: 325px; width: 550px !important; margin-left:17%; margin-top:3%;"></canvas>

JQuery Code:

 var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
 var pieChart = new Chart(pieChartCanvas);
 var PieData = [ {
         value: '7',
         color: "#F56954",
         highlight: "#F56954",
         label: "abc"
     },
           {
               value: '5',
               color: "#605CA8",
               highlight: "#605CA8",
               label: "xyz"
           },
            {
                value: '9',
                color: "#37495F",
                highlight: "#37495F",
                label: "asdf"
            },
             {
                 value: '4',
                 color: "#2B908F",
                 highlight: "#2B908F",
                 label: "lkh"
             }];
 var pieOptions = {
            //Boolean - Whether we should show a stroke on each segment
            segmentShowStroke: true,
            //String - The colour of each segment stroke
            segmentStrokeColor: "#fff",
            //Number - The width of each segment stroke
            segmentStrokeWidth: 2,
            //Number - The percentage of the chart that we cut out of the middle
            percentageInnerCutout: 50, // This is 0 for Pie charts
            //Number - Amount of animation steps
            animationSteps: 100,
            //String - Animation easing effect
            animationEasing: "easeOutBounce",
            //Boolean - Whether we animate the rotation of the Doughnut
            animateRotate: true,
            //Boolean - Whether we animate scaling the Doughnut from the centre
            animateScale: false,
            //Boolean - whether to make the chart responsive to window resizing
            responsive: true,
            // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
            maintainAspectRatio: true,
            //String - A legend template
            legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
        };
        //Create pie or douhnut chart
        // You can switch between pie and douhnut using the method below.
        pieChart.Doughnut(PieData, pieOptions);

hope helps.

0👍

I found the problem with the latest version of Chart.js.

If you want to update your chart with animation, its not enough to add the data and to update them as i it shown above in my code, you must add the addEventListener first then again to create a new Chart by which the effect happens :

document.getElementById('update-statistic').addEventListener('click', function() {
    all_brnoi_line.data.datasets.forEach(function(dataset) {
        dataset.data = dataset.data.map(function() {
            return randomScalingFactor();
        });
    });
    var ctx = document.getElementById("chart-area-1").getContext("2d");
    var pieChart = new Chart(ctx, all_brnoi_line);
    var PieData = [{
        labels: MONTHS,
        datasets: [{
            label: "Эффективные - брони",
            data: [
                randomScalingFactor(), 
                randomScalingFactor(), 
                randomScalingFactor(),
                randomScalingFactor(), 
                randomScalingFactor(), 
                randomScalingFactor(), 
                randomScalingFactor()
            ],
            backgroundColor: window.chartColors.red,
            borderColor: window.chartColors.red,
            fill: false,
            borderDash: [5, 5],
            pointRadius: 15,
            pointHoverRadius: 10,
        }, {
            label: "Неэффективные - брони",
            data: [
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor()
            ],
            backgroundColor: window.chartColors.blue,
            borderColor: window.chartColors.blue,
            fill: false,
            borderDash: [5, 5],
            pointRadius: [2, 4, 6, 18, 0, 12, 20],
        }, {
            label: "Спорные - брони",
            data: [
                randomScalingFactor(), 
                randomScalingFactor(), 
                randomScalingFactor(), 
                randomScalingFactor(), 
                randomScalingFactor(), 
                randomScalingFactor(), 
                randomScalingFactor()
            ],
            backgroundColor: window.chartColors.purple,
            borderColor: window.chartColors.purple,
            fill: false,
            pointHoverRadius: 20,
            borderDash: [5, 5],
            pointRadius: [2, 4, 6, 18, 0, 12, 20],
        }, {
            label: "Отменённые - брони",
            data: [
                randomScalingFactor(), 
                randomScalingFactor(), 
                randomScalingFactor(), 
                randomScalingFactor(), 
                randomScalingFactor(), 
                randomScalingFactor(), 
                randomScalingFactor()
            ],
            backgroundColor: window.chartColors.yellow,
            borderColor: window.chartColors.yellow,
            fill: false,
            pointHitRadius: 10,
            borderDash: [5, 5],
            pointRadius: [2, 4, 6, 18, 0, 12, 20],
        }]
    }

    ];
    window.myPie.update();
});

Leave a comment