Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
663 views
in Technique[技术] by (71.8m points)

javascript - dynamic highcharts with json data

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);
?>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

1.4m articles

1.4m replys

5 comments

56.8k users

...