Welcome to the Cumulus Support forum.

Latest Cumulus MX V3 release 3.28.6 (build 3283) - 21 March 2024

Cumulus MX V4 beta test release 4.0.0 (build 4018) - 28 March 2024

Legacy Cumulus 1 release v1.9.4 (build 1099) - 28 November 2014 (a patch is available for 1.9.4 build 1099 that extends the date range of drop-down menus to 2030)

Download the Software (Cumulus MX / Cumulus 1 and other related items) from the Wiki

How to change graph label and colour?

From build 3044 the development baton passed to Mark Crossley. Mark has been responsible for all the Builds since. He has made the code available on GitHub. It is Mark's hope that others will join in this development, but at the very least he welcomes your ideas for future developments (see Cumulus MX Development suggestions).

Moderator: mcrossley

Post Reply
TRB
Posts: 32
Joined: Wed 02 Sep 2020 6:52 am
Weather Station: WA1081
Operating System: Win 7
Location: Melbourne, Australia
Contact:

How to change graph label and colour?

Post by TRB »

After successfully upgrading from 1.9.4 to 3.8.3 I now wish to change the colour of my Temperature graphs.

The Temperature page includes 'Temperature' and 'Inside' graphs. I would prefer these labels to be 'Outside' and 'Inside'.

Also those 2 graphs are coloured blue and red and I want to swap those colours.

I've done a lot of Cumulus file examination but cannot find where graph labels and colours are set.

Any ideas appreciated :)

TRB
Posts: 32
Joined: Wed 02 Sep 2020 6:52 am
Weather Station: WA1081
Operating System: Win 7
Location: Melbourne, Australia
Contact:

Re: How to change graph label and colour?

Post by TRB »

Bump !
User avatar
ConligWX
Posts: 1573
Joined: Mon 19 May 2014 10:45 pm
Weather Station: Davis vPro2+ w/DFARS + AirLink
Operating System: Ubuntu 22.04 LTS
Location: Bangor, NI
Contact:

Re: How to change graph label and colour?

Post by ConligWX »

is this on the internal "Charts" web page or the one for a web server. can you take a screenhot of the page of your graph you want to change and post it here?
Regards Simon

https://www.conligwx.org - @conligwx
Davis Vantage Pro2 Plus with Daytime FARS • WeatherLink Live • Davis AirLink • PurpleAir •

Image
TRB
Posts: 32
Joined: Wed 02 Sep 2020 6:52 am
Weather Station: WA1081
Operating System: Win 7
Location: Melbourne, Australia
Contact:

Re: How to change graph label and colour?

Post by TRB »


Good point Simon :)

To reiterate - and refer to the 2 items circled, I'd like to change the label 'Temperature' to 'Outside' and swap the 2 circled graph colours such that Inside is blue and Outside is red.

To add a reason for this - the red colour is the most prominent graph and outside temp is my greatest interest.

As for labels - 'Temperature' and 'Inside' don't make sense. They are both temperatures but one is inside a house/building and the other is outside, external or maybe ambient?



temp chart.jpg
You do not have the required permissions to view the files attached to this post.
User avatar
ConligWX
Posts: 1573
Joined: Mon 19 May 2014 10:45 pm
Weather Station: Davis vPro2+ w/DFARS + AirLink
Operating System: Ubuntu 22.04 LTS
Location: Bangor, NI
Contact:

Re: How to change graph label and colour?

Post by ConligWX »

the chart is from trends.htm file. open the htm file in notpadd++ and you see whatfiles are called. the titles are in the /js/cumuluscharts.js

since you have only Temperature, Apparent and Inside not sure if you have edited this before now, or its an old version perhaps as I have 6 titled lines on my Temp Trends page.
Capture.JPG
as to colors I guess these will be in a css file somewhere i guess, maybe someone else can chip in with the colour settings location
You do not have the required permissions to view the files attached to this post.
Regards Simon

https://www.conligwx.org - @conligwx
Davis Vantage Pro2 Plus with Daytime FARS • WeatherLink Live • Davis AirLink • PurpleAir •

Image
User avatar
HansR
Posts: 5871
Joined: Sat 20 Oct 2012 6:53 am
Weather Station: GW1100 (WS80/WH40)
Operating System: Raspberry OS/Bullseye
Location: Wagenborgen (NL)
Contact:

Re: How to change graph label and colour?

Post by HansR »

If I remember well - I don't use this website but did a lot with the charts - the colours are taken from the theme grid.js, also in the distribution and I think it is referenced in the initialisation in cumuluscharts.js
Hans

