GoogleのチャートAPI - 他のAPI

からデータを抽出し、私は、次のようなJSONを返すWeb APIを得た：それは私の各週の平均を返し、IDなど特定のパラメータ、たstartDate、endDateにしていGoogleのチャートAPI - 他のAPI

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

を指定された期間内の年。私が欲しいのは、このデータをGoogleのグラフAPIにロードして、私が入力したID、startDate、endDateのどんなIDでもチャートを生成することです。

<!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は配列で返されますが、あなたは

を使用できる形式のGoogleにそれを変換し、データがチャート

を描画する前に、返されるまで待機する必要がある必要があります

は、ページの準備ができたときにあなたが知っているグーグルcallbackに依存することができ、また、...のような

// 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); 
    });

をものになるはず

あなたはまた、チャートを表示するために、デフォルト値を提供することができたときにページが最初にロード

全体的に、このようなコードに何かを設定することをおすすめします...

<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

グラフを生成するためにランダムなデータを使って修正しました。まったく同じ方法でUが提案しました、ありがとうございました！ – Florin

をあなたは私はあなたがGoogleのチャート内の任意のデータを得ることはありません推測していて少しの情報から：私がこれまで試してみました何

。

データがAPIから取得されている場合は、使用する前に確認しておく必要があります。これは、JavaScriptの約束を使用するのに最適な場所で、APIのデータを取得してからGoogleのグラフにデータを取り込もうとするまでコードが待機するようにします。それ以外の場合、JavaScriptは実行を継続し、データオブジェクトはnullになります.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コールにブレークポイントを追加して、何が戻ってくるかを調べることができます。詳細は元の回答 –

に追加されましたが、「平均」という特定のプロパティにアクセスする必要がある場合はどうなりますか？例えば "number" ...それはdata.addRow（average.number）ですか？それはうまくいくはずですか？ – Florin

GoogleのチャートAPI - 他のAPI

答えて

関連する問題