Как получить несколько строк данных в диаграмме с помощью Javascript

Question

У меня возникли проблемы с выяснением того, как получить несколько строк данных SQL в моей диаграмме Google.

Я дошел до ввода данных на консоль (прокомментировал ниже), но как написать код диаграммы Google, чтобы он записывал новый массив для каждой строки в моей таблице?

Например, я хочу, чтобы следующий код, который будет повторяться для каждой строки в моих данных:

[''+bridge_id_grab, +milemarker_grab, 0, '1', +bridge_health_grab] 

Полный код:

var sql_statement3 = "SELECT bridge_id, bridge_health, milemarker FROM TABLE_NAME &api_key=MY_API_KEY&callback=?" 
    $.getJSON('https://MY_USERNAME.cartodb.com/api/v2/sql/?q='+sql_statement3, function(data) { 
     //console.log(data.rows); 
     $.each(data.rows, function(key, val) {   
      for (i in data.rows) {    
        var bridge_id_grab = [];       
        var bridge_health_grab = [];       
        var milemarker_grab = [];      

        bridge_id_grab.push(data.rows[i].bridge_id);      
        bridge_health_grab.push(data.rows[i].bridge_health);      
        milemarker_grab.push(data.rows[i].milemarker); 

        //console.log(bridge_id_grab); 
        //console.log(bridge_health_grab); 
        //console.log(milemarker_grab);  

        function corridor_chart() { 

          var data = google.visualization.arrayToDataTable([ 
            ['Bridge', 'MileMarker', '', '', 'Health'], 
            [''+bridge_id_grab, +milemarker_grab,  0,  '1', +bridge_health_grab], 
            [''+bridge_id_grab, +milemarker_grab,  0,  '2', +bridge_health_grab] 
          ]); 

           var options = { 
           "width": "100%", 
              "legacyContinuousAxisRemoved": true, 
              "chartArea": { 
               "top": "0%", 
               "left": "0%", 
               "right": "0%", 
               "width": "100%", 
               "height": "80%" 
              }, 
              "height": 180, 
              "legend": "bottom", 
           title: '', 
           colors: ['#DB0000', '#FF0400', '#FF5500','#FF7C30', '#FFC431', '#FFF428', '#DCEA26', '#A7ED25', '#5DE207', '#00D300'], 
           "hAxis": { 
           "useFormatFromData": true, 
           "formatOptions": {}, 
           "textStyle": { 
            "color": "none", 
            "fontSize": 0 
           }, 
           "viewWindow": {}, 
           "gridlines": { 
            "color": "none", 
            "count": "-1" 
           }, 
           "titleTextStyle": { 
            "color": "none", 
            "fontSize": 0 
           } 
           }, 
           vAxis: { 
           title: "", 
           "gridlines": { 
            "color": "none", 
            "count": "0" 
           },}, 
           "bubble": { 
           "textStyle": { 
            "color": "blue", 
            "fontSize": 11 
           }, 
           "opacity": "1", 
           "stroke": "#ffffff" 
           }, 
           }; 

           var chart = new google.visualization.BubbleChart(document.getElementById('corridor_chart')); 
           chart.draw(data, options); 
          } 

          google.setOnLoadCallback(corridor_chart);      
       } 
      }); 
     }); 

Отредактированного код, основанный на ответ & комментариев darrylivan (он работает, хотя я все еще получаю сообщение об ошибке: «Неиспользуемая ошибка: не массив»):

