'trendsT.htm' using recent history to drive HighCharts

[sfws]

IMPORTANT - use of HighCharts by commercial sites requires purchase of a licence. The inclusion of code calling the package here is purely as an example of what can be done, there are other graphing packages advailable and you may choose to use a different one.

Two small typos meant that part of what I was trying to demonstrate before did not work everytime (sometimes the highchart did not display), and it has taken many days away from the code for me to suddenly spot the typing errors (missing brackets for function in highcharts section, and mispelt variable in barchart section) on looking again. So I've removed zip posted earlier and inserted new zip today here. I have only tested on a widescreen monitor of a PC using Firefox, I do not have any spare time to try other browsers. You may wish to change scaling of bar chart, size of highchart (edit CSS) or other details to suit your screen/device; all I am doing is showing you an example, this is not code tested on all data ranges nor on all devices to work for everyone. The other point I should make is that the code section starting

Code: Select all

var temperatureArray=[], rainfallArray=[], pressureArray=[];

and ending with

Code: Select all

/* static values  */

could be placed in a separate file that is "processed" by Cumulus and then included by any jQuery AJAX method if you want the 'recent history' graph to stay up to date. As coded here for simplicity as a replacement for the standard Cumulus 1.9.4 page, you need to reload the whole page for that graph to update, whilst the images uploaded by Cumulus will always be the latest available.[/color]

The package as now supplied includes:
- A revised version of trendsT.htm that can replace the standard Cumulus one, and requires to be processed by the latest build (1098) of Cumulus to populate all the different web tags.
- In the place where the standard Cumulus large graphs are displayed, you can optionally display two alternative plots, just to demonstrate what is possible (you might want something different to what I choose to plot as examples).
- I have altered the text that appears above the standard cumulus graphs, my revision accurately reports the period covered by the plot selected (standard Cumulus only quoted the one period obtained from web tags prior to build 1098. It also accurately reports the time interval between individual points on the graphs (that was there before but not always understood).
- An extra CSS file that augments the standard weatherstyle.css provided with cumulus (essential for barchart to work - I have also taken out the CSS that was declared as style within original HTML), both go in the same folder as the HTML.
- An external script file that contains the script for changing the Cumulus large graph (it is included in the HTML in the Cumulus original template, but it now also reads the modification time for the new image), it contains script code for using Highcharts to draw a graph for one week (but you can reduce the recent history array size in the HTML for shorter periods), and it contains code to read dayfile.txt and draw a bar chart for wind data for the same period as the daily plots in the left hand column of the thumbnails.
- Thumbnails (and large images) for solar. sunshine and UV in subfolder images, in case you do not have solar on your weather station but have not got around to deleting the solar row in my HTML code.

trendsT.zip

Returning to the begining of the related topic https://cumulus.hosiene.co.uk/viewtopic.p ... 4&start=30 one option being explored was reading the data to plot from dayfile.txt.
The attached code has a bar chart, drawn from coloured squares (I have provided you with a few different colours, if you need to you can make the images smaller to take up less space on your web site, and edit the script to change which colours are used).
See Wiki for suggestions on how to upload your dayfile.txt.