Как загрузить файл JSON с датой в Google Charts

Question

Я не могу нанести данные с помощью диаграмм Google, так как данные в формате json не соответствуют должным образом. Я не могу понять, как манипулировать данными для получения ожидаемого формата. Данные поступают из CSV-файла.

Я применил file_get_contents() из php и возвращает:

[{"Fecha3":1566259200000,"Precio":30.0},
 {"Fecha3":1566345600000,"Precio":6.0},
 {"Fecha3":1566432000000,"Precio":4.0},
 {"Fecha3":1566518400000,"Precio":44.0},
 {"Fecha3":1566777600000,"Precio":80.0},
 {"Fecha3":1566864000000,"Precio":2.0}
] 

(сокращено для пояснения)

Поэтому я конвертирую дату Unixв формате, который нужен Google Charts.

Когда я применил приведенный ниже код php, вывод из getjson.php файла:

{"new Date(2019, 08, 20)":30,
 "new Date(2019, 08, 21)":6,
 "new Date(2019, 08, 22)":4,
 "new Date(2019, 08, 23)":44,
 "new Date(2019, 08, 26)":80,
 "new Date(2019, 08, 27)":2
} 

(сокращено для пояснения)

getjson.php

<?php
$fecha = new DateTime();
$strJsonFileContents = file_get_contents("datos_nego2.json");
$arr = json_decode($strJsonFileContents, true);
$result = [];
$i = 0;

// Loop to convert the unix date and sort the data
foreach($arr as $item) { 
    $uses1 = $item['Fecha3']/1000; 
    $uses2 = $item['Precio'];
    $fecha->setTimestamp($uses1);
    $datevar = "new Date(" .$fecha->format('Y, m, d') . ")"; 
    // I think months have to be months - 1
    $result[$datevar] = $uses2;
    $i++;
}

$jsonTable = json_encode($result);
echo $jsonTable;
?>

Затем я загружаю файл внутри кода javascript:

var jsonData = $.ajax({
     url: "getjson.php",
     dataType: "json",
     async: false
}).responseText;

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

data.addColumn('date', 'Fecha');
data.addColumn('number', 'Number');

var options = {
    [...]
    hAxis: {   // I put fixed dates for testing
      viewWindow: {
        min: new Date(2019, 0, 1),
        max: new Date(2019, 11, 31)
    },
    [...]

График отображается, а данные - нет. Javascript console.log (jsonData) показывает:
Я прочитал здесь этот формат должен быть:

{
  "cols": [
        {"id":"","label":"Topping","pattern":"","type":"string"},
        {"id":"","label":"Slices","pattern":"","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
        {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
      ]
}

Но я не знаю, какпреобразовать на этом пути!

Возможные решения, которые я пробовал, но мне не удалось:

• Преобразовать исходный файл CSV в стиль json, как упомянуто выше.

• Добавьте код JavaScript ниже var jsonData, чтобы манипулировать им.

Я видел в других примерах различные решения:

data.addRows([
[new Date(2019, 1, 1), 0.2],    [new Date(2019, 2, 1), 0.8],
[new Date(2019, 3, 1), 0.4],    [new Date(2019, 4, 1), 0.4],
]);

Я также пытался, но никогда не достигалдля построения данных.

Буду признателен за любой совет или фрагмент кода.

Действительно спасибо за время и внимание! : -)

Answer 1

найденное решение будет работать, но требует дополнительной обработки на клиенте.

чтобы передать реальную дату в Google, необходимо использовать найденный вами формат json.
это в основном та же строка даты без ключевого слова new.
ссылку можно найти здесь-> даты и время с использованием строкового представления даты

{
  "cols": [
        {"label":"Date","type":"date"},
        {"label":"Charge","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"Date(2019, 7, 20)"},{"v":20}]},
        {"c":[{"v":"Date(2019, 7, 21)"},{"v":21}]},
        {"c":[{"v":"Date(2019, 7, 22)"},{"v":22}]},
      ]
}

и да, месяц нужно уменьшить на одну ...

вот примериз php, который вы можете использовать (не проверено)

<?php
$fecha = new DateTime();
$strJsonFileContents = file_get_contents("datos_nego2.json");
$arr = json_decode($strJsonFileContents, true);

// create data table, with columns
$table = [];
$table['cols'] = [
    ['label' => 'Date', 'type' => 'date'],
    ['label' => 'Charge', 'type' => 'number']
];

// Loop to convert the unix date and sort the data
$rows = [];
foreach($arr as $item) {
    $uses1 = $item['Fecha3']/1000;
    $uses2 = $item['Precio'];
    $fecha->setTimestamp($uses1);

    // month does have to be - 1
    $datevar = "Date(".$fecha->format('Y').", ".((int) $fecha->format('m') - 1).", ".$fecha->format('d').")";

    // create rows
    $result = [];
    $result[] = ['v' => (string) $datevar];
    $result[] = ['v' => (float) $uses2];
    $rows[] = ['c' => $result];
}

$table['rows'] = $rows;
$jsonTable = json_encode($table);
echo $jsonTable;
?>

, тогда на стороне клиента вам нужно только передать json в конструктор таблицы данных.

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

вам не нужно добавлять столбцы или строки ...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {

  $.ajax({
    url: 'getjson2.php',
    dataType: 'json'
  }).done(function (jsonData) {

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

    var options = {
      hAxis: {
        viewWindow: {
          min: new Date(2019, 0, 1),
          max: new Date(2019, 11, 31)
        }
      }
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart'));

    chart.draw(data, options);

  });
});

примечание: async: false на ajax устарел и больше не должен использоваться.
используйте взамен done (см. фрагмент выше).

Answer 2

Я только что нашел решение !!!

Данные должны быть представлены как:

[{"Fecha": "2019, 08, 20", "Precio ": 30}, {" Fecha ":" 2019, 08, 21 "," Precio ": 6}, {" Fecha ":" 2019, 08, 22 "," Precio ": 4}, {" Fecha ": "2019, 08, 23", "Precio": 44}, {"Fecha": "2019, 08, 26", "Precio": 80}, {"Fecha": "2019, 08, 27", "Precio ": 2}, {" Fecha ":" 2019, 09, 09 "," Precio ": 48}, {" Fecha ":" 2019, 09, 10 "," Precio ": 2}]

Это делается getjson.php file:

<?php
$fecha = new DateTime();
$strJsonFileContents = file_get_contents("datos_nego2.json");
$arr = json_decode($strJsonFileContents, true);
$result = [];
$i = 0;

foreach($arr as $item) { //foreach element in $arr
    $uses1 = $item['Fecha3']/1000; //etc
    $uses2 = $item['Precio'];
    $fecha->setTimestamp($uses1);
    $datevar = $fecha->format('Y, m, d');
    $result[$i]['Fecha'] = $datevar;
    $result[$i]['Precio'] = $uses2;
    $i++;
}

$jsonTable = json_encode($result);
echo $jsonTable;
//echo $strJsonFileContents;

?>

Затем в коде JavaScript:

    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var jsonData = $.ajax({
          url: "getjson2.php",
          dataType: "json",
          async: false
          }).responseText;
      var array_datos = JSON.parse(jsonData)
      var longitud_array = array_datos.length;

      var data = new google.visualization.DataTable();
      data.addColumn('date', 'Date');
      data.addColumn('number', 'Charge');

      for (var i = 0; i < longitud_array; i++) {
          console.log(array_datos[i]);
          data.addRow([
          new Date(array_datos[i].Fecha),
          parseFloat(array_datos[i].Precio),
        ]);
      }