2014-02-13 4 views
0

Я пытаюсь сделать диаграмму из диаграммы google, но я не могу получить свою PHP-переменную в скрипте: я получаю пустую страницу.Google Chart Из переменной Php

PHP

$columns = array(
       array('string' => 'x'), 
       array('number' => 'values'), 
       array('id' => 'i1', 'type' => 'number', 'role' => 'interval'), 
       array('id' => 'i1', 'type' => 'number', 'role' => 'interval'), 
       array('number' => 'OtherValues'), 
       array('id' => 'i1', 'type' => 'number', 'role' => 'interval'), 
       array('id' => 'i1', 'type' => 'number', 'role' => 'interval') 
       ); 
$test = array(
       array('a' => array(100, 90, 150,15,10,20)), 
       array('b' => array(120, 95, 130,20,10,30)), 
       array('c' => array(130, 105, 140,30,25,35)), 
       array('d' => array(90, 85, 95,40,35,45)), 
       array('e' => array(70, 74, 63,50,45,55)), 
       array('f' => array(30, 39, 22,60,55,65)), 
       array('g' => array(100, 90, 150,15,10,20)), 

    ); 
$table['cols'] = $columns; 
$table['rows'] = $test; 

Html вид

<div id="chart-lines"></div> 
<script> 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = new google.visualization.DataTable(<?php echo json_encode($table) ?>); 


    // The intervals data as narrow lines (useful for showing raw source 
    // data) 
    var options_lines = { 
     title: 'Line intervals, default', 
     intervals: { 'lineWidth':2, 'barWidth': 0.5 }, 

     legend: 'none', 
    }; 

    var chart_lines = new google.visualization.LineChart(document.getElementById('chart-lines')); 
    chart_lines.draw(data, options_lines); 
} 
</script> 

Использование Google Chrome Консоль JavaScript Я получаю "неперехваченным Ошибка: недопустимый тип: не определен" для любого графа с этими деталями:

R.Osa 
R.ug 
(anonymous function) 
nj.(anonymous function).d 
Ep 
drawchart 
+0

Пустая страница означает, что диаграмма не может быть сгенерирована. Проверьте свою консоль на ошибки JavaScript и опубликуйте их! – Ruben

+0

@Ruben Редактировать сделано – Wistar

ответ

2

Структура данных неверна для конструктора DataTable API визуализации.

Правильный формат для столбцов представляет собой массив объектов столбцов, где каждый объект имеет type (обязательно), label, id и p (все необязательное) свойства. type является строкой с возможными значениями string, number, boolean, date, datetime и timeofday. label и id - это строки. p - объект свойств столбца.

Правильный формат строк - это массив объектов строки, где каждый объект имеет и p. c - это массив объектов ячейки. p - объект свойств строки. Объекты ячейки имеют v, f и p свойства, где v - это значение ячейки, f - это строковое значение ячейки, а p - объект свойств ячейки.

Поддерживаемые свойства для всех объектов свойств различаются в зависимости от типа диаграммы, которую вы рисуете.

Использование функции PHP json_encode, ассоциативные массивы преобразуются в объекты, а неассоциативные массивы превращаются в массивы. Соответствующая структура для вашей таблицы должна выглядеть примерно так:

$columns = array(
    array('type' => 'string', 'label' => 'x'), 
    array('type' => 'number', 'label' => 'values'), 
    // each interval should have its own unique id, 
    // but leaving them the same won't break anything for your chart as-is 
    array('type' => 'number', 'id' => 'i1', 'p' => array('role' => 'interval')), 
    array('type' => 'number', 'id' => 'i1', 'p' => array('role' => 'interval')), 
    array('type' => 'number', 'label' => 'OtherValues'), 
    array('type' => 'number', 'id' => 'i1', 'p' => array('role' => 'interval')), 
    array('type' => 'number', 'id' => 'i1', 'p' => array('role' => 'interval')) 
); 

$test = array(
    array('c' => array(
     array('v' => 'a'), 
     array('v' => 100), 
     array('v' => 90), 
     array('v' => 150), 
     array('v' => 15), 
     array('v' => 10), 
     array('v' => 20) 
    )), 
    // etc 
); 
$table['cols'] = $columns; 
$table['rows'] = $test; 
+0

Вы только что сделали свой день сэром. – Wistar