Создание массива и форматирование JSON для API Google Charting

Question

Я работаю над проектом, в котором я использую API-интерфейс Google Charting, и я хочу заполнить диаграмму с помощью json для построения таблицы данных.

В качестве теста я пытаюсь создать простой массив до того, как попытаюсь сделать это с динамическими данными из базы данных, но у меня возникла проблема с получением json в правильном формате.

В документации Google это говорит содержание JSON должно быть в следующем:

{ 
    "cols": [ 
     {"id":"","label":"Topping","pattern":"","type":"string"}, 
     {"id":"","label":"Slices","pattern":"","type":"number"} 
     ], 
    "rows": [ 
     {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]}, 
     {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]}, 
     {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]}, 
     {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]}, 
     {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]} 
     ] 
} 

Я вызываю функцию, которая возвращает код JSON.

Ниже, как функция вызывается

print json_encode(test()); 

и функция тест

function test() 
{ 
    $array = array(); 
    $array['cols'][] = "20-01-13"; 
    $array['cols'][] = "21-01-13"; 
    $array['cols'][] = "22-01-13"; 
    $array['rows'][] = 22; 
    $array['rows'][] = 26; 
    $array['rows'][] = 12; 

    return $array; 
} 

Код JavaScript, который генерирует график выглядит следующим образом

<script> 
      google.load('visualization', '1', {'packages':['corechart']}); 

      // Set a callback to run when the Google Visualization API is loaded. 
      google.setOnLoadCallback(drawChart); 

      function drawChart() { 
       var jsonData = $.ajax({ 
       url: "loadGraph.php", 
       dataType:"json", 
       async: false 
       }).responseText; 

       var data = new google.visualization.DataTable(jsonData); 

     // Instantiate and draw our chart, passing in some options. 
     var chart = new google.visualization.PieChart(document.getElementById('lineGraph')); 
     chart.draw(data, {width: 400, height: 240}); 
      } 
     </script> 

Когда я выводящая ее json возвращается в следующем формате

{"cols":["20-01-13","21-01-13","22-01-13"],"rows":[22,26,12]} 

и если я пытаюсь использовать это для datasetfor диаграммы Google я получаю следующее сообщение

Cannot read property of '1' of undefined 

Я только здание простой диаграммы линии, которая будет содержать только дату вдоль оси х и сколько раз в это время произошло что-то по оси y.

Как скомпоновать массив, чтобы получить его в правильном формате для диаграммы api google.

Спасибо за любую помощь, которую вы можете предоставить.

Answer 1

Вам необходимо , чтобы указать параметр тип для cols. Обратитесь к Google Charts JSON Format

Ваш PHP код должен выглядеть следующим образом:

function test() 
{ 
    $array['cols'][] = array('type' => 'string'); 
    $array['cols'][] = array('type' => 'string'); 
    $array['cols'][] = array('type' => 'string'); 

    $array['rows'][] = array('c' => array(array('v'=>'20-01-13'), array('v'=>22))); 
    $array['rows'][] = array('c' => array(array('v'=>'21-01-13'), array('v'=>26))); 
    $array['rows'][] = array('c' => array(array('v'=>'22-01-13'), array('v'=>12))); 

    return $array; 
} 

print json_encode(test()); 

Ваш код JSon будет выглядеть как:

{ 
    "cols": [ 
    {"type": "string"}, 
    {"type": "string"}, 
    {"type": "string"} 
    ], 
    "rows": [ 
    {"c":[{"v":"20-01-13"}, {"v":22} ]}, 
    {"c":[{"v":"21-01-13"}, {"v":26} ]}, 
    {"c":[{"v":"22-01-13"}, {"v":12} ]} 
    ] 
} 

Answer 2

она должна быть:

array(10) { 
    [0]=> 
    array(2) { 
    [0]=> 
    string(2) "en" 
    [1]=> 
    int(104) 
    } 
    [1]=> 
    array(2) { 
    [0]=> 
    string(0) "" 
    [1]=> 
    int(70) 
    } 
    [2]=> 
    array(2) { 
    [0]=> 
    string(2) "zh" 
    [1]=> 
    int(13) 
    } 
    [3]=> 
    array(2) { 
    [0]=> 
    string(2) "ru" 
    [1]=> 
    int(10) 
    } 
    ... 

затем

var data = google.visualization.arrayToDataTable(<?php echo json_encode($our_array); ?>); 

var chart = new google.visualization.PieChart(document.getElementById('someId')); 
chart.draw(data, options); 

Answer 3

Это может быть немного поздно, но в любом случае, вот что сработало для меня (необходимо создать барчер).

1. Получить код сервера, чтобы вернуть строку json, представляющую массив, например.что-то вроде:

   [{ 
       "score": 12, 
       "subject": "Computer Graphics" 
   }, { 
       "score": 65, 
       "subject": "Entreprenuership" 
   }, { 
       "score": 82, 
       "subject": "C++Programming" 
   }] 
   

2. Обработать строку, используя eval() или JSON.parse(), чтобы получить объект JavaScript.

   var chartData = JSON.parse(jsonStringFromServer); 
   

3. Создание DataTable объекта как таковые:

   var dTable = new google.visualization.DataTable(); 
   

4. Добавить столбцы в DataTable:

   dTable.addColumn('string','Subject'); 
   dTable.addColumn('number','Score'); 
   //more columns if needed... 
   

5. Loop через яваскрипт массив (chartData) и для каждого объекта массив, добавьте новую строку в dataTable:

   for(i=0;i<chartData.length;i++){ 
       var currentObj = chartData[i]; 
       dTable.addRow([currentObj.subject,currentObj.score]); 
   } 
   //set options for the chart e.g title, width etc 
   // create the chart ...