Преобразуйте сводную таблицу mySQL в строку для визуализации google

Благодаря множеству различных ресурсов как на SO (This one specifically), так и внутриэлементов в целом мне удалось создать сводную таблицу с mySQL.Преобразуйте сводную таблицу mySQL в строку для визуализации google

Вы можете увидеть рабочий пример (ограниченные данные) здесь: SQL Fiddle

Теперь я хочу, чтобы получить эти данные из, через PHP и преобразовать его в строку JSON, так что я могу отправить его как АЯКС ответ на HTML-страницу, где я пытаюсь отобразить диаграмму (диаграмму столбца) с помощью визуализации Google, как это показано на рисунке: https://code.google.com/apis/ajax/playground/?type=visualization#column_chart

Мой вопрос: Как преобразовать сводную таблицу в правильный формат, чтобы диаграмма поняла его?

эхо (ред) результаты из моего файла PHP (sph.php) в конечном итоге с данными структурированы таким образом:

[{"ps_job_serial_num":"888888","105":null,"104":"4.00","400":null,"101":"5.00","102":"3.00","204":"6.00","103":"2.00","399":"1.00","300":"1.00","205":"7.00","203":"2.00","404":null,"405":null,"202":null,"301":null,"106":null,"304":null,"401":null,"201":null,"402":null,"403":null,"303":null}, 
{"ps_job_serial_num":"999999","105":null,"104":"2.00","400":null,"101":"1.00","102":"0.00","204":null,"103":null,"399":"3.00","300":"2.00","205":"3.00","203":null,"404":null,"405":null,"202":null,"301":null,"106":null,"304":null,"401":null,"201":null,"402":null,"403":null,"303":null}, 
{"ps_job_serial_num":"111111","105":"1.00","104":"3.00","400":null,"101":"5.00","102":"4.00","204":"10.00","103":"7.00","399":"1.00","300":"2.00","205":null,"203":null,"404":null,"405":null,"202":null,"301":null,"106":null,"304":"1.00","401":null,"201":null,"402":null,"403":null,"303":null}, 
{"ps_job_serial_num":"222222","105":null,"104":"1.00","400":null,"101":"1.00","102":"1.00","204":"3.00","103":"1.00","399":null,"300":null,"205":null,"203":null,"404":"3.00","405":null,"202":null,"301":null,"106":null,"304":null,"401":null,"201":null,"402":null,"403":null,"303":null}, 
{"ps_job_serial_num":"333333","105":"2.00","104":"8.00","400":null,"101":"8.00","102":"9.00","204":"10.00","103":"8.00","399":"2.00","300":"5.00","205":"8.00","203":"8.00","404":null,"405":"7.00","202":"8.00","301":null,"106":"1.00","304":null,"401":null,"201":"6.00","402":null,"403":"6.00","303":null}, 
{"ps_job_serial_num":"444444","105":"2.00","104":"5.00","400":null,"101":"8.00","102":"9.00","204":"10.00","103":"8.00","399":"4.00","300":"3.00","205":"8.00","203":"5.50","404":"2.00","405":"8.00","202":"8.00","301":"2.00","106":"4.00","304":null,"401":"10.00","201":"10.00","402":"7.00","403":"7.00","303":"2.00"}, 

etc

Но я действительно хочу, чтобы данные отформатированы как так:

([ 
['ps_job_serial_num', '101', '102', '103', '104', '105', '106'], 
['888888', 500, 381, 381, 110, 665, 157], 
['999999', 750, 396, 381, 115, 594, 173], 
['111111', 120, 406, 381, 115, 571, 167], 
['222222', 100, 460, 381, 116, 619, 185], 
['333333', 430, 401, 381, 120, 642, 195], 
['444444', 120, 679, 381, 128, 624, 198] 
]);

Как я могу заставить мои данные выглядеть так, как надо?

Вот мой полный PHP код:

<?php 
    $mysqli = new mysqli("localhost", "user", "password", "database"); 
    $query = "CALL new_procedure()"; 
    $result = $mysqli->query($query); 

    while ($row = $result->fetch_assoc()) {$results_array[] = $row;} 
    $jsontable = json_encode($results_array); 
    echo $jsontable; 
?>

Вот полный HTML страницы:

<head> 
    <title>My realtime chart</title> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.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: "sph.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.ColumnChart(document.getElementById('chart_div')); 
      chart.draw(data, {width: 1200, height: 600}); 
     } 
     </script> 
</head> 

<body> 
    <div id="chart_div" style="width: 1200px; height: 600px;"></div> 
