Graphs - Transparent Background

[Big Daddy]

Hi Everyone,
Does anybody know if there is a way, either internally or externally to have the Cumulus graphs with a transparent background.

I currently have my website which is based on a "shed" design. I am currently playing with a new design and would like to run both designs as independant sites.

Currently I have the graphs produced by Cumulus with a gradient brownish background to fit in with my shed design. My new design is a "cloud" design and ideally need a blueish / white background for my graphs but obviously I cant have both. I thought with a transparent background I could add a suitable background into the <div> on my web page and then have the graph just sit on top.

Would be grateful for any suggestions.

Thanks
Andy

[steve]

It's not possible via Cumulus, and I'd be surprised if it was possible to do it after the image had been created, because the background isn't a separate layer. I suspect the only way to do it would be to create the graphs by some other method, e.g. using Highcharts, D3.js etc.

[mcrossley]

If you set the graph background to some unique solid colour within the graph, then you could use a command line program such as ImageMagik to convert that colour to transparent.

Using 'white'...
convert input.png -transparent white output.png

and with a bit of anti-aliasing on the transparency...
convert input.png -fuzz 2% -transparent white output.png

Not tried it, but it should work!

[Big Daddy]

Thanks for the suggestions but I am a total novice in these kinds of things. I will take a look at what you suggest and see wht I can work out.

Appreciate your response.

Andy

[steve]

I've had a look at the code and it looks like it might be quite easy to have a transparent background option for the saved graph images, as there is with the gauge images. It works in basically the same way as the method Mark suggested; when it saves the .png file, it sets one of the colours to transparent. You would have to be using a single colour background for the graphs in Cumulus, obviously.

I might have a break from writing Cumulus 3 and sneak a couple of small changes into the current version, including this.

Edit: I've tested it and it appears to work, so I'll go ahead and add it as an option. It's not quite perfect, though, there is 'half a frame' thing going on around it that doesn't get removed:

2014-11-28 10_15_52-Sanday weather.png

[steve]

I've just uploaded 1.9.4 build 1099 which has this option included.

[Big Daddy]

Steve,
That is excellent and thank you for taking the time to look at this so quickly.

Really appreciate your help.

Andy

[steve]

It was an easy change, and besides, I have to do something on my day off

[Big Daddy]

Hi Steve,
Downloaded and have it running. BRILLIANT!!!

Havent tested it on both sites yet as need to make a few changes to my layouts and add some backgrounds but so far transparent graphs are being sent.

A couple of pointers to others who may decide to use this new feature.

1) Whichever solid colour you use is used for the gridlines so if you pick out red as your solid colour then you get red gridlines.
2) Ensure you pick a colour which is not already being used as one of your chart data lines or it will not show.
3) if you use Black as your colour for the solid backgraound, as I did wanting black gridlines, the axis data points will not show

Thanks Again

Andy

[steve]

1) Whichever solid colour you use is used for the gridlines so if you pick out red as your solid colour then you get red gridlines.

That wasn't intentional, and I don't know why it happens. I hadn't noticed as it wasn't obvious with the colour I was using, it doesn't seem to happen with some colours. Possibly something to do with anti-aliasing.

[Big Daddy]

Steve,
Not a problem, works well for me.

Just another tip for others. I found that when using a chart line width of 1 in the settings that when you had a horizontal data line which ran along a horizontal gridline then it tended to blend in so couldnt easily be seen. I have set mine to a value of 2 using the Configuration - Display - Chart Line Width setting.

First site is working ok with just a plain background http://www.midlifedad.me.uk/weather/trends.php

Andy