Google Visualization-Недопустимый тип строки для строки 0

Мне нужно визуализировать данные url json на круговой диаграмме с визуализацией google. Мой код кажется таким, каким он должен быть для этой цели, но я получаю ошибку «Недопустимый тип строки для строки 0» в консоли. Есть ли какие-либо проблемы с форматом данных? Если есть кто-нибудь, кто мог бы помочь, это было бы высоко оценено. Вот мой код:Google Visualization-Недопустимый тип строки для строки 0

PHP:

<?php 
    $json = file_get_contents('http://data.police.uk/api/crimes-street/all-crime?lat=52.629729&lng=-1.131592&date=2013-01'); 
    $json = str_replace("\xe2\x80\xa8", '\\u2028', $json); 
    $json = str_replace("\xe2\x80\xa9", '\\u2029', $json); 
    echo $json; 
?>

JavaScript:

<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 an array of the JSON data and then create our data table out of JSON data loaded from server. 
    var array = JSON.parse(jsonData); 
    var dataTableData = new google.visualization.arrayToDataTable(array); 
    var table = google.visualization.DataTable(dataTableData); 

    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> 
</body>

Спасибо.

источник

2014-01-24 Stelios Voskos

JSON не представляет данные, которые могут быть преобразованы в 2-мерного массиваgoogle.visualization.DataTable может просто не интерпретировать это. Каждый элемент содержит сложные подпозиции, такие как location и outcome_status.
Вы must Включая столбцы - arrayToDataTable is very specific about that.
Самое главное: Как вы представляете эти данные в виде пирога? На первом уровне есть только одно определенное числовое поле, location_subtype. Вы не можете создавать piechart на основе различных строк.

Но вы можете санировать данные и показать их как google.visualization.Table:

Сначала создайте DataTable с некоторыми столбцами:

var dataTable = new google.visualization.DataTable(); 
dataTable.addColumn('string','category'); 
dataTable.addColumn('string','context'); 
dataTable.addColumn('string','id'); 
dataTable.addColumn('number','location_subtype'); 
dataTable.addColumn('string','location_type'); 
dataTable.addColumn('string','month'); 
dataTable.addColumn('string','persistent_id');

конвертировать jsonData в JSON

var json=JSON.parse(jsonData);

Дезинфицируйте и вставьте данные. Здесь я просто удалить location и outcome_status подразделов, но вы можете извлечь значения из этих подразделов вместо и вставить их в виде столбцов в dataTable:

for (var i=0;i<json.length;i++) { 
    delete json[i].location; 
    delete json[i].outcome_status; 
    var row = [];   
    for (var item in json[i]) { 
    row.push(json[i][item]); 
    }   
    dataTable.addRow(row); 
}

, наконец, создать таблицу():

var chart = new google.visualization.Table(document.getElementById('chart_div')); 
chart.draw(dataTable, {width: 1000, height: 300});

результат будет выглядеть следующим образом:

enter image description here

обновление

var dataTable = new google.visualization.DataTable(); 
dataTable.addColumn('string','category'); 
dataTable.addColumn('string','context'); 
dataTable.addColumn('number','id'); 
dataTable.addColumn('string','location_subtype'); 
dataTable.addColumn('string','location_type'); 
dataTable.addColumn('string','month'); 
dataTable.addColumn('string','persistent_id'); 
dataTable.addColumn('string','street name'); 
dataTable.addColumn('string','outcome status'); 

json=JSON.parse(jsonData); 

for (var i=0;i<json.length;i++) { 
    var row = [];  
    row.push(json[i].category); 
    row.push(json[i].context); 
    row.push(json[i].id); 
    row.push(json[i].location_subtype); 
    row.push(json[i].location_type); 
    row.push(json[i].month); 
    row.push(json[i].persistent_id); 
    row.push(json[i].location.street.name); 
    row.push(json[i].outcome_status ? json[i].outcome_status.category : "null"); 
    dataTable.addRow(row); 
}

источник

2014-01-24 16:57:48 davidkonrad

Спасибо за ваши предложения. Разумно полезно! Попытка заставить круговую диаграмму работать сейчас. Еще раз спасибо –

@ AndreUk13, gr8 :) да, если вы возьмете некоторые значения из подэлементов, я думаю, вы легко можете создать значащий пирог. Счастливое программирование! – davidkonrad

Пробовал разбирать вложенные данные в json (в частности, местоположение и result_status) и выводить их на стол без успеха.Я не знаю, связано ли это с тем, что формат данных плохо для Google Visualization. Фактически, я получаю строку с размером, отличным от 2 (количество столбцов в таблице). –

Google Visualization-Недопустимый тип строки для строки 0

ответ

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