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

name nazwa naszej strony
deviceId – unikalny numer
template – zostawiamy co jest wybrane domyślnie

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

następnie Insert Chart

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
Series – zmienne które chcemy wyświetlić
Dodawanie nowych series połączonych ze zmienną
Podgląd wykresu
Date dla których chcemy mieć wykres
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 i  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ę

 function (data, status) {
		
			if (data["humm"]==undefined){
				alert("cannot read data for variable humm");
				return ;
			}
			var trace0 = {
				x: data["humm"].datas,
				y: data["humm"].value,
				name: "Hummidity",
				fill: "none",
				type: "area",
				stackgroup: 'one',
				marker: {
					color: '#FF0000',
					line: {
						color: '#FF0000'
					}
				}
			};
		
			if (data["press"]==undefined){
				alert("cannot read data for variable press");
				return ;
			}
			var trace1 = {
				x: data["press"].datas,
				y: data["press"].value,
				name: "pressure",
				fill: "none",
				type: "bar",
				stackgroup: 'one',
				marker: {
					color: '#7800ff',
					line: {
						color: '#7800ff'
					}
				}
			};
		
			var data = [trace0,trace1,];
			var layout = {
				title: "Title",
				xaxis: {
					categoryorder:  "X ax"
				},
		
			yaxis: {
				title: "%",
				titlefont: {color: "#1f77b4"},
				tickfont: {color: "#1f77b4"},
				anchor: "free",
				overlaying: "y",
				side: "left"
			},
		
			yaxis2: {
				title: "C",
				titlefont: {color: "#1f77b4"},
				tickfont: {color: "#1f77b4"},
				anchor: "free",
				overlaying: "y",
				side: "left"
			},
		
			};
			Plotly.newPlot('chartDiv3259', data, layout);
		});
	});

function (data, status) {

if (data["humm"]==undefined){

alert("cannot read data for variable humm");

return ;

}

var trace0 = {

x: data["humm"].datas,

y: data["humm"].value,

name: "Hummidity",

fill: "none",

type: "area",

stackgroup: 'one',

marker: {

color: '#FF0000',

line: {

color: '#FF0000'

}

};

if (data["press"]==undefined){

alert("cannot read data for variable press");

return ;

}

var trace1 = {

x: data["press"].datas,

y: data["press"].value,

name: "pressure",

fill: "none",

type: "bar",

stackgroup: 'one',

marker: {

color: '#7800ff',

line: {

color: '#7800ff'

}

};

var data = [trace0,trace1,];

var layout = {

title: "Title",

xaxis: {

categoryorder: "X ax"

yaxis: {

title: "%",

titlefont: {color: "#1f77b4"},

tickfont: {color: "#1f77b4"},

anchor: "free",

overlaying: "y",

side: "left"

yaxis2: {

title: "C",

titlefont: {color: "#1f77b4"},

tickfont: {color: "#1f77b4"},

anchor: "free",

overlaying: "y",

side: "left"

};

Plotly.newPlot('chartDiv3259', data, layout);

});

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