</body> 

</html>

Ошибка, которая отображается на странице HTML является "таблица не имеет столбцов" .. .

Update # 1

Af тер внесения изменений, предложенных @asgallant (ниже), возвращаемые данные из PHP теперь выглядит следующим образом:

[ 
["ps_job_serial_num",105,104,400,101,102,204,103,399,300,205,203,404,405,202,301,106,304,401,201,402,403,303], 
["888888",null,4,null,5,3,6,2,1,1,7,2,null,null,null,null,null,null,null,null,null,null,null], 
["999999",null,2,null,1,0,null,null,3,2,3,null,null,null,null,null,null,null,null,null,null,null,null], 
["111111",1,3,null,5,4,10,7,1,2,null,null,null,null,null,null,null,1,null,null,null,null,null], 
["222222",null,1,null,1,1,3,1,null,null,null,null,3,null,null,null,null,null,null,null,null,null,null], 
[333333,2,8,null,8,9,10,8,2,5,8,8,null,7,8,null,1,null,null,6,null,6,null], 
[444444,null,3,null,2,2,8,3,1,1,null,null,2,6,null,null,null,null,null,null,null,null,null], 
[555555,null,2,null,2,2,8,3,2,1,null,null,2,3,null,null,null,null,null,null,null,null,null], 
[666666,null,2,null,2,2,7,3,1,2,null,null,2,8,null,null,null,null,null,null,null,null,null], 
[777777,null,2,null,2,2,8,3,1,1,null,null,2,7,null,null,null,null,2,null,null,null,null] 
]

который выглядит правильно. Однако я заметил, что начиная с 5-й строки больше нет котировок вокруг ps_job_serial_number. Мне интересно, это то, что заставляет это делать?

Сообщение об ошибке из консоли Chrome является:

Uncaught Error: Not an array 
(anonymous function) 
drawChart

Update # 2 Измененный запрос возвращает только те строки, которые имели кавычки ps_job_serial_num (чтобы снимать проблемы, если это было причиной ошибки). это не имело никакого значения.Ошибка остается прежним:

Uncaught Error: Not an array 
(anonymous function) 
drawChart

источник

2013-11-13 Edward

Обновленный ответ ниже, чтобы исправить ошибку «не массив». Проблема с кавычками немного сложнее решить. Я добавил 'JSON_NUMERIC_CHECK' к вызову' json_encode', который должен был превратить все значения данных, которые являются номерами в числа вместо строк (это то, что MySQL выводит числа как); Я более озадачен тем, что первые несколько строк не преобразовывались в числа (если вы не маскируете данные, а эти значения содержат нечисловые символы). (cont ...) – asgallant

API визуализации требует правильного ввода чисел, если вы добавите их в виде строк, диаграммы сломаются. Все ваши столбцы (кроме ps_job_serial_number) будут «типами»? – asgallant

Попробуйте это в PHP:

<?php 
    $mysqli = new mysqli("localhost", "user", "password", "database"); 
    $query = "CALL new_procedure()"; 
    $result = $mysqli->query($query); 

    $results_array = Array(Array()); 
    $fillKeys = true; 
    while ($row = $result->fetch_assoc()) { 
     $temp = Array(); 
     foreach ($row as $key => val) { 
      if ($fillKeys) { 
       $results_array[0][] = $key; 
      } 
      $temp[] = $val; 
     } 
     $results_array[] = $temp; 
     $fillKeys = false; 
    } 
    $jsontable = json_encode($results_array, JSON_NUMERIC_CHECK); 
    echo $jsontable; 
?>

и в вашем JavaScript, изменить DataTable конструкцию использовать метод #arrayToDataTable (который необходим, если вы хотите поставить данные в данном формате - если вы хотите использовать стандартный конструктор, вы должны знать, что тип данных каждого столбца):

[править - добавил JSON.parse ниже]

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

источник

2013-11-13 23:00:06 asgallant

спасибо за помощь в этом. Я обновил вопрос, чтобы включить новые результаты. – Edward

Еще раз спасибо за помощь! Ваше решение сработало, и я не показываю графики точно так, как хотел! Side ntoe: Чтобы исключить цитируемые и неуказанные результаты, я сделал concat ('#', ps_job_serial_num) в запросе, чтобы все они вышли в виде строк. – Edward

Последнее, что нужно прочитать: «... я сейчас * показываю диаграммы точно так, как я хотел! ...» – Edward

Преобразуйте сводную таблицу mySQL в строку для визуализации google

ответ

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