Serializacja danych z pliku JSON na potrzeby wykresu Highcharts

0

Witam!

Mam plik JSON w formacie:

 var json = [
  
        {
         "czas_datetime":"1483710180",
         "wind_speed_average":"6.56",
         "windgust":"13.43"
        },
        {  
          "czas_datetime":"1483710240",
          "wind_speed_average":"8.28",
          "windgust":"13.26"
        },
        {  
          "czas_datetime":"1483710300",
          "wind_speed_average":"4.32",
          "windgust":"17.07"
        }
    ];

Przez Higcharts dane są traktowane jako jedna seria.

Proszę o pomoc w "przeformatowaniu" pliku JSON tak aby wind_speed_average i windgust były seriami danych:

 var json = [
 
 {
    "key": "wind_speed_average",
    "value": [
                [1483710180, 6.56],
                [1483710240, 8.28],
                [1483710300, 4.32]
             ]   
	},
  {
    "key": "windgust",
    "value": [ 
              [1483710180, 13.43],
              [1483710240, 13.26],
              [1483710300, 17.07]
		]
  } 
];

Chciałbym uzyskać wykres jak w przykładzie poniżej:
http://jsfiddle.net/Nishith/onhfLqdm/42/

Nie wiem dlaczego, ale link działa po wpisaniu bezpośrednio do adresu przeglądarki:

 jsfiddle.net/Nishith/onhfLqdm/42/

Pozdrawiam

1

Dwa możliwe sposoby przy wykorzystaniu reduce, pierwszy bardziej oldskulowy

var r = json.reduce(
  (a, b) => Object.assign(a, {
    windgust: a.windgust.concat([[b.czas_datetime, b.windgust]]),
    wind_speed_average: a.wind_speed_average.concat([[b.czas_datetime, b.wind_speed_average]])
  }), 
  {windgust: [], wind_speed_average: []}
);

var f = (n, a, b) => a[n].concat([[b.czas_datetime, b[n]]]);
var r2 = json.reduce(
  (a, b) => ({...a,
    windgust: f("windgust", a, b),
    wind_speed_average: f("wind_speed_average", a, b)
  }),
  {windgust: [], wind_speed_average: []}
);

console.clear();
console.log(r.toSource());
console.log(r2.toSource());
r = Object.keys(r).map((k) => ({key: k, value: r[k]}));
r2 = Object.keys(r2).map((k) => ({key: k, value: r2[k]}));
console.log(r.toSource());
console.log(r2.toSource());

0

Bardzo dziękuję za przykład i gotowe rozwiązanie. Zrealizowałem to zadanie po stronie serwera w php tak, że funkcja json_encode() generuje plik JSON w potrzebnym dla wykresów formacie. Niestety takie podejście jest uciążliwe bo różne zadania po stronie przeglądarki wymagają różnego formatu pliku JSON. Chciałbym zachować "oryginalny" format JSON i formatować go w Java Script zależnie od potrzeb. Niestety jestem mocno początkujący w JS. Jakbyś mógł pokazać mi prostą implementację Twojego kodu tak aby wyświetlić dane w tym formacie na stronie www (tekst) byłbym ogromnie zobowiązany, a dydaktycznie byłoby to nieocenione. Problem jest z datą bo w JSON musi być liczba (unix), a nie string (datetime) - różnią się obecnie o godzinę. Przedstawiam dane live z ostatnich 5 minut.

Wyjściowy format JSON:
http://zbysiusp.dyndns.org/serwer_www/METEO3/data_compass_org.php?callback=?
Moja postprodukcja w PHP:
http://zbysiusp.dyndns.org/serwer_www/METEO3/data_compass_test4.php?callback=?

Pozdrawiam

P.S.
Aktualnie wykres powstaje z danych JSON przygotowanych w php (z unix_time):
http://jsfiddle.net/6hhht531/

Chciałbym aby powstawał z danych po przygotowaniu w JS tak jak zaproponowałeś (z czas_datetime)
http://jsfiddle.net/dnzf9f45/

Linki działają po bezpośrednim wpisaniu w polu adresu przeglądarki (nie wiem dlaczego).

1 użytkowników online, w tym zalogowanych: 0, gości: 1