Использование API графиков Google с динамическими данными

Просто удалось захватить некоторые данные из службы Google Analytics для панели управления admin. Это формат, в котором он отправлен в браузер (JSON-кодирование).Использование API графиков Google с динамическими данными

[["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

Попробуйте добавить строку заголовков столбцов перед загрузкой строк данных - любые ошибки в консоли? – WhiteHat

Просто попытался это сейчас ... при использовании «т» массив, я получил эти ошибки: CrossPageChannel: Не удается подключиться, равный оконного объекта не установлены Line 775 Ошибка: CustomError: Ошибка в защищенной функции: Ошибка конфигурации при загрузке Строка: 215 Ошибка: не массив После использования «ответа» вместо этого я получаю только одну последнюю ошибку. – 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

Использование API графиков Google с динамическими данными

ответ

Смежные вопросы