Charts

Introduction

One of the most important modules of CumulusUtils is the charting module as it gives insight in your weather data. A picture says more than a thousand words. The charting is subdivided in five sections: Rain charts, Temperature charts, Solar charts and Wind charts. Miscellaneous completes the charts.

And if you run the Website Generator, the Home page shows the charts similar (almost equal) to the charts which default to the CumulusMX Recent Charts page and CumulusMX Historic Charts page. From end of 2020 CumulusUtils begins to deviate in charting approach from CumulusMX with respect to those default charts.

This page describes only the common features and requirements, the graphs themselves are discussed on their own page.

The charts are created using HighCharts using their non-commercial license. If you want to use the charts or the Website Generator of CumulusUtils, please make yourself acquainted with this license.

Operation

This module is included in the website. When needed as a single output the following command is given:

  utils/bin/cumulusutils.exe graphs

The Home page charts of the website will be described there.

Output

The output consists of five files: graphstemp.txt, graphsrain.txt, graphswind.txt, graphssolar.txt and graphsmisc.txt.

These files contain, embedded in HTML code, both the menu code in javascript (each file has its own selection menu) and the Highcharts code in javascript for the charts and the data.

Inifile parameters

The charting module is second in place of modules with the most parameters (the Website Generator being first) and also require more explanation. Note that the charts on the Home page of the Website have their own explicit colour specifications. When useful or required, these descriptions will be repeated on

All parameters belong to the section [graphs]:

   [Graphs]

All charts can be individually selected to be present or not. If the value of the following parameters is false the chart and its data will be generated to the output, but the menu choice will not be present so the user can't select.

Rain graphs:

   DailyRain=true
   MonthlyRain=true
   YearRainstats=true
   YearMonthRainstats=true

Temperature charts:

   MonthlyTemp=true
   YearTempstats=true
   YearMonthTempstats=true
   WarmerDays=true
   HeatMap=true

Wind charts:

   WindRose=true
   Windrun=true

Solar charts:

   SolarHours=true
   SolarEnergy=true
   SolarHoursYearMonth=true
   SolarEnergyYearMonth=true

Miscellaneous charts:

   DailyEVT=true
   MonthlyEVT=true
   AverageClash=true

Chart parameters:

   UseHighchartsBoostModule=true | false
   UseNormalTempReference=both | Normal | StationAverage    (default = Normal)
   UseNormalRainReference=both | Normal | StationAverage    (default = Normal)
   MaxNrOfSeriesVisibileInGraph=3                           (default = 2)
   PeriodMovingAverage=365                                  (default = 180)
   WindRoseNrOfWindforceClasses=6                           (default = 6)
   WindRoseMaxWindSpeed=60                                  (default = 60)
   WindRoseInversed=false | true                            (default = false)
   WindrunClassWidth=75                                     (default = 75)
   HeatmapNumberOfYearsPerPage=10                            (default = 10)

