GoogleグラフAPIを動的データで使用する

Googleアナリティクスサービスから管理ダッシュボードのデータを取得することができました。これはブラウザに送信されるときの形式です（JSONエンコードされたもの）。GoogleグラフAPIを動的データで使用する

[["20161207","11"],["20161208","9"],["20161209","15"],["20161210","2"],["20161211","4"],["20161212","1"],["20161213","3"],["20161214","10"],["20161215","5"],["20161216","4"],["20161217","3"],["20161218","1"],["20161219","2"],["20161220","5"],["20161221","1"],["20161222","3"],["20161223","1"],["20161224","2"],["20161225","0"],["20161226","0"],["20161227","0"],["20161228","0"],["20161229","1"],["20161230","4"],["20161231","2"],["20170101","1"],["20170102","1"],["20170103","4"],["20170104","0"],["20170105","2"],["20170106","4"],["20170107","0"],["20170108","0"],["20170109","0"],["20170110","0"],["20170111","0"],["20170112","0"],["20170113","0"],["20170114","0"],["20170115","0"]]

私は、その後のJavaScriptによるチャートにそれを表示したいです。私のコードは以下の通りです：

<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 
     google.charts.load('current', {'packages':['corechart']}); 
     google.charts.setOnLoadCallback(drawChart); 

     function drawChart() { 
$.get("api.php", function(response, status){ 

t = []; 
response = JSON.parse(response); 
      for (var i = 0; i < response.length; i++) { 
       t[i] = [response[i][0], response[i][1]]; 
      } 
}); 

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

     var options = { 
      title: 'Company Performance', 
      hAxis: {title: 'Year', titleTextStyle: {color: '#333'}}, 
      vAxis: {minValue: 0} 
     }; 

     var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
     } 
    </script> 
    </head> 
    <body> 
    <div id="chart_div" style="width: 100%; height: 500px;"></div> 
    </body> 
</html>

私はまったく何も得ていません。グラフは、文書内でthis exampleに適合しています。何らかの理由でレスポンスが配列として有効ではないようで、余分なループが必要ですが、空白のページが表示されますが、エラーは発生しません。私はそれをハードコードすれば、それは動作します。誰にも問題の可能性があるアイデアはありますか？

<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 
google.charts.load('current', {'packages':['corechart']}); 
google.charts.setOnLoadCallback(drawChart); 

function drawChart() 
{ 
    $.ajaxSetup({ 
     cache: false, 
    }); 

    $.get("api.php", function(response, status) 
    { 
     t = []; 
     response = JSON.parse(response); 
       for (var i = 0; i < response.length; i++) 
        t[i] = [response[i][0], response[i][1]]; 

     alert(response); 
    }); 

     var data = google.visualization.arrayToDataTable([ 
     ['Name', 'Number'], 
     response, 
    ]); 

    //data.addColumn('string', 'Employee Name'); 
    //data.addColumn('string', 'Employee Name123'); 

    var options = { 
     title: 'Company Performance', 
     hAxis: {title: 'Year', titleTextStyle: {color: '#333'}}, 
     vAxis: {minValue: 0} 
    }; 

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
} 
    </script> 
    </head> 
    <body> 
    <div id="chart_div" style="width: 100%; height: 500px;"></div> 
    </body> 
</html>

出典

2017-01-06 Chris98

データ行をロードする前に、列見出しの行を追加してみてください - コンソールのエラー？ CrossPageChannel：接続できません、ピア・ウィンドウ・オブジェクトはライン775を設定していないエラー：「T」配列を使用しているとき – WhiteHat

はちょうど今これを試してみました...、私はこれらのエラーを得たCustomError：保護された機能でエラーが発生しました：ロード時のコンフィグレーションエラー行：215 エラー：配列でない代わりに 'レスポンス'を使用した後、最後のエラーが1回だけ発生します。 – Chris98

上記の最新のコード – Chris98

最新のコードは、単に、第二列は、文字列として符号化された気づい
及びデータテーブルを作成する前に数、
に変換する必要...

...作業スニペット以下

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages:['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data = [["20161207","11"],["20161208","9"],["20161209","15"],["20161210","2"],["20161211","4"],["20161212","1"],["20161213","3"],["20161214","10"],["20161215","5"],["20161216","4"],["20161217","3"],["20161218","1"],["20161219","2"],["20161220","5"],["20161221","1"],["20161222","3"],["20161223","1"],["20161224","2"],["20161225","0"],["20161226","0"],["20161227","0"],["20161228","0"],["20161229","1"],["20161230","4"],["20161231","2"],["20170101","1"],["20170102","1"],["20170103","4"],["20170104","0"],["20170105","2"],["20170106","4"],["20170107","0"],["20170108","0"],["20170109","0"],["20170110","0"],["20170111","0"],["20170112","0"],["20170113","0"],["20170114","0"],["20170115","0"]]; 
 

 
    var chartData = []; 
 
    chartData.push(['Name', 'Number']); 
 

 
    data.forEach(function (row) { 
 
    chartData.push([row[0], parseFloat(row[1])]); 
 
    }); 
 

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

 
    var options = { 
 
    title: 'Company Performance', 
 
    hAxis: {title: 'Year', titleTextStyle: {color: '#333'}}, 
 
    vAxis: {minValue: 0} 
 
    }; 
 

 
    var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
 
    chart.draw(dataTable, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

を見ます

出典

2017-01-06 19:51:59 WhiteHat

GoogleグラフAPIを動的データで使用する

答えて

関連する問題