jQueryハイチャートプラグインでのJSONデータの使用

Question

<script type="text/javascript"> 
    var chart; 
    $(document).ready(function() { 
     // Define the options 
     var options = { 
      chart: { 
       renderTo: 'container' 
      }, 

      title: { 
       text: 'Daily visits at www.highcharts.com' 
      }, 

      subtitle: { 
       text: 'Source: Google Analytics' 
      }, 

      xAxis: { 
       type: 'datetime', 
       tickInterval: 7 * 24 * 3600 * 1000, // One week 
       tickWidth: 0, 
       gridLineWidth: 1, 
       labels: { 
        align: 'left', 
        x: 3, 
        y: -3 
       } 
      }, 

      yAxis: [{ // Left Y axis 
       title: { 
        text: null 
       }, 
       labels: { 
        align: 'left', 
        x: 3, 
        y: 16, 
        formatter: function() { 
         return Highcharts.numberFormat(this.value, 0); 
        } 
       }, 
       showFirstLabel: false 
      }, { // right y axis 
       linkedTo: 0, 
       gridLineWidth: 0, 
       opposite: true, 
       title: { 
        text: null 
       }, 
       labels: { 
        align: 'right', 
        x: -3, 
        y: 16, 
        formatter: function() { 
         return Highcharts.numberFormat(this.value, 0); 
        } 
       }, 
       showFirstLabel: false 
      }], 

      legend: { 
       align: 'left', 
       verticalAlign: 'top', 
       y: 20, 
       floating: true, 
       borderWidth: 0 
      }, 

      tooltip: { 
       shared: true, 
       crosshairs: true 
      }, 

      plotOptions: { 
       series: { 
        cursor: 'pointer', 
        point: { 
         events: { 
          click: function() { 
           hs.htmlExpand(null, { 
            pageOrigin: { 
             x: this.pageX, 
             y: this.pageY 
            }, 
            headingText: this.series.name, 
            maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+ 
             this.y +' visits', 
            width: 200 
           }); 
          } 
         } 
        }, 
        marker: { 
         lineWidth: 1 
        } 
       } 
      }, 

      series: [{ 
       name: 'All visits', 
       lineWidth: 4, 
       marker: { 
        radius: 4 
       } 
      }, { 
       name: 'New visitors' 
      }] 
     } 

     // Load data asynchronously using jQuery. On success, add the data 
     // to the options and initiate the chart. 
     // This data is obtained by exporting a GA custom report to TSV. 
     // http://api.jquery.com/jQuery.get/ 
     jQuery.get('analytics.tsv', null, function(tsv) { 
      var lines = [], 
       listen = false, 
       date, 

       // Set up the two data series. 
       allVisits = [], 
       newVisitors = []; 

      try { 
      // Split the data return into lines and parse them. 
      tsv = tsv.split(/\n/g); 
      jQuery.each(tsv, function(i, line) { 
       // Listen for data lines between the Graph and Table headers. 
       if (tsv[i - 3] == '# Graph') { 
        listen = true; 
       } else if (line == '' || line.charAt(0) == '#') { 
        listen = false; 
       } 

       // All data lines start with a double quote. 
       if (listen) { 
        line = line.split(/\t/); 
        date = Date.parse(line[0] +' UTC'); 

        allVisits.push([ 
         date, 
         parseInt(line[1].replace(',', ''), 10) 
        ]); 
        newVisitors.push([ 
         date, 
         parseInt(line[2].replace(',', ''), 10) 
        ]); 
       } 
      }); 
      } catch (e) { alert(e.message) } 
      options.series[0].data = allVisits; 
      options.series[1].data = newVisitors; 

      chart = new Highcharts.Chart(options); 
     }); 
    }); 
</script> 

上記はjQueryプラグインのハイライトチャートのコード例です。私は、JSON文字列が：{ name: 'allVisits', data: [1, 0, 4] }, { name: 'newVisits', data: [5, 7, 3] }の場合、JSONファイルからデータを取得しようとしています。

サンプルファイルが 'tsv'ファイルからデータを取得しているため、代わりにJSONファイルからデータを取得しようとしています。

Answer 1

短いJSONの例では、invalidと言います。

{ name: 'allVisits', data: [1, 0, 4] }, { name: 'newVisits', data: [5, 7, 3] } 

は次のようになります。

[{"name":"allVisits", "data": [1, 0, 4] }, {"name": "newVisits", "data": [5, 7, 3] }] 

私が正しくリコール場合は、jQueryのは、いくつかのJSONの検証を行います。

ファイルが有効なJSONである場合は、jQuery.getの代わりにjQuery.getJSONを使用できます。

jQuery.getJSON('file.json' , function(data){ 

    alert(data[0].name); 
    // do your thang with data 

}); 

JSONLint