CODEWITHSUNDEEP
javascriptjqueryjsonchartshighcharts
SECAD000
SECAD000

Reputation: 11

Auto-refresh Json data in Highcharts

I've been working this for past 4 days but still can figure out how to solve this issue:

  1. The data in the database changes every 5 minutes.
  2. I want to display the data in a new chart without refreshing the whole page.

CODE:

$(function () {
    $(document).ready(function() {
        $.getJSON("test2.php", function(json) {
            Highcharts.setOptions({
                global: {
                    useUTC: false
                }
            });

            $('#container').highcharts({
                renderTo: 'container',
                defaultSeriesType: 'spline',
                chart: {
                    type: 'area',
                },
                title: {
                    text: 'Transaction Count'
                },
                subtitle: {
                    text: '5 Minutes Count'
                },
                exporting: { 
                    enabled: false 
                },
                xAxis: {
                    categories:json,
                    title:{
                        text: 'Time Of The Day',
                        style: {
                            color: '#666666',
                                fontSize: '12px',
                                fontWeight: 'normal'
                            }
                        },
                        tickInterval: 4,
                        type: 'datetime',
                        labels: {
                            style: {
                                fontFamily: 'Tahoma'
                            },
                        }
                    },
                    yAxis: {
                        title: {
                            text: 'Number Of Transaction'
                        },
                        labels: {
                            formatter: function () {
                                return this.value;
                            }
                        }
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.y:,.0f}</b>'
                    },
                    plotOptions: {
                        column: {colorByPoint: true},
                        area: {
                            marker: {
                            enabled: false,
                            symbol: 'circle',
                            radius: 5,
                            states: {
                                hover: {
                                    enabled: true
                                }
                            }
                        }
                    }
                },
                colors: [
                    'green',  //Buy
                    '#4572A7' //Paid
                ],
                series: json
            });
        });
    });
});

Upvotes: 1

Views: 4043

Answers (2)

John Slegers
John Slegers

Reputation: 47091

You can change the dataset, like this :

$('#container').highcharts().series[0].setData([129.2,144.0,...], false);

You can redraw, like this :

$('#container').highcharts().redraw();

So, what you need to do, is create a function that (1) first gets the data from the server, (2) then updates the data and (3) then redraws, like this :

var updateChart = function() {
    $.getJSON('test2.json', function(data) {
        var chart = $('#container').highcharts();
        $.each(data, function(pos, serie) {
            chart.series[pos].setData(serie, false);
        });
        chart.redraw();
    });
}

To repeat this every 5 minutes, you can use setInterval, like this :

setInterval(function() {
    $.getJSON('test2.json', function(data) {
        var chart = $('#container').highcharts();
        $.each(data, function(pos, serie) {
            chart.series[pos].setData(serie, false);
        });
        chart.redraw();
    });
}, 300000);

Upvotes: 5

Gilbert Adjin Frimpong
Gilbert Adjin Frimpong

Reputation: 54

Instead of putting your Highchart script in the document.ready function, you can create a funcion getHighchart and put the code about into it. and depend on how many seconds you want the code to readload as below, but you have to be referencing the jquery js.

$(function () {
    setInterval(getHighChart, 30000); //30 seconds onload="getHighChart()" 
});

function getHighChart() {
    //to containe you script for loading the chart
}

Upvotes: 1

Related Questions