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
226 views
in Technique[技术] by (71.8m points)

javascript - Retrieving JSON data for Highcharts with multiple series?

I've been looking through tons of examples but I can't seem to get my code to pull out the data. The chart is blank.

I have a php file that gives the following: (date, value1, value2)

[
["2013-09-15 08:44:37",19.8,8.19],
["2013-09-15 08:47:37",18.4,7.81],
["2013-09-15 08:50:37",18.3,7.78],
["2013-09-15 08:53:37",18.1,7.77]
]

I then have the following code:

<!DOCTYPE html>
<head>
  <script src="js/jquery-1.10.2.min.js"></script>
  <script src="js/highcharts.js" type="text/javascript"></script>
  <script>
  var chart;
  $(document).ready(function() {
     var options = {
        chart: {
           renderTo: 'container',
           type: 'line',
        },
        title: {
        },
        xAxis: {
           type: 'datetime'
        },
        yAxis: {
        },
        series: [{
           name: 'val1',
           data: []
       }, {
           name: 'val2',
           data: []
        }]
     };
     $.getJSON('data_day.php', function(json) {
        val1 = [];
        val2 = [];
        $.each(json, function(key,value) {
        val1.push([value.time, value.val1]);
        val2.push([value.time, value.val2]);
        });

        options.series[0].data = val1;
        options.series[1].data = val2;
        chart = new Highcharts.Chart(options);
     });
  });
  </script>
</head>
<html>

I'm trying to use firebug to see where I've gone wrong. If I put

console.log(key,value) 

under the $.each I can see the data:

0 ["2013-09-15 08:50:37", 18.3, 7.78]
1 ["2013-09-15 08:53:37", 18.1, 7.77]
2 ["2013-09-15 08:56:37", 18.2, 7.8]

Is there a problem with the

val1.push([value.time, value.val1]);

or

options.series[0].data = val1;

Update: Changed it to this and its now working.

val1.push([value[0], value[1]]);
val2.push([value[0], value[2]]);
See Question&Answers more detail:os

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

1 Reply

0 votes
by (71.8m points)

As per Pal's comment - changed it to this:

val1.push([value[0], value[1]]);
val2.push([value[0], value[2]]);

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

...