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
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?
Moderator: mcrossley
-
- 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?
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
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
- 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?
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 •
https://www.conligwx.org - @conligwx
Davis Vantage Pro2 Plus with Daytime FARS • WeatherLink Live • Davis AirLink • PurpleAir •
-
- 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?
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?
You do not have the required permissions to view the files attached to this post.
- 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?
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.
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
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.
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 •
https://www.conligwx.org - @conligwx
Davis Vantage Pro2 Plus with Daytime FARS • WeatherLink Live • Davis AirLink • PurpleAir •
- 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?
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
https://meteo-wagenborgen.nl
CMX build 4017+ ● RPi 3B+ ● Raspbian Linux 6.1.21-v7+ armv7l ● dotnet 8.0.3
- 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?
Ah, checked it: in trends.htm at the end of the file you fond the highcharts references (and the cumuluscharts.js reference):
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.
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>
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
https://meteo-wagenborgen.nl
CMX build 4017+ ● RPi 3B+ ● Raspbian Linux 6.1.21-v7+ armv7l ● dotnet 8.0.3
-
- 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?
That looked like a great suggestion Simon ... but alasConligWX 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.
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.
- 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?
A link to your web page would be useful
... 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.
No need to reboot CuMX - that will make no difference to the operation of the js file.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
... 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.
......................Imagine, what you will KNOW tomorrow !
-
- 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?
I figured so, but I rebooted only as an act of desperation.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.
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
- 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?
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>
Code: Select all
<script src="[your URL]/grid.js"></script>
Code: Select all
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
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
https://meteo-wagenborgen.nl
CMX build 4017+ ● RPi 3B+ ● Raspbian Linux 6.1.21-v7+ armv7l ● dotnet 8.0.3
-
- 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?
Thank you Hans for going to this troubleHansR 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']
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.
- 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?
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.
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
https://meteo-wagenborgen.nl
CMX build 4017+ ● RPi 3B+ ● Raspbian Linux 6.1.21-v7+ armv7l ● dotnet 8.0.3
-
- 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?
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 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
- 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?
I see. Well, as Beteljuice wrote:
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
https://meteo-wagenborgen.nl
CMX build 4017+ ● RPi 3B+ ● Raspbian Linux 6.1.21-v7+ armv7l ● dotnet 8.0.3