WebPage Charts -

Similar like adding components to the webPage you can add also charts.

To add charts you got to have variables with history more here

To create a new WebPage from device tab choose New Device and New webPage device :

name – webPage name
deviceId – needs to be unique
template – Should be chosen default value

Then our webPage is created. We click at index.html and choose option “Edit with wizard”

then click at “Insert Chart”

Random data – in most cases when you are adding chart you don’t have any data yet. This checkbox will force diagram to display random data to preview
Series we want to display – it has some settings like color etc
Add new series based on variable history
Preview of chart
Choose date to show chart
Insert chart to the webPage

Code editing

Inserted chart has only basic functionality, to add more settings, please go to the Source at the top left.

Code for chart is inserted beetwen and  where XXXX is some random number the same for beginning and end of the chart. To remove chart from the webPage remove everything include everything between comments

Chart itself is generated by the function:

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

});

and inserted into generated device in the source Code with givenId. The javascript code can be moved to script.js to make html looks cleaner

Charts are based on great library : plotly.js It has hundreds of settings, and you can experiment with these settings.

The carts are downloaded using URL:

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

And it returns json data.