https://meteo-wagenborgen.nl
CMX build 4017+ ● RPi 3B+ ● Raspbian Linux 6.1.21-v7+ armv7l ● dotnet 8.0.3
User avatar
HansR
Posts: 5871
Joined: Sat 20 Oct 2012 6:53 am
Weather Station: GW1100 (WS80/WH40)
Operating System: Raspberry OS/Bullseye
Location: Wagenborgen (NL)
Contact:

Re: How to change graph label and colour?

Post by HansR »

Ah, checked it: in trends.htm at the end of the file you fond the highcharts references (and the cumuluscharts.js reference):

Code: Select all

		<script src="lib/jquery/jquery-latest.min.js"></script>
		<script src="https://code.highcharts.com/stock/8.0/highstock.js"></script>
		<script src="https://code.highcharts.com/8.0/modules/boost.js"></script>
		<script src="https://code.highcharts.com/8.0/themes/grid.js"></script>
		<script src="js/cumuluscharts.js"></script>
You could make your own or modify grid.js and change the colours.
This is a theme from highcharts. Note that theming in version 8 has changed a bit but I think you are OK.
Hans

https://meteo-wagenborgen.nl
CMX build 4017+ ● RPi 3B+ ● Raspbian Linux 6.1.21-v7+ armv7l ● dotnet 8.0.3
TRB
Posts: 32
Joined: Wed 02 Sep 2020 6:52 am
Weather Station: WA1081
Operating System: Win 7
Location: Melbourne, Australia
Contact:

Re: How to change graph label and colour?

Post by TRB »

ConligWX wrote: Fri 11 Sep 2020 6:44 pm the chart is from trends.htm file. open the htm file in notpadd++ and you see whatfiles are called. the titles are in the /js/cumuluscharts.js

since you have only Temperature, Apparent and Inside not sure if you have edited this before now, or its an old version perhaps as I have 6 titled lines on my Temp Trends page.
That looked like a great suggestion Simon :) ... but alas :(

I found and edited the only cumuluscharts.js file that existed but my changes did nothing. I searched on the term 'inside' to find the correct area and found only one instance. A copy of my edit is attached.

As well as editing the local cumuluscharts.js file I uploaded it to my website as Freddie pointed out is essential.

After all of the above I have rebooted CumulusMX.exe several times but the original chart labels remain unchanged :(

Re your 6 titles - I had 6 too but disabled 3 of them in 'Settings' to reduce graph clutter.

You do not have the required permissions to view the files attached to this post.
User avatar
beteljuice
Posts: 3292
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: W10 - Threadripper 16core, etc
Location: Dudley, West Midlands, UK

Re: How to change graph label and colour?

Post by beteljuice »

A link to your web page would be useful ;)
As well as editing the local cumuluscharts.js file I uploaded it to my website as Freddie pointed out is essential.

After all of the above I have rebooted CumulusMX.exe several times but the original chart labels remain unchanged
No need to reboot CuMX - that will make no difference to the operation of the js file.
... but ...
If you are sure you have modified the web version of cumuluscharts.js, it may be that it is held in your browser cache or even a 'cloud' cache.
Try <CTL> + <F5> and see if that makes a difference.
Image
......................Imagine, what you will KNOW tomorrow !
TRB
Posts: 32
Joined: Wed 02 Sep 2020 6:52 am
Weather Station: WA1081
Operating System: Win 7
Location: Melbourne, Australia
Contact:

Re: How to change graph label and colour?

Post by TRB »

beteljuice wrote: Sat 12 Sep 2020 12:29 am No need to reboot CuMX - that will make no difference to the operation of the js file.
... but ...
If you are sure you have modified the web version of cumuluscharts.js, it may be that it is held in your browser cache or even a 'cloud' cache.
Try <CTL> + <F5> and see if that makes a difference.
I figured so, but I rebooted only as an act of desperation.

Yes, definitely edited my web using my regular FTP prog. You are correct though that I forgot about browser caching and that solved the issue, thank you :)

So the new titles work fine :)

As for the advice from Hans on colour changes, I had a yesterday poked around the files he suggested but unable to find any specific links to titles. So colours remain an issue.

