Below is an example of the real time charting capabilities of HTML HMI. The core library extracts data points and makes them available to the web client, which utilizes an open source HTML 5 graphing library to generate the chart.
You can learn more about this library at: http://www.flotcharts.org/
<!--
Using the Flot HTML 5 library, we can display real time data in a graphical format.
Configuration of the HTML that acts as a placeholder for a chart is farly simple.
-->
<div id="trend1" style='width:100%;height:100%'></div>
/*
Configuring the script involves 2 steps.
1) In the OPC_config object, a trend_binding must be included.
NOTE: in this example, we're setting up 3 different pens to render 3 server tag values on a single chart.
*/
OPC_config = {
token:'7e61b230-481d-4551-b24b-ba9046e3d8f2',
serverURL: 'http://your.server.address:58725/',
trend_bindings:[
{
chartid:"trend1",
samplerate: 1,
timeframe: 50,
tags:[
{
tag: "Random.Value", label: "Random",
color: "#58D3F7",
yaxis: 1, lines: {fill:true},
points: { show: true }
},
{
tag: "Ramp.Value", label: "Ramp",
color: "#F7D358",
lines: {fill:false},
yaxis: 1
},
{
tag: "Sine.Value", label: "Tank 1 Level",
color: "#CC0000",
lines: {fill:false},
yaxis: 2
}
],
retain: 50,
callback:trendCallback
}
]
};
/*
2) In the trend_binding, we set up a reference to a 'callback' this is our custom function where we handle rendering the data in the chart.
In this callback, we get the data passed in and pass it to the Flot library to render in a canvas.
*/
// This configures the options object used by Flot for rendering the grid.
// It includes information on how the timestamp is rendered in the x-axis.
// All of these settings are documented at http://www.flotcharts.org/
grid_options = {
series: { shadowSize: 2}, // drawing is faster without shadows
lines: { show: true, fill: true },
grid: { hoverable: true, clickable:true, autoHighlight: false, backgroundColor:"#FFE"},
crosshair: { mode: "x"},
legend: { backgroundOpacity: 0.3},
xaxis: {
mode: "time",
font: {
size: 10,
lineHeight: 10,
family: "sans-serif",
color:"#000000"
},
tickSize: [2, "second"],
tickFormatter: function (v, axis) {
var dt = new Date(v);
// display axis label every 30 seconds
if (dt.getSeconds() % 30 == 0) {
// format label to include date and time
return OPC.Util.formatDate(dt,"mm/dd/yyyy hh:MM:ss")
}
return "";
}
},
yaxes: [
{ position: 'left', min:0, max:100 },
{ position: 'left', min:-1, max:1 },
{ position: 'left', min:0, max:100 }
]
};
// This is the callback fired by the HTML HMI library, passing in the data points to be rendered
function trendCallback(data){
// locate the trend_binding based on the inbound data
var tb = OPC.Trend.getTrendBinding(data);
// format the data as a Flot series
var fd = OPC.Flot.buildTrendData(data);
// call $.plot to draw the chart
$.plot("#" + tb.chartid, fd, grid_options);
}