谷歌線圖表的可視化與JSON團塊

Question

所以，我有一個谷歌線圖顯示與已被轉換爲JSON

在這裏的數據集是一些代碼與屬性：

var chartOptions = {curveType: 'none', 
    width: 1200, height: 768, 
    vAxis: {maxValue: 8000, title: 'Load time in ms'}, 
    hAxis: {title: 'Date and Time'}, 
    title: 'A Line Graph Example', 
    titlePosition: 'out', 
    titleTextStyle: {fontSize: 14,textIndent: 10}, 
    fontSize: 12 
}; 
    //Load core chart visualization 
    google.load('visualization', '1', {packages: ['corechart']}); 

    //On load call back invoke function 
    google.setOnLoadCallback(getData); 

的JSON團塊那我不得不遍歷和折線圖中顯示看起來是這樣的：

{ 
    "cols": [ 
     { 
      "id": "formatted_timestamp", 
      "label": "Formatted timestamp", 
      "type": "number" 
     }, 
     { 
      "id": "fully_loaded", 
      "label": "Fully loaded", 
      "type": "number" 
     }, 
     { 
      "id": "load_time", 
      "label": "Load time", 
      "type": "number" 
     }, 
     { 
      "id": "location", 
      "label": "Test location", 
      "type": "string" 
     }, 
     { 
      "id": "time_to_first_byte", 
      "label": "Time to first byte", 
      "type": "number" 
     }, 
     { 
      "id": "timestamp", 
      "label": "Timestamp", 
      "type": "datetime" 
     }, 
     { 
      "id": "url", 
      "label": "URL", 
      "type": "string" 
     }, 
     { 
      "id": "view", 
      "label": "View #", 
      "type": "number" 
     } 
    ], 
    "rows": [ 
     { 
      "c": [ 
       { 
        "v": 1288888570000 
       }, 
       { 
        "v": 9236 
       }, 
       { 
        "v": 6348 
       }, 
       { 
        "v": "Dulles, VA USA" 
       }, 
       { 
        "v": 466 
       }, 
       { 
        "v": "Date(2010, 10, 4, 16, 36, 10)" 
       }, 
       { 
        "v": "http://example.com" 
       }, 
       { 
        "v": 1 
       } 
      ] 
     }, 
     { 
      "c": [ 
       { 
        "v": 1288888592000 
       }, 
       { 
        "v": 4499 
       }, 
       { 
        "v": 3630 
       }, 
       { 
        "v": "Dulles, VA USA" 
       }, 
       { 
        "v": 322 
       }, 
       { 
        "v": "Date(2010, 10, 4, 16, 36, 32)" 
       }, 
       { 
        "v": "http://example2.com" 
       }, 
       { 
        "v": 2 
       } 
      ] 
     }, 
     { 
      "c": [ 
       { 
        "v": 1288888582000 
       }, 
       { 
        "v": 4499 
       }, 
       { 
        "v": 3630 
       }, 
       { 
        "v": "Dulles, VA USA" 
       }, 
       { 
        "v": 322 
       }, 
       { 
        "v": "Date(2010, 10, 4, 16, 36, 32)" 
       }, 
       { 
        "v": "http://example3.com" 
       }, 
       { 
        "v": 2 
       } 
      ] 
     }, 

爲了簡潔起見，我略行，因爲有很多人，但他們prett你可以重複使用不同的數據。

我的問題是我將如何遍歷這個blob，然後顯示在谷歌折線圖可視化？另外，我將如何從此選擇不同的數據集並將其顯示在繪製在同一圖上的其他數據上？

在此先感謝。

Answer 1

因此，經過Google Visualization API的一些試驗和錯誤，我想出瞭如何顯示來自JSON數據集的數據。

//Load core chart visualization package 
    google.load('visualization', '1', {packages: ['corechart']}); 

    //On load call back initiate function 
    google.setOnLoadCallback(getData); 


    function getData() { 

     //get Google vis data 
     var query = new google.visualization.Query('/example/datatable'); 

     //set query parameters 
     query.setQuery('select timestamp, this_time, foo group by foo'); 

     //send parameters and initiate function 
     query.send(drawTable); 

    } 


function drawTable(response) { 
     //error checking 
     if (response.isError()){ 
     alert('Error in query: ' + response.getMessage() + '' + response.getDetailedMessage()); 
     return; 
    } 

    //convert response to JSON string 
    var googleDataQuery = response.getDataTable().toJSON(); 

    //Convert JSON to google Data table 
    var convertedData = new google.visualization.DataTable(googleDataQuery, 0.5); 

    //Initialize a specific data table sub set view and store into a variable 
    var view = new google.visualization.DataView(convertedData); 

    /*specify rows you want to see, in this case rows 1 through 100. You can use an array for 
    specific rows ie [0,3,5]*/ 
    view.setRows(1, 100); 

    //specify column data 
    view.setColumns([1,2]); 

    //initiate type of chart. in this case a line chart 
    visualization = new google.visualization.LineChart(document.getElementById('gchart')); 

    //draw data table sub set with chart options 
visualization.draw(view, chartOptions); 
    } 

Answer 2

對於這種類型的挑戰，存在一個名爲underscore.js的非常漂亮的庫。使用「pluck」函數從同級對象中提取和連接屬性。此外，您可以使用datawrangler和jsondata.com的組合來真正讓生活更美好！