The InqPortal Admin uses a Windows Task Manager like real-time graph showing various system metrics on the History tab. It also has the ability to add your custom, published numeric variables so you can see them with or without the system metrics (see Customizing the Histogram). This tab uses a custom library InqHisto.js which is a wrapper of the https://www.chartjs.org/ chart.js JavaScript library that allows you to do many things with all kinds of charts. chart.js is incorporated into InqPortal and is callable from your client web pages along with this InqHisto.js. If you use InqHisto.js, you must also include chart.js.
Jump Starting Template
When creating your own Client applications and especially if you want to incorporate your own histogram chart, it is best to start by going to the Admin. Click on the History tab and add your desired published variables as found in Customizing the Histogram. Once you added them and seen them work as you expect on the History tab, select the Menu item Generate Starter Page. The full steps can be found Client Side Getting Started. This will create you html page with your custom variables and a histogram already configured for your published variables. It also add all the necessary include files.
Customizing the Template
The Starter Page generator does not allow you to customize all aspects of the Histogram and as such, you may need to modify it. There is only one method necessary to modify: config. Looking into the generated html file, you will find the line starting with: _hist.config. It is usually about twelve lines up from the bottom. If you can’t find it, you probably did not Customize the Histogram as instructed above.
config(list, keep, units, average)
This one line configures the Histogram. It has four parameters.
Parameter
- list – This is a comma delimited list of Y-Axis titles and publish webID’s. This is best described with examples in Customizing the Histogram. If you followed the steps above or in the Customizing the Histogram, this parameter will already be correct in your html file.
- keep (default = 60) – This is the total amount of time before data rolls off. This is used in conjunction with units.
- units (default = 0) – Units are the time base to be used with keep. This will also be the units shown on the X axis.
- 0 = seconds
- 1 = minutes
- 2 = hours
- 3 = days
- average (default = 1) – This is the number of data points received that are averaged together, before a point is actually added to the graph. This is mainly used when you are keeping a long duration (say… 7 days) OR if you are sending data at a very high rate (say… 100 Hz).
Example: _hist.config(“Pressure (mbar), P, 3 Hour Pressure Change (mbar), D3P”, 7, 3, 10);
In this weather station example, we know from our server side Sketch that the data is only sent out once every minute. We want to plot two of our published variables P and D3P. The Y-axis labels corresponding to these two published variables are Pressure (mbar) and 3 Hour Pressure Change (mbar) respectively. The next two parameters says we want seven days worth of data plotted. Doing the Math, we realize that this results in 10,080 data points per curve. We decide that if we divide by ten, we get a graph manageable 1008 points per curve. Thus the last parameter is 10 indicating we will average ten data points (ten minutes worth) together to then plot one point on the graph.