Getting dynamic values from database for dynamic chart plotting

Question

I want to retrieve values dynamically from the database and plot using Highcharts spline graph. The problem is I cant figure out a way to pass the values to Javascript function without refreshing the whole function, this will plot the whole graph from the scratch. The current code contains an array where it just plots using an array and a random function to generate new values. I want to find a way to insert new values on to that array from the database using PHP. Problem is I don't know how to keep on calling the database query without affecting the graph. Some help on plotting the graph dynamically using the dynamic values from the database would be helpful.

$(function () {
    $(document).ready(function() {
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });

        var chart;
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'spline',
                marginRight: 10,
                events: {
                    load: function() {

                        // set up the updating of the chart each second
                        var series = this.series[0];
                        setInterval(function() {
                            var x = (new Date()).getTime(), // current time
                                y = Math.random();
                            series.addPoint([x, y], true, true);
                        }, 1000);
                    }
                }
            },
            title: {
                text: 'Trend analysis'
            },
            xAxis: {
                labels: {
                rotation: 320

            },
                type: 'datetime',
                tickPixelInterval: 150
            },
            yAxis: {
                title: {
                    text: 'Value'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            credits:{
                enabled:false
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
                        Highcharts.numberFormat(this.y, 2);
                }
            },
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [{
                name: 'Random data',
                data: (function() {
                    // generate an array of random data
                    var data = [],
                        time = (new Date()).getTime(),
                        i;

                    for (i = -19; i <= 0; i++) {
                        data.push({
                            x: time + i * 1000,
                            y: Math.random()
                        });
                    }
                    return data;
                })()
            }]
        });
    });

});

SteveP · Accepted Answer · 2013-03-19 09:07:31Z

2

The technique you are looking for is called ajax. This is where the javascript requests more data from the server without the whole page loading. The basic approach is:

The page is loaded and renders the initial chart.
The page then requests additional data fromthe user. In jquery, this is done using a call to$.ajax
The server responds with some more data.
The javascript loads this data into the chart using chart.series.addpoint or chart.series.setData.
Steps 2 to 5 are then repeated at regular intervals.

Highcharts has good article on this here: http://docs.highcharts.com/#preprocessing-live-data with some example code. You will need to amend the php to read the data from your database, and you may want to change the shift logic in the javascript depending on whether you want old points to drop off, or stay on the chart.

If you series isn't too big, it's not unreasonable to return the whole data set each time and use chart.series.setData to replace the entire series, instead of doing it point by point. The API calls you need are documented here: http://api.highcharts.com/highcharts#Series

answered Mar 19, 2013 at 9:07

SteveP

19.2k9 gold badges49 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SPandya Over a year ago

Can you direct me to any example for asp.net? As the one you have mentioned for PHP

SteveP Over a year ago

Sorry, i'm not familiar witj asp.net.

Collectives™ on Stack Overflow

Getting dynamic values from database for dynamic chart plotting

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related