Map Colour parameters (see Charts behaviour)

   GraphColors=
   ;GraphColors=['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
   WindRoseColors=
   ;WindRoseColors=['lightgrey', 'green', 'blue', 'yellow', 'orange', 'red', 'deeppink', 'purple', 'black']

Inner working

Algorithmic

The output files are HTML UTF8 format. All javascript is included in <script> tags so these are not pure javascript libraries. For each output file the javascript menu is written. When finished the Highcharts lib include specifications are written IF the modules are not meant to be used in the CumulusUtils Website Generator which has the specifications by itself.

When menu and includes are ready, all required graphs are generated together with their data. Code generation and data selection is a one pass process.

Defaults, Colours and Language

Defaults

Defaults are taken from the Highcharts theme which is current. See the page for the HighCharts theme.

Colours

NOTE: the colours of the lines in the Website Generator Home page have their own specification, see the Website Generator and Charts Compiler.

A very important thing with the graphs is the Colour selection. For some charts, users can specify colours in multiples ways for other charts no specification is possible. In general for line charts, the user can choose the colour per line, for specific charts like the heatmap no choice is possible. See each chart description for the specification. If any colour specification in reality is not according to this specification, please report as a bug (either in documentation of in software)

Where applicable, use is made of the Highcharts colour specification.

1. A set of default colours can be specified in the parameter section. For the WindRose a specific selection can be specified.
2. When the selection possibility set to empty a fallback is made to the HighCharts theme in use.
3. When no colours are specified in the theme, then the user relies on the implicit Highcharts defaults.

Language

For the Language in the charts the user must make a distinction between the texts CumulusUtils generates for titles, series names and tooltips. Those texts are found in the CUstringsXX.txt file and have to be translated by the user. For Locale specific and ruled translations (like weekdays, months etc...) CumulusUtils generates a file called HighchartsLanguage.js in which names of days, months and abbreviated month names are translated conform the Locale the user specifies. These are set as options to Highcharts and thus will always be in the local language.

This file may also be used for other Locale specific attributes like separators, if so, it will be specified here.

How the parameters work

There is only a limited number of parameters which influence the behaviour and display of the graph. Those parameters are described below:

UseHighchartsBoostModule

For some charts like the scatter (Wind direction) and the heatmap, Highcharts makes use of a boost technique (library: https://code.highcharts.com/modules/boost.js). However this does not work on some browsers on some older graphic cards. If you do not see the chart, please set this parameter to false. It may slow down the drawing of the chart, but you will see it.

UseNormalTempReference

This parameter has effect on the Monthly Temperature chart.

CumulusMX has the possibility to refer to the normal values valid for the location of the weather station. The user has to fill those in the CumulusMX inifile parameter section [NOAA] in the parameters NOAATempNormJan and NOAARainNormJan (for all months). When filled in those values appear in the Monthly Rain and Monthly Temperature graphs. If they are not specified the value -1000 is shown which heavily debalances the chart.

When Normal values are not available, the user may choose to display StationAverage for those charts. StationAverage also displays the unbiased estimator of the variance (standard deviation) around the average of the observations.

When setting the parameter to both the obvious thing happens: both the Normal and the StationAverage are displayed along with the actual observations.

UseNormalRainReference

This parameter has effect on the Monthly Rain chart.

The functional behaviour of this parameter is similar to the above.

MaxNrOfSeriesVisibileInGraph

This parameter has effect in both Monthly Temperature and Monthly Rain.

A high number of series shown can severely clutter the chart. Therefore the user can limit the number of lines initially made visible. When the chart is on screen, the user can click on the legend to show additional charts.

PeriodMovingAverage

This parameter has effect on the Daily Rain chart.

The running average as shown in the Daily Rain chart shows a Simple Moving Average. The period of that moving average - or the number of days in the current value of the moving average - can be set through this parameter.

WindRoseNrOfWindforceClasses & WindRoseMaxWindSpeed

These parameters have effect on the Wind Rose chart.

Because wind differs highly with location and above all also with unit used it is necessary to make a meaningful division of the legend. The WindRoseMaxWindSpeed gives the highest wind speed class. All higher wind speed will be counted as higher the and will not be subdivided. The WindRoseNrOfWindforceClasses gives the number of classes where the winds lower than WindRoseMaxWindSpeed will be subdivided. So if the max wind speed is 60 km/h and the number of classes is 6 you get a class width of 10 km/h. But if you use the same numbers for m/s or mph you get completely different graphs. So it is the unit and the local conditions which determine the numbers you have to use.

A wind silence (Calm, 0 km/h) is an always present class and thus not counted in the calculation as above.

WindRoseInversed

This parameter have effect on the Wind Rose chart.

This parameter determines the order of the legend (and the stacking of the values in the rose).

WindrunClassWidth

This parameter have effect on the Windrun chart.

With the same arguments as with the WindRose chart, the Windrun chart requires some configuration because of unit and local situation. To give the chart meaning a class width which shows but not clutters is best. It is also personal taste which counts.

HeatmapNumberOfYearsPerPage

This parameter has effect on the Heatmap.

The heatmap does get a bit compressed when the series get longer. If more than ten years are available the years are split up in pages and buttons appear to switch between pages or display all data. This has to do with taste. There is also the button All which gives the user the possibility to undo the split.