2012-10-23 58 views
4

我想從一個COSM feed中獲取一些JSON格式的數據到一個簡單的圖表中,但是在這樣做時遇到了麻煩。我不知道如果我誤解了系列陣列是如何工作的(即使審查documentation就可以了。Highcharts爲什麼不接受來自我的JSON的UTC值?

這是我的代碼與它的實驗(我最終想要得到的JSON數據通過循環流在,但現在我只是手動試圖把第二個數據點)

$(document).ready(function(){ 
      var options = { 
        chart: { 
         renderTo: 'container', 
         type: 'line', 
         marginRight: 130, 
         marginBottom: 25 
        }, 
        title: { 
         text: 'Temperature', 
         x: -20 //center 
        }, 
        xAxis: { 
         //type: 'datetime', 
        }, 
        yAxis: { 
         title: { 
          text: 'Temperature (°C)' 
         }, 
         plotLines: [{ 
          value: 0, 
          width: 1, 
          color: '#808080' 
         }] 
        }, 
        tooltip: { 
         formatter: function() { 
           return '<b>'+ this.series.name +'</b><br/>'+ 
           this.x +': '+ this.y +'°C'; 
         } 
        }, 
        legend: { 
         layout: 'vertical', 
         align: 'right', 
         verticalAlign: 'top', 
         x: -10, 
         y: 100, 
         borderWidth: 0 
        }, 
        exporting: { 
         enabled: false 
        }, 
        series: [{"name":"Temperature", "data":[]}] 
      }; 
      $.getJSON('http://api.cosm.com/v2/feeds/79903.json?key=dNSiSvXZtR6QBUqbzll4CCgnngGSAKxIQVFSeXBneGpqWT0g', function(data) 
      { 
       var xval = data.datastreams[7].at; 
       var yval = parseFloat(data.datastreams[7].current_value); 
       alert(xval); 
       alert(yval); 
       var pointChart = new Array(xval, yval); 
       options.series[0].data.push(pointChart); 
       xval = data.datastreams[2].at; 
       yval = parseFloat(data.datastreams[2].current_value); 
       pointChart = [xval, yval]; 
       options.series[0].data.push(pointChart); 
       //options.series[0].data.push(data.datastreams[7].at, 25); 
       alert(options.series[0].data[0]); 
       alert(options.series[0].data[1]); 
      }); 
      var chart = new Highcharts.Chart(options); 
     }); 

JSON看起來是這樣的:

{ 
    "version" : "1.0.0", 
    "created" : "2012-10-12T05:01:53.231981Z", 
    "status" : "live", 
    "location" : { 
    }, 
    "datastreams" : [{ 
     "max_value" : "100.0", 
     "min_value" : "0.0", 
     "at" : "2012-10-22T01:28:12.610947Z", 
     "id" : "Battery_Level", 
     "current_value" : "88" 
     }, { 
     "max_value" : "30431.0", 
     "min_value" : "-26691.0", 
     "at" : "2012-10-22T01:22:32.905001Z", 
     "id" : "Heading", 
     "current_value" : "95" 
     }, { 
     "max_value" : "64.9304", 
     "min_value" : "21.6153", 
     "at" : "2012-10-22T01:30:52.656318Z", 
     "unit" : { 
      "symbol" : "%" 
     }, 
     "id" : "Humidity", 
     "current_value" : "55.7556" 
     }, { 
     "max_value" : "32684.0", 
     "min_value" : "0.0", 
     "at" : "2012-10-22T01:30:52.656318Z", 
     "id" : "Light_Level", 
     "current_value" : "37" 
     }, { 
     "max_value" : "649994.0", 
     "min_value" : "-139994.0", 
     "at" : "2012-10-18T06:47:56.226880Z", 
     "unit" : { 
      "symbol" : "µT" 
     }, 
     "id" : "Magnetic_X", 
     "current_value" : "-24.90" 
     }, { 
     "max_value" : "99997.0", 
     "min_value" : "-9.9006731e+24", 
     "at" : "2012-10-18T06:47:56.226880Z", 
     "unit" : { 
      "symbol" : "µT" 
     }, 
     "id" : "Magnetic_Y", 
     "current_value" : "7.35" 
     }, { 
     "max_value" : "432.0", 
     "min_value" : "-3950.0", 
     "at" : "2012-10-18T06:47:56.226880Z", 
     "unit" : { 
      "symbol" : "µT" 
     }, 
     "id" : "Magnetic_Z", 
     "current_value" : "7.10" 
     }, { 
     "max_value" : "25.59", 
     "min_value" : "11.1", 
     "at" : "2012-10-22T01:30:52.656318Z", 
     "unit" : { 
      "symbol" : "°C" 
     }, 
     "id" : "Temperature", 
     "current_value" : "22.3800" 
    ], 
} 

據我瞭解,Highcharts接受的UTC格式的日期/時間值x軸?UTC是從我的JSON費用進來的d無效?

回答

2

您必須將日期和時間值轉換爲Unix時間戳,然後Highcharts纔會接受它。

Date.UTC(2010, 0, 1) 

看看this tutorial關於如何在Javascript中使用日期對象。

+0

謝謝...現在更有意義! – user1767125

相關問題