谷歌图表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

回答

相关问题