var sql_statement3 = "SELECT bridge_id, bridge_health, milemarker FROM TABLE_NAME &api_key=MY_API_KEY&callback=?" 
     $.getJSON('https://MY_USERNAME.cartodb.com/api/v2/sql/?q='+sql_statement3, function(data) { 
       google.load('visualization', '1.0', { 'packages': ['corechart', 'controls', 'bar'] }); 

       var chartData = []; 
       chartData.push( ['Bridge', 'MileMarker', '', '', 'Health']) 

       for (var i = 0; i < data.rows.length; i++) 
        { 
         var row = data.rows[i]; 
         var dataRow = [ 
          row.bridge_id.toString(), 
          row.milemarker, 
          0, 
          row.bridge_id.toString(), 
          row.bridge_health 
          ]; 

         chartData.push(dataRow); 
         console.log(dataRow); 
        } 

        /* then call your charting func, but pass in the data 
         instead of computing it in that func. 
         */ 
        corridor_chart(chartData); 

        function corridor_chart(chartData) { 

          var data = google.visualization.arrayToDataTable(chartData); 

           var options = { 
           "width": "100%", 
              "legacyContinuousAxisRemoved": true, 
              "chartArea": { 
               "top": "0%", 
               "left": "0%", 
               "right": "0%", 
               "width": "100%", 
               "height": "80%" 
              }, 
              "height": 180, 
           title: '', 
              "legend": "bottom", 
           colors: ['#DB0000', '#FF0400', '#FF5500','#FF7C30', '#FFC431', '#FFF428', '#DCEA26', '#A7ED25', '#5DE207', '#00D300'], 
           "hAxis": { 
           "useFormatFromData": true, 
           "formatOptions": {}, 
           "textStyle": { 
            "color": "none", 
            "fontSize": 0 
           }, 
           "viewWindow": {}, 
           "gridlines": { 
            "color": "none", 
            "count": "-1" 
           }, 
           "titleTextStyle": { 
            "color": "none", 
            "fontSize": 0 
           } 
           }, 
           vAxis: { 
           title: "", 
           "gridlines": { 
            "color": "none", 
            "count": "0" 
           },}, 
           "bubble": { 
           "textStyle": { 
            "color": "blue", 
            "fontSize": 11 
           }, 
           "opacity": "1", 
           "stroke": "#ffffff" 
           }, 
           }; 

           var chart = new google.visualization.BubbleChart(document.getElementById('corridor_chart')); 
           chart.draw(data, options); 
          } 
          google.setOnLoadCallback(corridor_chart); 
     }); 

Answer 1

Похоже, вам нужно собрать массив данных в переменную, а затем использовать эту переменную в определении параметра диаграммы.

Итак, я собираюсь предположить, что у вас есть массив объектов JSON (возможно, правильно, может быть, не в зависимости от того, как возвращается, что данные, но это, скорее всего, ...)

var sql_statement3 = "SELECT bridge_id, bridge_health, milemarker FROM TABLE_NAME &api_key=MY_API_KEY&callback=?"; 


$.getJSON('https://MY_USERNAME.cartodb.com/api/v2/sql/?q='+sql_statement3, function(data) { 

// initialize your array 
var chartData = []; 

chartData.push( ['Bridge', 'MileMarker', '', '', 'Health']) 


/* loop over sql data, and populate array 
    you can be more compact about this, but 
    this is a bit more readable... 
*/ 
for (var i = 0; i < data.rows.length; i++) 
{ 
    var row = data.rows[i]; 
    console.log (row); 
    var dataRow = [ 
     row.bridge_id, 
     row.milemarker, 
     0, 
     i.toString(), 
     row.bridge_health 
     ]; 

    chartData.push(dataRow); 

} 

/* then call your charting func, but pass in the data 
    instead of computing it in that func. 
    */ 
corridor_chart(chartData); 

} 

function corridor_chart(data) { 

    // don't compute data in here - it is passed in. 
    // ... 


} 

Как и в сторону :

Вам нужно только один итерационный цикл, чтобы построить этот массив - не как:

$each(data.rows...) // --OR-- 
for (i in data.rows) 

Также - если ваши данные s возвращаются в массиве, вы, вероятно, хотите использовать

for (var i = 0; i < data.rows.length; i++) . 

Если данные возвращаются как объект, то предлагаемые вами методы работяги дора:

for (row in data.rows) 

Этого последний итерационный цикл действительно предназначен для перебора объектов.