Welcome to the Cumulus Support forum.

Latest Cumulus MX V3 release 3.28.5 (build 3282) - 23 February 2024

Cumulus MX V4 beta test release 4.0.0 (build 4017) - 17 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

Highcharts background image

Discussion of the Cumulusutils tool and website generator.

Moderator: HansR

Post Reply
AndyKF650
Posts: 701
Joined: Thu 20 Aug 2020 8:35 am
Weather Station: Davis VP2 Plus
Operating System: RPiv4 64bit Linux 12 Bookworm
Location: Jersey Channel Islands
Contact:

Highcharts background image

Post by AndyKF650 »

Hi Hans

As ever my mind has started thinking what if....

The current thought is getting an image as the background to the charts and so far I have managed to get only the plot area of the chart. I would really like to get the image across the whole chart but that is proving rather difficult.

I have set the background color to null but this does not seem to work.

Do you have any thoughts on this? I have attached a copy of the working highchartsDefaults.js file so that you can see where I am at the moment.
You do not have the required permissions to view the files attached to this post.
User avatar
HansR
Posts: 5831
Joined: Sat 20 Oct 2012 6:53 am
Weather Station: GW1100 (WS80/WH40)
Operating System: Raspberry OS/Bullseye
Location: Wagenborgen (NL)
Contact:

Re: Highcharts background image

Post by HansR »

Hi Andy,

Interesting idea. Didn't even know that should be possible.

I think the background colour has nothing to do with it when looking from the chart definition.
It could probably also be done by setting an image as background to the chart container (then you would have to set the chart background colour to null) but the chart container is not accessible to the CUtils user.

As far as I understand it, your setting looks correct but a Highcharts demo fiddle demonstrating this feature does not work.

I'll investigate.
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: 5831
Joined: Sat 20 Oct 2012 6:53 am
Weather Station: GW1100 (WS80/WH40)
Operating System: Raspberry OS/Bullseye
Location: Wagenborgen (NL)
Contact:

Re: Highcharts background image

Post by HansR »

AndyKF650 wrote: Tue 05 Jul 2022 10:49 am and so far I have managed to get only the plot area of the chart
I assume you get the image in the plot area.
Is that visible on your site somewhere?
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: 5831
Joined: Sat 20 Oct 2012 6:53 am
Weather Station: GW1100 (WS80/WH40)
Operating System: Raspberry OS/Bullseye
Location: Wagenborgen (NL)
Contact:

Re: Highcharts background image

Post by HansR »

Hi Andy,

I may have the solution: do you have an add-blocker or other tools which can block content? That solved the issue with me.

I asked Highcharts the question how to solve this a generic way: you can't ask everybody looking at the site to switch off the add blocker.
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: 5831
Joined: Sat 20 Oct 2012 6:53 am
Weather Station: GW1100 (WS80/WH40)
Operating System: Raspberry OS/Bullseye
Location: Wagenborgen (NL)
Contact:

Re: Highcharts background image

Post by HansR »

And even then: you probably want it to be the background to the whole <div> i.e. including the drop down?
Hans

https://meteo-wagenborgen.nl
CMX build 4017+ ● RPi 3B+ ● Raspbian Linux 6.1.21-v7+ armv7l ● dotnet 8.0.3
User avatar
mcrossley
Posts: 12641
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: Highcharts background image

Post by mcrossley »

HansR wrote: Tue 05 Jul 2022 11:39 am As far as I understand it, your setting looks correct but a Highcharts demo fiddle demonstrating this feature does not work.
Works for me, I see a cloud background to the graph.
User avatar
HansR
Posts: 5831
Joined: Sat 20 Oct 2012 6:53 am
Weather Station: GW1100 (WS80/WH40)
Operating System: Raspberry OS/Bullseye
Location: Wagenborgen (NL)
Contact:

Re: Highcharts background image

Post by HansR »

mcrossley wrote: Tue 05 Jul 2022 1:06 pm
HansR wrote: Tue 05 Jul 2022 11:39 am As far as I understand it, your setting looks correct but a Highcharts demo fiddle demonstrating this feature does not work.
Works for me, I see a cloud background to the graph.
Yes, thanks for checking ;)

Apparently the Highcharts image has a tracker in it and my blocker did not let it through.
When I use an image of my own or switch the blocker off it works for me as well.
Hans

https://meteo-wagenborgen.nl
CMX build 4017+ ● RPi 3B+ ● Raspbian Linux 6.1.21-v7+ armv7l ● dotnet 8.0.3
User avatar
mcrossley
Posts: 12641
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: Highcharts background image

Post by mcrossley »

You can change the whole background for a chart by setting the chart fill to none and putting a background on the containing div...
https://jsfiddle.net/3p07qc62/
User avatar
HansR
Posts: 5831
Joined: Sat 20 Oct 2012 6:53 am
Weather Station: GW1100 (WS80/WH40)
Operating System: Raspberry OS/Bullseye
Location: Wagenborgen (NL)
Contact:

Re: Highcharts background image

Post by HansR »

mcrossley wrote: Tue 05 Jul 2022 1:18 pm You can change the whole background for a chart by setting the chart fill to none and putting a background on the containing div...
https://jsfiddle.net/3p07qc62/
Indeed, thanks.
Issue here is that it is no longer something the user can do on his own, CUtils needs to interfere when generating because the user has no access to the container. So that will probably result some kind of parameterizing in Cutils.

@Andy: Mark described the solution when looking at the chart level, which I can put in CUtils. Is that what you want? Or do you wish the image over the whole <div> as I described above.
Hans

https://meteo-wagenborgen.nl
CMX build 4017+ ● RPi 3B+ ● Raspbian Linux 6.1.21-v7+ armv7l ● dotnet 8.0.3
AndyKF650
Posts: 701
Joined: Thu 20 Aug 2020 8:35 am
Weather Station: Davis VP2 Plus
Operating System: RPiv4 64bit Linux 12 Bookworm
Location: Jersey Channel Islands
Contact:

Re: Highcharts background image

Post by AndyKF650 »

Hi Hans

Seems like I am again stretching the envelope!

Yes I was looking for a way to get an image underlying the whole chart/container rather than just the plot area. When I looked at some of the other themes these had the colour over the whole chart area, I have just changed the default to a grey graded background but at the moment I cannot do a screen shot of it????

I wanted to remove the white background for the axis as well as the plot area and not change the background for the whole page. I hope this makes some sense.
User avatar
HansR
Posts: 5831
Joined: Sat 20 Oct 2012 6:53 am
Weather Station: GW1100 (WS80/WH40)
Operating System: Raspberry OS/Bullseye
Location: Wagenborgen (NL)
Contact:

Re: Highcharts background image

Post by HansR »

Hi Andy,

Let's iterate to a solution via PM
Hans

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