2014-02-07 3 views
1

Я пытаюсь сделать простую визуализацию некоторых данных из базы данных, которую я получаю через JSON из простой веб-службы. Все делается на локальном хосте. Проблема заключается в том, что формат JSON для конструктора DataTable. Я прочитал документацию, и я думаю, что создал точный формат json, но по какой-то причине, когда я передаю данные конструктору DataTable, он не создает данные, а диаграмма не инициализируется, она просто дает Ошибка: в таблице нет столбцов. Данные, которые я получаю из базы данных, хороши. Диаграмма работает с данными примера, которые даны как литерал, поэтому это не что-то с javascript.Ошибка Google bubble chart: таблица не имеет столбцов

Вот код для поколения json (обратите внимание, что я также попытался сделать json с пространством «» и «» в обратном порядке, что означает «cols»: [{id: 'ID', type : «строка»}, и он не работает либо):

$niz = array(); 
while ($red = $db->getResult()->fetch_object()) 
{ 
    $niz[] = $red; 
} 

$jsonResponse = '{ 
    "cols": [{id: "ID", type: "string"}, 
    {id: "Poles", type: "number"}, 
    {id: "Victories", type: "number"}, 
    {id: "Team", type: "string"} 
    ], 
    "rows": ['; 

    $i = 0; 
    foreach ($niz as $line) { 
     $i = $i+1; 
     $addOn = '{"c":[{"v": "'.$line->name.'"}, {"v": '.$line->poles.'}, {"v": '.$line->victories.'}, {"v": "'.$line->teamName.'"}]}'; 
     if($i == count($niz)) 
     { 
      $addOn.='] }'; 

     } 
     else 
     { 
      $addOn.=','; 
     } 
     $jsonResponse.=$addOn; 
    } 


    echo json_encode($jsonResponse); 





}); 

а вот код на стороне клиента для графика:

<html> 
<head> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript"> 
google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback(drawChart); 
function drawChart() { 

var jsonData = $.ajax({ 
url: "http://127.0.0.1/VisualisationWS/poleVictoryRatio.json", 
dataType:"json", 
async: false 
}).responseText; 

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


var options = { 
title: 'Correlation between pole positions and wins of drivers, taking in account the team they are currently in.', 
hAxis: {title: 'Poles'}, 
vAxis: {title: 'Victories'}, 
bubble: {textStyle: {fontSize: 11}}, 
}; 

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

} 
</script> 
</head> 
<body> 
<div id="chart_div" style="width: 900px; height: 500px;"></div> 
</body> 
</html> 

ответ

1

Ваш JSON является недействительным. Ключи объектов в JSON должны быть указаны с двойными кавычками, например: {id: "ID", type: "string"} должно быть {"id":"ID","type":"string"}. Ручным кодированием ваших данных как JSON, вы упускаете из виду все преимущества наличия функции json_encode (она практически ничего не делает в вашей текущей настройке). Если вы строите свои данные в массивах, json_encode будет счастливо заботиться о скучных частях, кодирующие данные для вас:

$myData = array(
    'cols' => array(
     array('id' => 'ID', 'type' => 'string'), 
     array('id' => 'Poles', 'type' => 'number'), 
     array('id' => 'Victories', 'type' => 'number'), 
     array('id' => 'Team', 'type' => 'string') 
    ), 
    'rows' => array(); 
); 
while ($red = $db->getResult()->fetch_object()) { 
    $myData['rows'][] = array('c' => array(
     array('v' => $red->name), 
     array('v' => $red->poles), 
     array('v' => $red->victories), 
     array('v' => $red->teamName) 
    )); 
} 
echo json_encode($myData, JSON_NUMERIC_CHECK); 

Для справки, ассоциативные массивы в PHP кодируются как яваскрипт объектов, не ассоциативные массивы кодируются как javascript массивы. JSON_NUMERIC_CHECK сканирует данные для чисел, чтобы убедиться, что они закодированы как числа, а не строки (это помогает, потому что некоторые базы данных будут выводить числа в виде строк, главным из которых является MySQL).

+0

спасибо! :) Теперь он работает. Мне было глупо пытаться кодировать json самостоятельно, но для будущих применений я всегда буду создавать массивы, а затем использовать json_encode. – Matija

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