stephenrfrank

I am having a problem that is causing me to pull my hair out. I am trying to allow the background of the chart to be transparent. I have set the "canvasBgAlpha", "legendBgAlpha", and "bgAlpha" all to "0" in the javascript code in all types of combinations. However, no matter the combination, there is always a white background. So to try to figure this out, I inspected the html and css and found that there is an "SVG" element as the first child of the chart container "SPAN" element that is created upon rendering. This "SVG" element has an id of "raphael-paper-0" and it has a background-color of "rgb(255,255,255,1)". When I disable the background color on this element, the background is totally transparent and the background-image of my chart's parent element comes through. However, there doesn't seem to be any way for me to make this happen in the code and I don't want to go search for each "raphael-paper" element id to change this. In addition I inspected the html structure in the dashboard examples, specficially the angular gauges in http://www.fusioncharts.com/dashboards/energy-consumption-dashboard/. The angular gauges in this example have first-child "SVG" elements with a "background-color:transparent" css style. What's up with this? How do I get my chart's parent element background image to come through a transparent chart. Here is my pages code and a custom class structure that stores some default values and merges the objects to create a chart. Note: The chart is created within a jQuery ajax call to retreive stored data from a database. Does the fact that I am using jQuery have an impact as I did find some informaiton about a property called wMode with the fusion charts jQuery plugin. http://forum.fusioncharts.com/topic/13779-transparent-background/ PAGE CODE===================================== var loading = new loadImg(false); var lifePlanCharts = {}; $(document).ready(function() { var ajaxRtrn = $.ajax({ url : "XXXXXX", dataType : "json", async : true, beforeSend : function() { loading.createInstance(); }, complete : function() { loading.destroyInstance(); var riskTolRtrn = jQuery.parseJSON(ajaxRtrn.responseText); lifePlanCharts["riskTolWidget"] = new uniChart({ chartContainer : {element : document.getElementById("riskTolChartContainer_Div_ID"), size : {height:200,width:200}}, chartData : { "dials": { "dial": [{"value": riskTolRtrn.total}] }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "20", "code": "C8C9CD" }, { "minValue": "20", "maxValue": "40", "code": "#7E7F8F" }, { "minValue": "40", "maxValue": "60", "code": "#52536A" }, { "minValue": "60", "maxValue": "80", "code": "#54363C" }, { "minValue": "80", "maxValue": "100", "code": "#4F1522" } ] } }, chartParent : document.getElementById("lifePlanReport_Div_ID"), chartProperties : { "showValue":1, "showBorder":0, "logoScale":"75", "gaugeFillMix":"{dark-30},{light-60},{dark-10}", "gaugeFillRatio":"15", "majorTMNumber":"6", "minorTMNumber":"1", "bgColor":"#4F1522", "bgAlpha":"0", "canvasBgColor":"#4F1522", "canvasBgAlpha":"0", "legendBgAlpha":"0" }, chartTitle : "Your Risk Tolerance Score", chartType : "angulargauge", chartVar : "riskTolWidget", chartWindow : {element : document.getElementById("riskTolChartWindow_Div_ID")} }, true); } }); }); CUSTOM CLASS=============================== function uniChart(input, generate) { generate = (typeof(generate) === "undefined") ? false : (!generate) ? false : true; //Set up default variables var defaults = { chartContainer : { element : false, size : false }, chartData : {}, chartInput : false, chartObj : {}, chartParent : false, chartProperties : { "logoURL":"XXXXXXXX" "logoAlpha":"10", "logoScale":"100", "logoPosition":"CC", "showValues":0, "theme":"fint" }, chartTitle : false, chartType : false, chartVar : false,//The variable that will be used to store the chart in the global chartObjs object chartWindow : { element : false, location : false } } //create opt object to deeply (all child objects included) extend the defaults with the input options var opt = $.extend(true, defaults, input); //Check to make sure that a chartVar and chartType are available and of proper format if(!opt.chartVar || !opt.chartType || !opt.chartContainer.element || !opt.chartParent) { alert("The required data was not present. Unable to create chart. uniChart.00"); return false; } //Set all opt elements as class properties /*console.log(opt);*/ for(var o in opt) { this[o] = opt[o]; } if(this.chartWindow.location) { $(this.chartWindow.element).offset(this.chartWindow.location); } if(this.chartContainer.size) { $(this.chartContainer.element).height(this.chartContainer.size.height); $(this.chartContainer.element).width(this.chartContainer.size.width); } if(generate) this.genChart(); } //----- uniChart.prototype = { genChart : function() { /*console.log(this);*/ this.chartData.chart = $.extend(true, this.chartData.chart, this.chartProperties); this.chartObj[this.chartVar] = new FusionCharts({ "type" : this.chartType, "id" : this.chartVar + "_Chart_ID", "dataFormat" : "json", "dataSource" : this.chartData, "renderAt" : this.chartContainer.element, "width" : "100%", "height" : "100%" }); this.chartObj[this.chartVar].render(); }, }

That worked. Thank you so much for thiw quick turn around. I appreciate your help.