Search the Community

Hello. How can I set transparent background color for angular gauge chart ? I set containerBackgroundOpacity: "0", but it isn't work. I remove bgColor for chart, but that doesn't help either. type: "angulargauge", renderAt: "chart-container", width: "100%", height: "100%", containerBackgroundOpacity: "0", Background color always stay white color. How can I fix that ?

Could you please tell me how to create a FusionCharts chart with transparent background? I tried several documented background property combinations without luck... For comparison, the following chart shows whatever background color finds behind the pie: http://jsfiddle.net/cristiscu/ejuq0x10/2/ Thank you so much, Cristian

I started seeing this in Firefox version 49.0.1, and am now also seeing it in 49.0.2. The Flash chart backgrounds are not transparent. I've attached screenshots of how our charts look on both Firefox and Chrome. Flash version is 23.0.0.185. Know what might be causing this? Thanks, Emilio

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

Hi. Is it possible change the background or subcaption in real-time chart?