Wykresy na stronie

Podobnie dodajemy komponenty na stronę, możemy dodawać wykresy.

Żeby dodać wykresy musimy mieć zmienne zaznaczone jako historyczne więcej tutaj

Dodajemy nową stronę internetową z domyślnym template’am

Nasza strona jest stworzona rozwijamy belkę urządzenia klikamy na idnex.html i edit with wizard

następnie Insert Chart

  1. Random data – generuje losowe dane – jak nie mamy nic zapisanego jeszcze w zmiennych ta opcja poziwli nam zobaczyć jak będzie wyglądał wykres po uzupełnieniu danych
  2. Series – zmienne które chcemy wyświetlić
  3. Dodawanie nowych series połączonych ze zmienną
  4. Podgląd wykresu
  5. Date dla których chcemy mieć wykres
  6. Wstawianie wykresu na stronę

Edytowanie kodu

Wstawiony wykres ma jedynie pare modyfikowalnych włąściwości, żeby go bardziej spersonalizować musimy z edytować kod

Kod wykresu jest wstawiany pomiędzy<!--Chart begin XXXXX--> i <!--Chart End XXXXX--> gdzie XXXX to jakiś losowy numer. Żeby wykasować wykres kasujemy wszytko pomiędzi i razem z komentarzami

Wykres sam w sobie jest generowany przez funkcję

I nastęnie wstawiany do diva, ten kod javascriptu można przenieść do script.js żeby nasz kod html był czytelny

Wykresy są generowane przez bilbiotekę  plotly.js Można wykres dowoli modyfikować, zapoznajcie się proszę z bilbioteką żęby zobaczyć jakie macie opcje

Dane do wykresów są pobierane z zapytania:

/api/rest/v1/variable/get/timeseries/dd.MM.yyyy%20HH:mm/${from dd.mm.YYYY}/${to m dd.mm.YYYY}/${variables}/

I zwracają dane w formacie json