dynamic highcharts with json data

Question

I m trying to figure it out that is it possible to make the json data fetched dynamically from a database with the help of php and mysql and can be plotted with highcharts that too dynamic auto updating? Any help would be appreciated.

following the code i have tried and is not working properly and want to implement to the the website for 10 lines.

    <HTML>
<HEAD>
<TITLE>highchart example</TITLE>
<script type="text/javascript"src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">




var chart;

 function requestData() {
    $.ajax({
        url: 'live-server-data.php',
        success: function(point) {
            var series = chart.series[0],
                shift = series.data.length > 20; // shift if the series is 
                                                 // longer than 2
            // add the point
            chart.series[0].addPoint(point, true, shift);

            // call it again after one second
            setTimeout(requestData1, 1000);    
        },
        cache: false,

    });

}

 function requestData1() {
    $.ajax({
        url: 'live-server-data.php',
        success: function(point) {
            var series2 = chart.series[1],
                shift = series2.data.length > 20; // shift if the series is 
                                                 // longer than 20

            // add the point
            chart.series[1].addPoint(point, true, shift);

            // call it again after one second
            setTimeout(requestData, 1000);    
        },
        cache: false,

    });
}


$(function () {
    $(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'spline',
            events: {
                load: requestData               
            }
        },
        title: {
            text: 'Live random data'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150,
            maxZoom: 20 * 1000
        },
        yAxis:

        {
        minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: '',
                margin: 80
            }
        },

        series: [
        {
            name: 'Random data',
            data: []
        },
        {
            name: ' hahaha',
            data: []
            }
        ],
    });        
});
});
</script>
</HEAD>
<BODY>
    <div id="container"
        style="min-width: 728px; height: 400px; margin: 0 auto"></div>
</BODY>
</HTML>



         *** the live-server-data.php is as followed:
    <?php
// Set the JSON header
header("Content-type: text/json");

// The x value is the current JavaScript time, which is the Unix time multiplied 
// by 1000.
$x = time() * 1000;
// The y value is a random number
$y = rand(48,52);
// Create a PHP array and echo it as JSON
$ret = array($x, $y);
echo json_encode($ret);
?>

Answer 1

You can try with

var options = {
        chart: {
            renderTo: 'chart',
        },
        credits: {
            enabled: false
        },
        title: {
            text: 'Impression/Click Overview',
            x: -20
        },
        xAxis: {
            categories: [{}]
        },
        tooltip: {
            formatter: function() {
                var s = '<b>'+ this.x +'</b>';

                $.each(this.points, function(i, point) {
                    s += '<br/>'+point.series.name+': '+point.y;
                });

                return s;
            },
            shared: true
        },
        series: [{},{}]
    };

    $.ajax({
        url: "json.php",
        data: 'show=impression',
        type:'post',
        dataType: "json",
        success: function(data){
            options.xAxis.categories = data.categories;
            options.series[0].name = 'Impression';
            options.series[0].data = data.impression;
            options.series[1].name = 'Click';
            options.series[1].data = data.clicks;
            var chart = new Highcharts.Chart(options);          
        }
    });

Answer 2

The highcharts website has some useful articles about working with dynamic data. That is probably the best place to start.

http://www.highcharts.com/docs/working-with-data/preprocessing-live-data

http://www.highcharts.com/docs/working-with-data/preprocessing-data-from-a-database

Try something out, and if you have trouble, come back here with a more specific question showing what you have tried. As it stands, your question is too broad, and will probably get closed.

An ajax request for updating data looks something like:

function requestData() {
$.ajax({
    url: 'live-server-data.php',
    success: function(point) {
        var series = chart.series[0],
            shift = series.data.length > 20; // shift if the series is                                                  // longer than 20
        // add the point
        chart.series[0].addPoint(point, true, shift);

        // call it again after one second
        setTimeout(requestData, 1000);    
    },
    cache: false
});

}

dynamic highcharts with json data

Question

2 answers

solution1
2 2014-07-14 12:24:29

solution2
0 2014-06-27 08:59:41

dynamic highcharts with json data

Question

2 answers

solution1 2 2014-07-14 12:24:29

solution2 0 2014-06-27 08:59:41

solution1
2 2014-07-14 12:24:29

solution2
0 2014-06-27 08:59:41