Time for action — setting currency notes as the chart background
- Create a copy of
ChartBackground.htmlandChartBackground.xml, and rename them toImageBackground.htmlandImageBackground.xmlrespectively. Also make the change in XML data URL. - Change the chart type to
Column2D.swfinImageBackground.htmlusing the following line of code:var myChart = new FusionCharts("../FusionCharts/Column2D.swf", "myChartId", "400", "300", "0", "1" ); - Find a nice background image with currency notes. You can either search for an image shared under the Creative Commons license at http://search.creativecommons.org/ or use the beautiful image at http://www.flickr.com/photos/amagill/3367543296/sizes/z/in/photostream/. Save it as
money.jpgin theCustomizingChartsfolder. - Add the attribute
canvasbgAlpha='0'to the<chart>element, and removebgColor='CCCCCC'. - Add the attributes
bgImage='money.jpg' bgImageAlpha='30' bgImageDisplayMode='fit'. - Open
ImageBackground.htmlin a browser to see money sprayed behind the revenue figures in the chart, as shown in the following screenshot:
What just happened?
We changed the chart type to the 2D Column chart as it brings out the background image much better. In a 3D chart, the canvas would come in the way of the image and removing the canvas is not an option as that would leave the columns hanging in thin air. After finding a nice image to go with the chart, we removed the background color of the chart and made the canvas of the chart transparent to get a full view of the currency notes.
To add a background image, all we had to do was specify the relative path of the image to the bgImage attribute. Due to security restrictions, your image file has to reside on the same sub-domain as the chart file and a relative path to it has to be specified. Thereafter, we reduced the transparency of the image using bgImageAlpha so that it did not hinder the comprehensibility of the chart. Finally, to get the image to fit proportionately on the entire chart, we set bgImageDisplayMode to fit. There are other modes that you can select from as well: Stretch, Tile, Fill, and Center. You can either pick any of these modes or manually set the scaling and alignment of the images using the attributes discussed at www.fusioncharts.com/docs | Quick Chart Configuration | Chart Border & Background.