Создайте линейную диаграмму с помощью API диаграмм Google и JSON для DataTable

Question

javaI пытается создать линейную диаграмму с использованием API диаграммы Google. Я пытаюсь установить данные с помощью JSON для записи данных через пост AJAX.

У меня есть версия, работающая для круговой диаграммы, но я не могу узнать, как это сделать для линейной диаграммы.

Ниже показано, как я создаю диаграмму с сообщением ajax.

function drawLineGraph() 
      { 
       $.post("loadGraph.php", 
        { 
         type: "line" 
        }, 
        function (result) 
        { 
         var data = new google.visualization.DataTable(result); 
         var options = { 
          title: "Line Graph Test" 
         }; 

         var chart = new google.visualization.LineChart(document.getElementById("lineChart")); 
         chart.draw(data, options); 
        }, "json" 
       ); 
      } 

Ниже приведен код для loadGraph.php

print json_encode(test()); 

    function test() 
    { 
     $array = array(); 
     if ($_POST['type'] == "line") 
     { 
      $array['cols'][] = array('type' => 'string'); 
      $array['cols'][] = array('type' => 'number'); 

      $temp = array(); 
      $array['row'][] = array('v' => (string) "20-01-13"); 
      $array['row'][] = array('v' => (int) 35); 
      $array['row'][] = array('v' => (string) "21-01-13"); 
      $array['row'][] = array('v' => (int) 30); 

     } 
} 

Хотя не происходят ошибки, является своего рода отображается строка диаграммы, но нет ни одной строки, как если бы данные 0. Ниже скриншот как отображается карта

Ниже приводится вывод содержимого JSON.

{"cols":[{"type":"string"},{"type":"number"}],"row":[{"c":[{"v":"20-01-13"},{"v":22}]},{"c":[{"v":"21-01-13"},{"v":24}]},{"c":[{"v":"22-01-13"},{"v":27}]}]} 

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

ОБНОВЛЕНИЕ Я попытался сделать то, что предложил @davidkonrad, но теперь у меня другая проблема. Я изменил определение строки для строк для массива PHP следующим образом:

$array['cols'][] = array('type' => 'string'); 
    $array['cols'][] = array('type' => 'number'); 

    $array['rows'][] = array('c' => "20-01-13"); 
    $array['rows'][] = array('v' => 35); 
    $array['rows'][] = array('c' => "21-01-13"); 
    $array['rows'][] = array('v' => 30); 

Но теперь, когда график нагрузка я получаю Cannot read property '0' of undefined, где должна быть отображена на графике.

Ниже как JSON теперь генерируется

{"cols":[{"type":"string"},{"type":"number"}],"rows":[{"c":"20-01-13"},{"v":35},{"c":"21-01-13"},{"v":30}]} 

Я не могу видеть, как изменить массив, чтобы он соответствовал с JSON, что davidkonrad при условии

Answer 1

Проблема очень мала опечатка. В JSON row должно быть rows.

Например, изменив пример JSON для

var result = { "cols":[ {"type":"string"}, {"type":"number"}], "rows":[ {"c":[{"v":"20-01-13"}, {"v":22}]}, {"c":[{"v":"21-01-13"}, {"v":24}]}, {"c":[{"v":"22-01-13"}, {"v":27}]} ]}; 

и код работает:

Update

Посмотрите на Format of the Constructor's JavaScript Literal data Parameter Вам нужно обернуть каждый "с" -сече- в скобки, а также пропускает «v» (индикатор значения) для первого столбца.

Обновленное тест JSON является

"cols": [ 
    {"type":"string"},{"type":"number"} 
     ], 
"rows":[ 
    {"c":"20-01-13"},{"v":35}, 
    {"c":"21-01-13"},{"v":30} 
     ] 
} 

давая "не может читать 0 неопределенных", becuase должно быть

{ 
"cols":[ 
    {"type":"string"},{"type":"number"} 
    ], 
"rows":[ 
    {"c": [{ "v": "20-01-13"},{"v":35} ]}, 
    {"c": [{ "v": "21-01-13"},{"v":30} ]} 
    ] 
} 

график:

Надеюсь, поможет!

Абсолютно окончательный обновление

Модифицированный РНР, что наряду с json_encode выводит данных в правильном формате Google Chart:

function test() { 
    $array = array(); 

    $array['cols'][] = array('type' => 'string'); 
    $array['cols'][] = array('type' => 'number'); 

    //HERE you have the difference 
    $array['rows'][]['c'] = array(
     array('v' => "20-01-13"), 
     array('v' => 35) 
    ); 
    $array['rows'][]['c'] = array(
     array('v' => "21-01-13"), 
     array('v' => 30) 
    ); 

    return json_encode($array); 
} 

выходах

{"cols":[{"type":"string"},{"type":"number"}],"rows":[{"c":[{"v":"20-01-13"},{"v":35}]},{"c":[{"v":"21-01-13"},{"v":30}]}]} 

что приводит к графике выше