Perhaps what makes this all a bit harder for me is my age of 79 and very little exposure to this type of coding :(
User avatar
HansR
Posts: 5871
Joined: Sat 20 Oct 2012 6:53 am
Weather Station: GW1100 (WS80/WH40)
Operating System: Raspberry OS/Bullseye
Location: Wagenborgen (NL)
Contact:

Re: How to change graph label and colour?

Post by HansR »

TRB wrote: Sat 12 Sep 2020 12:49 am As for the advice from Hans on colour changes, I had a yesterday poked around the files he suggested but unable to find any specific links to titles. So colours remain an issue.
In my CMX installation it is on './webfiles/lib/highstock/js/themes/*.*'
But that may be because I started with an older installation.

If you can't find them in your installation, you will have to get the theme(s) from the Highcharts github. As you can see from my previous post, the grid.js file is taken from the Highcharts site itself. You would have to make that file local and modify it to your needs. Modify the reference in trends.htm/trendsT.htm. The trends.htm (trendsT.htm) file is in './web' and that should be there always.

Code: Select all

<script src="https://code.highcharts.com/8.0/themes/grid.js"></script>
Should be modified to:

Code: Select all

<script src="[your URL]/grid.js"></script>
Then modify the colors array in the beginning of the grid.js file (and better leave the rest untouched until you feel more comfortable with the construction).

Code: Select all

colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
Don't remove or add commas or quotes, just modify the hex numbers. You may use HTML color names.
Note these changes can be done and then seen immediately with a [ctrl-]F5 of your page if you experiment directly on the web. To make things permanent you need to change trendsT.htm file which will be processed by CMX.
Hans

https://meteo-wagenborgen.nl
CMX build 4017+ ● RPi 3B+ ● Raspbian Linux 6.1.21-v7+ armv7l ● dotnet 8.0.3
TRB
Posts: 32
Joined: Wed 02 Sep 2020 6:52 am
Weather Station: WA1081
Operating System: Win 7
Location: Melbourne, Australia
Contact:

Re: How to change graph label and colour?

Post by TRB »

HansR wrote: Sat 12 Sep 2020 6:59 am
Then modify the colors array in the beginning of the grid.js file (and better leave the rest untouched until you feel more comfortable with the construction).

Code: Select all

colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
Thank you Hans for going to this trouble :)

Immediately after your first post I investigated and found exactly your Hex line above. So I had a string of colour codes but did not know how they were linked to the various graphs. I determined each colour image by Googling the code.

Are you suggesting that the colours are in some sort of order and applied to the graphs in sequence? I mean if I swap the Hex codes in that line so that the blue position becomes red and red becomes blue will that change the assignment of colours to my red and blue graphs? If so it seems an odd technique.
User avatar
HansR
Posts: 5871
Joined: Sat 20 Oct 2012 6:53 am
Weather Station: GW1100 (WS80/WH40)
Operating System: Raspberry OS/Bullseye
Location: Wagenborgen (NL)
Contact:

Re: How to change graph label and colour?

Post by HansR »

The colours are taken by Highcharts on an as needed basis from the array in the order it finds them and rotates when at the end.
So if you switch off some lines the colour of e.g. Feels Like will change.

To actually give a line a fixed colour requires a different setup of the graphs themselves and a parametrisation of the colours of the lines per line. You can do that by hard coding the colours in the graph. Requires some knowledge of Highcharts. Parametrisation requires a different approach, I did that in CumulusUtils but it is not trivial.

Odd is quite a subjective judgement ;)
In my view it is a very flexible technique of using defaults, it is just the way the default CumulusMX website and graphing handles the colours without specifics for lines.
That's life.
Hans

https://meteo-wagenborgen.nl
CMX build 4017+ ● RPi 3B+ ● Raspbian Linux 6.1.21-v7+ armv7l ● dotnet 8.0.3
TRB
Posts: 32
Joined: Wed 02 Sep 2020 6:52 am
Weather Station: WA1081
Operating System: Win 7
Location: Melbourne, Australia
Contact:

Re: How to change graph label and colour?

Post by TRB »

Hans,

I tried swapping the order of 2 of the Hex colour codes, but without effect.

Next I changed all to the same colour and still no effect. The graphs all retain their correct original colours :(
User avatar
HansR
Posts: 5871
Joined: Sat 20 Oct 2012 6:53 am
Weather Station: GW1100 (WS80/WH40)
Operating System: Raspberry OS/Bullseye
Location: Wagenborgen (NL)
Contact:

Re: How to change graph label and colour?

Post by HansR »

TRB wrote: Sat 12 Sep 2020 9:48 am Hans,

I tried swapping the order of 2 of the Hex colour codes, but without effect.

Next I changed all to the same colour and still no effect. The graphs all retain their correct original colours :(
I see. Well, as Beteljuice wrote:
beteljuice wrote: Sat 12 Sep 2020 12:29 am A link to your web page would be useful ;)
As this gets deeper, we are watching blindfolded to what you have. So please post the link.
No guarantee, but at least we can see the code you are dealing with.

First guess: is the file, which you are modifying, really the file Highcharts is using as the source for its colours?
In other words: are the references in your trends.htm page correct?
Hans

https://meteo-wagenborgen.nl
CMX build 4017+ ● RPi 3B+ ● Raspbian Linux 6.1.21-v7+ armv7l ● dotnet 8.0.3
Post Reply