谷歌线图表的可视化与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的组合来真正让生活更美好！