Google Charts и данные JSON

Question

Я не парень JS, я работаю над небольшим интерфейсом для своей метеостанции. У меня есть код сервера, который генерирует данные JSON для графика. Это выглядит так:

[ 
    { 
    "temperature": "32.1", 
    "humidity": "91", 
    "battery": "100", 
    "time": "2016-02-21 15:28:56" 
    }, 
    { 
    "temperature": "32.1", 
    "humidity": "99.3", 
    "battery": "100", 
    "time": "2016-02-21 15:28:47" 
    }, 
    { 
    "temperature": "22.2", 
    "humidity": "70.2", 
    "battery": "88.2", 
    "time": "2016-02-21 15:28:19" 
    }, 
    { 
    "temperature": "21.2", 
    "humidity": "88.1", 
    "battery": "90.4", 
    "time": "2016-02-21 15:28:22" 
    } 
] 

Как я могу передать эти данные в линейную диаграмму с помощью API диаграмм Google? Я попытался использовать этот пример, но он не работает. (https://developers.google.com/chart/interactive/docs/gallery/linechart)

Answer 1

Сначала определите массив в формате, который Google графики требует:

$resultsarray = array(
        'cols' => array(
            array('label' => 'temperature', 'type' => 'number'), 
            array('label' => 'humidity', 'type' => 'number'), 
            array('label' => 'battery', 'type' => 'number'), 
            array('label' => 'time', 'type' => 'date'), 
             ), 
        'rows' => array() 
        ); 

Затем добавить данные в массив:

$resultsarray['rows'][] = array('c' => array(array('v'=> 'tempvalue'), array('v'=>'humidityval'), array('v'=>'batteryval'),array('v'=>'timeval'))); 

Encode, как JSON и запись в файл:

$fp = fopen('data.json', 'w'); 

    //JSON encode and write array to file 
    fwrite($fp, json_encode($resultsarray, JSON_NUMERIC_CHECK)); 
    fclose($fp); 

Тогда вам необходимо: (согласно Google Example)

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); 

Затем содержимое getdata.php (как на примере Google)

<?php 

// This is just an example of reading server side data and sending it to the client. 
// It reads a json formatted text file and outputs it. 

$string = file_get_contents("data.json"); 
echo $string; 

// Instead you can query your database and parse into JSON etc etc 

?> 

Answer 2

Google графики ожидает, что JSON в этом формате:

{ 
    "cols": [ 
     {"id":"","label":"temperature","pattern":"","type":"number"}, 
     {"id":"","label":"humidity","pattern":"","type":"number"}, 
     {"id":"","label":"battery","pattern":"","type":"number"}, 
     {"id":"","label":"time","pattern":"","type":"date"} 
     ], 
    "rows": [ 
     {"c":[{"v":"32.1","f":null},{"v":99.3,"f":null},{"v":100,"f":null},{"v":2016-02-21 15:28:47,"f":null}]} 
     ] 
} 

Answer 3

JSON не отформатирован должным образом. Графики Google ожидают, что для диаграммы определен конкретный тип json. Я предполагаю, что ваша база данных - это mysql. Если нет, я всегда могу изменить следующий код. Я создал небольшую библиотеку для выполнения этих неприятных задач. Так вот:

<?php 


function generate_GChart_cols($result) { 

    $fieldcount = mysqli_num_fields($result); 
    $stringVal = [253]; // MySQL field type codes -See http://php.net/manual/en/mysqli-result.fetch-field-direct.php 
    $numericVal = [246, 8]; // MySQL field type codes -See http://php.net/manual/en/mysqli-result.fetch-field-direct.php 
    $colsarray = array(); 

    for ($i = 0; $i < $fieldcount; $i++) { 
     $finfo = mysqli_fetch_field_direct($result, $i); 
     switch ($finfo->type) { 
     case in_array($finfo->type, $stringVal): 
      $type = 'string'; 
      break; 

     case in_array($finfo->type, $numericVal): 
      $type = 'number'; 
      break; 

     default: 
      $type = 'string'; 
     } 

     // Constructs the column array 

     $colsarray[] = array(
      'label' => $finfo->name, 
      'type' => $type 
     ); 
    } 

    return $colsarray; 
} 



function generate_GChart_rows($result) { 

    $fieldcount = mysqli_num_fields($result); 
    $rows = array(); 

    while ($r = $result->fetch_row()) { 

     $temp = array(); 

     for ($j = 0; $j < $fieldcount; $j++) {    

      $temp[] = array(
       'v' => $r[$j] 
      ); 
     } 

     $rows[] = array(
      'c' => $temp 
     ); 
    }; 
    return $rows; 
} 

?> 

пример использования будет:

<?php 
header('content-type: application/json; charset=utf-8'); 
header('Access-Control-Allow-Origin:*'); //Include this header to make the requests cross-origin 
include 'dbconnect.php'; 
include 'generate_google_json.php'; 

$conn = new mysqli($servername, $username, $password, $dbname); 

// Check connection 

if ($conn->connect_error) { 
    die("Connection failed: " . $conn->connect_error); 
} 

$sql = // Your query here - e.g SELECT * FROM TABLE // ; 
$result = $conn->query($sql); 
$table['data']['rows'] = generate_GChart_rows($result); // Call to function to generate rows 
$table['data']['cols'] = generate_GChart_cols($result); // Call to function to generate columns 
$conn->close(); // Close db connection 

// We echo the json and enforce a numeric check on the values 

echo $_GET['callback'] . '(' . json_encode($table, JSON_NUMERIC_CHECK) . ')'; 
?> 

Пример вывода будет:

?(
    { 
     data:{ 
      rows:[ 
      { 
       c:[ 
        { 
         v:3123600 
        }, 
        { 
         v:3116452 
        } 
       ] 
      } 
      ], 
      cols:[ 
      { 
       label:2013, 
       type:"number" 
      }, 
      { 
       label:2014, 
       type:"number" 
      } 
      ] 
     } 
    } 
) 

В случае, когда вы используете другие типы, чем BIGINT, varchart и десятичной, вы можете добавить больше значений в массивы $ stringVal и $ numericVal :)

Cheers