Default White Background on Chart Container's first child SVG element

[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();
  },

}
 

[Moonmi Sonowal]

Hi,

 

Could you please try out the "containerBackgroundOpacity" attribute element and set it to 0 for a transparent chart.

 

Ref. fiddle: http://jsfiddle.net/moonmi/719fu8st/14/

 

Hope this would resolve your issue. 

[stephenrfrank]

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

[Moonmi Sonowal]

Glad We were able to help you out.