Создание диаграммы с графическими картами Google с сервера json-файла

Я пытаюсь создать диаграмму из столбца базы данных. Данные из столбца преобразуются в массив. Массив преобразован в формат json, но что-то не так с json-файлом. Файл, который показывает на диаграмме отображается только ошибка: «Таблица не имеет столбцов»Создание диаграммы с графическими картами Google с сервера json-файла

Это страница пользователя:

<style type="text/css"></style> <!--Load the AJAX API--> 
<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"> 

// Load the Visualization API and the piechart package. 
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: "getData.php", 
     dataType:"json", 
     async: false 
     }).responseText; 

    // Create our data table out of JSON data loaded from server. 
    var data = new google.visualization.DataTable(jsonData); 

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

</script> </head> <body><div id="chart_div"></div> </div> </body> </html>

getData.php файл

<?php $string = file_get_contents("result.json"); echo $string; ?>

этот файл которые превращают массив в файл формата json:

> <?php require('required/settings.php'); 
> include('required/config.php'); 
> $query = mysql_query("SELECT DISTINCT ModelCode, COUNT(ModelCode) as 
> count from flights GROUP BY ModelCode ORDER BY count DESC LIMIT 0, 
> 10;"); 
> $response = array(); $posts = array(); 
> while($row=mysql_fetch_array($query)) { $name=$row['ModelCode']; 
> $count=$row['count']; 
> $posts[] = array('name'=> $name, 'count'=> $count); 
> } 
> $response['posts'] = $posts; 
> $fp = fopen('result.json', 'w'); fwrite($fp, json_encode($response)); 
> fclose($fp); 
> ?>

И файл json file crea ted:

{"posts":[{"name":"A320","count":"2703"},{"name":"B738","count":"2212"},{"name":"A321","count":"907"},{"name":"A319","count":"711"},{"name":"A332","count":"373"},{"name":"B773","count":"355"},{"name":"A333","count":"326"},{"name":"A388","count":"299"},{"name":"B737","count":"258"},{"name":"B744","count":"177"}]}

Любые идеи? Спасибо

источник

2015-03-20 Silviu Balaci

//ajax.googleapis.com, вероятно, следует 'HTTP: // ajax.googleapis.com' – cmbarbu

Вы не разбираете json. Вы можете использовать обычный Javascript JSON.parse:

// Create our data table out of JSON data loaded from server. 
    var tableData = JSON.parse(jsonData);

Кроме того, если вы дайте данные аргумент google.visualization.DataTable он должен быть отформатированный в very specific way. Поскольку это слишком сложно, чтобы сделать это с нуля, вы должны подать google.visualization с помощью простого массива массива, а не массива объектов, таких как то, что возвращается JSON.parse для вашего примера json-файла. Для этого вы можете изменить свой php, генерирующий json, для генерации массива json массива (see this other question).

Файл JSON становится:

[["A320",2703],["B738",2212],["A321",907],["A319",711],["A332",373],["B773",355],["A333",326],["A388",299],["B737",258],["B744",177]]

И вы можете построить его с помощью:

// Create our data table out of JSON data loaded from server. 
    var tableData = JSON.parse(jsonData); 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'name'); 
    data.addColumn('number', 'count'); 
    data.addRows(tableData); 

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

}

Кроме того, если первая строка содержит имена столбцов в формате JSON:

[["name","count"],["A320",2703],["B738",2212],["A321",907],["A319",711],["A332",373],["B773",355],["A333",326],["A388",299],["B737",258],["B744",177]]

Устройство Google DataTable может быть более легко:

var tableData = JSON.parse(jsonData); 
    var data = new google.visualization.arrayToDataTable(tableData);

источник

2015-03-20 22:50:59 cmbarbu

Можете ли вы дать мне более подробно я не знакомы с JQuery вообще –

К сожалению, я все еще получаю «Таблица не имеет столбцов» errr на странице статистики –

Можете ли вы проверить, разрешает ли новая версия ответа ваша проблема? – cmbarbu

Создание диаграммы с графическими картами Google с сервера json-файла

ответ

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