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
            });
        });
    });
});

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
            });
        });
    });
});

• javascript
• jquery
• json
• charts
• highcharts

Share Improve this question Follow edited Apr 11, 2022 at 22:15 John Slegers 47.2k2323 gold badges204204 silver badges173173 bronze badges asked Feb 12, 2016 at 10:33 SECAD000SECAD000 1111 silver badge22 bronze badges 2

• I don't see where you refresh the data. Can you provide more info on your question? – otaviofcs Commented Feb 12, 2016 at 10:40
• I used json to fetch the data in database. My problem is the data update every seconds..I want to display the updated data in highchart without reloading the page – SECAD000 Commented Feb 17, 2016 at 4:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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);

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
}