谷歌圖表API - 從另一個API

我有一個網頁API返回JSON中提取數據，如：谷歌圖表API - 從另一個API

[ 
    { 
    "Week": 27, 
    "Average": 9.42 
    }, 
    { 
    "Week": 28, 
    "Average": 9.88 
    } 
]

它有特定的參數，如ID，的startDate，結束日期，回到我平均每個星期的在給定的時間段內的一年。我現在想要的是將這些數據加載到谷歌圖表API中，以生成我的圖表，用於我輸入的任何ID，startDate，endDate。

有什麼我試過到目前爲止：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Implementing Google Chart</title> 
    <meta charset="utf-8" /> 
</head> 
<body> 
    <div id="chartdetails_div" style="width:800px; margin:0 auto;"> 
     ID:  <br /> <input type="number" id="resultID" /> <br /> 
     Start date:<br /> <input type="date" id="startdate" /><br /> 
     End date: <br /> <input type="date" id="enddate" /><br /> 
     <input type="button" value="Genereaza chart" id="generate" /> 
    </div><br /> 
    <div id="chart_div" /> 


    <!--Load the AJAX API--> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script type="text/javascript"> 

     $(document).ready(function() { 


      google.charts.load('current', { packages: ['corechart', 'bar'] }); 
      google.charts.setOnLoadCallback(drawBasic); 

      function drawBasic() { 

       var data = new google.visualization.DataTable(); 
       data.addColumn('number', 'Week number'); 
       data.addColumn('number', 'Mark average'); 

       $('#generate').on("click", function() { 
        var uri = 'http://localhost:50492/questionnaires/' + $('#resultID').val() + 
       '/statistics/start=' + $('#startdate').val() 
       + '/end=' + $('#enddate').val(); 
        $.getJSON(uri, function (average) { 
         data.addRows(average); 

         }); 
        }); 




       var options = { 
        title: 'Mark Average Throughout The Datetime', 
        hAxis: { 
         title: 'Week number', 
         viewWindow: { 
          min: 0, 
          max: 52 
         } 
        }, 
        vAxis: { 
         title: 'Mark average (scale of 1-10)' 
        } 
       }; 

       var chart = new google.visualization.ColumnChart(
        document.getElementById('chart_div')); 

       chart.draw(data, options); 
      } 
     }); 

    </script> 
</body> 
</html>

來源

2016-08-17 Florin

雖然JSON是在返回數組，你需要將其轉換爲一種格式谷歌可以使用

，需要等到數據返回，繪製圖表

前

應該是這個樣子......

// get json 
    $.getJSON(uri, function (average) { 
    // add data rows 
    $.each(average, function(i, row) { 
     data.addRow([row.Week, row.Average]); 
    }); 

    // chart options 
    var options = { 
     title: 'Mark Average Throughout The Datetime', 
     hAxis: { 
     title: 'Week number', 
     viewWindow: { 
      min: 0, 
      max: 52 
     } 
     }, 
     vAxis: { 
     title: 'Mark average (scale of 1-10)' 
     } 
    }; 

    // draw chart 
    var chart = new google.visualization.ColumnChart(
     document.getElementById('chart_div') 
    ); 
    chart.draw(data, options); 
    });

也，你可以依賴於谷歌callback知道什麼時候該頁面已準備就緒

你也可以提供默認值，以顯示圖表時，第一次加載頁面

整體，建議設置的代碼是這樣的......

<div id="chartdetails_div" style="width:800px; margin:0 auto;"> 
    ID:  <br /> <input type="number" id="resultID" /> <br /> 
    Start date:<br /> <input type="date" id="startdate" /><br /> 
    End date: <br /> <input type="date" id="enddate" /><br /> 
    <input type="button" value="Genereaza chart" id="generate" /> 
</div><br /> 
<div id="chart_div" /> 


<!--Load the AJAX API--> 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    google.charts.load('current', { 
    callback: function() { 
     // set generate event 
     $('#generate').on("click", drawBasic); 

     // draw default chart 
     drawBasic(); 

     function drawBasic() { 
     // set default dates 
     var currentDay = new Date(); 
     var lastMonth = new Date(
      currentDay.getFullYear(), 
      currentDay.getMonth() - 1, 
      currentDay.getDate() 
     ); 

     // date formatter 
     var dateFormat = new google.visualization.DateFormat({ 
      pattern: 'yyyy-MM-dd' 
     }); 

     // use default values for first load 
     var resultID = $('#resultID').val() || '1'; 
     var startdate = $('#startdate').val() || dateFormat.formatValue(lastMonth); 
     var enddate = $('#enddate').val() || dateFormat.formatValue(currentDay); 
     $('#resultID').val(resultID); 
     $('#startdate').val(startdate); 
     $('#enddate').val(enddate); 

     // build uri 
     var uri = 'http://localhost:50492/questionnaires/' + resultID + 
        '/statistics/start=' + startdate + 
        '/end=' + enddate; 

     // build data table 
     var data = new google.visualization.DataTable(); 
     data.addColumn('number', 'Week number'); 
     data.addColumn('number', 'Mark average'); 

     // get json 
     $.getJSON(uri, function (average) { 
      // add data rows 
      $.each(average, function(i, row) { 
      data.addRow([row.Week, row.Average]); 
      }); 

      // chart options 
      var options = { 
      title: 'Mark Average Throughout The Datetime', 
      hAxis: { 
       title: 'Week number', 
       viewWindow: { 
       min: 0, 
       max: 52 
       } 
      }, 
      vAxis: { 
       title: 'Mark average (scale of 1-10)' 
      } 
      }; 

      // draw chart 
      var chart = new google.visualization.ColumnChart(
      document.getElementById('chart_div') 
     ); 
      chart.draw(data, options); 
     }); 
     } 
    }, 
    packages: ['corechart'] 
    }); 
</script>

來源

2016-08-17 11:58:05 WhiteHat

我已經使用一些隨機數據修復了它以生成我的圖表。你的建議完全一樣，非常感謝你，先生！ – Florin

從你提供我猜你沒有得到谷歌的圖表中的任何數據信息很少。

當您的數據來自api時，您需要確保在嘗試使用它之前有它。這是一個完美的地方，使用JavaScript的承諾，這將使您的代碼等待，直到你有API數據，然後嘗試填充谷歌圖表。否則，javascript將繼續執行，並且您的數據對象將爲空，直到api調用完成，這對於圖表來說基本上已經太晚了。

這裏是關於承諾的文章，讓您開始：http://www.html5rocks.com/en/tutorials/es6/promises/

如果需要調查什麼來自您的服務回報給你打電話可以只在您的通話添加斷點語句，然後看看，看看有什麼在您的回覆數據中。

$.getJSON(uri, function (average) { 
         debugger; 
         data.addRows(average); 

         }); 
        });

來源

2016-08-17 10:27:22

，我沒有得到的數據正確的，這將是我的第一個問題......那麼我想這將是你提到的那個。 – Florin

，您可以通過在api調用中添加斷點來查看返回的內容。更多細節已被添加到原始答案 –

但如果我需要訪問「平均」的特定屬性會怎麼樣？例如「數字」...是它data.addRow（average.number）？應該這樣做嗎？ – Florin

谷歌圖表API - 從另一個API

回答

相關問題