How to change graph label and colour?

[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]

Bump !

[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?

[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

[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

[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

[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.

[TRB]

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.

[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.

[TRB]

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

[HansR]

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.

[TRB]

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.

[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.

[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

[HansR]

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:

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?