Table of Contents
The Charts
All charts have been redeveloped to consolidate standard features
Editing the charts is not for the feint hearted but, if you are careful and do bits at a time, you can test what you have done and undo it before it becomes a major issue.
Overview
All charts are generated using javascript, so if you are unfamiliar with this, make a backup of the chartstrends.js, chartshistoric.js and chartsselect.js files before you make any changes.
Chart Options
var myTooltipHead = '<h4 class="ows-theme1""> {point.key} </h4><div class="grid">'; var myTooltipPoint = '<div><i class="fa-solid fa-diamond fa-xs" style="color:{series.color}"></i> {series.name}</div>' + '<div><strong>{point.y}</strong></div>';
Some styles are set at the beginning of the scripts. These are:
- myTooltipHead:This sets the heading used in tooltips Note .
It provides the theme colours and opens a grid layout for all entries in the tooltip. - myTooltipPoint:This sets the basic content of each entry in the tooltip.
It effectively creates two <div> elements, one containing the font-awsome icon and series name, and the second containing the value made bold.
As well as these two more variables are set:
The beaufortDesc variable
beaufortDesc = ['Calm','Light Air','Light breeze','Gentle breeze','Moderate breeze','Fresh breeze','Strong breeze','Near gale','Gale','Strong gale','Storm','Violent storm','Hurricane'];
- beaufort:This is an array of the Beaufort scale names in English. You can edit this to provide any language variations you want.
- noDataThis is the message that will be displayed if no data can be found for the selected chart. Again, re-write in any language as required.
All charts share common settings. To make it easier to adjust these, they are now all held in a section starting on line 61 - charts trends.js, line 31 - charts historic.js and line 40 in charts select.js.
Options set here affect all charts unless a specific chart has reset them locally. Thus, for example, if you want to change the layout of the date that is the heading of the tooltips. you can adjust xDateFormat1)
Things to change
Plot Lines
Chillzone
The main temperature chart includes a line indicating freezing point. Included in these temperature charts is a line to indicate 'frost likely'. This is set at 4°C and the equivalent in °F. In the charts it is controlled by the variable 'chillzone' and is calculated on line: 156.2)
The easiest way to remove the line is to set the value to something outside your normal temperature range or edit line 245 and set the width to zero. If you don't like the colour, this is set on line: 244 (again in the tends chart file.)
I may not have included this in every chart that is based on temperatures. It should be relatively straight forward to copy and paste the appropriate section to a different chart but do so carefully!
Beaufort Scale
In the 'Windspeed' chart, I have included lines dividing the various Beaufort Scale zones. This forms quite a hefty chunk of Windspeed chart.
I have already described how to rename the zones but if you want to delete them you will need to delete all lines from 626 down to 674. You can also delete the comma at the end of line 625.
Other Options
It is of course possible to edit any section of the charts generated by CumulusMX but you should keep backups as you go along and text frequently. It is very easy to miss out a comma or make a typing mistake and for every chart then fail to load.