CODEWITHSUNDEEP
javascriptanimationhighcharts
Aldibe
Aldibe

Reputation: 1347

Highchart column animation when adding new column

I'm trying to make a simple bar chart that updates every 5 seconds using highchart. Below is my code: 

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
                <script src="https://code.highcharts.com/highcharts.js"></script>
                <script src="https://code.highcharts.com/modules/exporting.js"></script>
                <script src="underscore-min.js"></script>
    </head>
    <body>
        <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    </body>
        <script>

                Highcharts.chart('container', {
                        chart: {
                                type: 'column'
                        },
                        title: {
                                text: 'Activity Count per Model'
                        },
                        xAxis: {
                                categories: [],
                                crosshair: true,
                                title: {
                                        text: 'Model'
                                }
                        },
                        yAxis: {
                                min: 0,
                                title: {
                                        text: 'Activity Count'
                                }
                        },
                        plotOptions: {
                                column: {
                                        animation: true,
                                        pointPadding: 0.2,
                                        borderWidth: 0
                                }
                        },
                        series: [{
                                name: 'Count',
                                data: []

                        }]
                });

                setInterval(function(){
                        $.getJSON("http://localhost/getdata.php", function(data){
                                $('#container').highcharts().series[0].setData(data.value,true);
                                $('#container').highcharts().xAxis[0].setCategories(data.model);
                        });
                }, 5000);

        </script>
</html>

The data returned from JSON call:

{"model":["a","aa","aaa","aaaa","aab","b","c","d","e"],"value":[40,20,70,40,70,20,30,40,50]}

Right now functionally the code works fine (chart shows up with the data updated every 5 second). The problem is that if the chart updates with new column, there's no animation on it. But if the existing data is updated without adding new column, there's animation in it (column growing up / shrinking, other column adjust if axis change). How do I enable the animation when new column is inserted into the chart?

Upvotes: 1

Views: 548

Answers (1)

morganfree
morganfree

Reputation: 12472

In that case there are different possibilities how the chart should be animated. So you should consider what animation you'd want to.

From setData() docs:

When the updated data is the same length as the existing data, points will be updated by default, and animation visualizes how the points are changed.

IN your case you can split your data in two parts - the new point and the rest data. The rest data can be set with setData() - and you will preserve the animation because the old and new data have same length. And the point can be added with animation via addPoint().

$('#button').click(function () {
  const data = new Array(12).fill(2)
  chart.xAxis[0].setCategories(categories.concat('13'), false);
  chart.series[0].setData(data);
  chart.series[0].addPoint(40, true, false, true);
});

example: http://jsfiddle.net/Lqy2e42h/

Upvotes: 0

Related Questions