Search the Community

Hi Can I create a custom pin (using image or svg) and show it in a specific value?

Is there an option to use the zoomline chart with gradients? same as in the attached image?

How can I change my bar width? I can't find it anywhere... I want to make it thinner Thanks

Can I design my bar chart with different gradient colors for each bar? for example: the first bar will be a gradient of red & white and second, will be purple & blue? In my chart, I managed to create gradients but it didn't let me give the second bar different colors Thanks

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

Hey guys, I have a probolem with the FusionMaps flash version. I customised the map, but upon loading, the map first loads with somekind of defult style, and then after maybe a split second it becomes to the correct customised version. Is there a way to listen for when the map is loaded and only then to display it?

Hi, I would like to create labels on pie charts that correspond to the color of their slice. So if the slice is blue, the font should be blue. This will allow me to not have to show the lines that connect the label to the pie. Is this possible? Right now I see that I can only apply one color to a set of labels.

Hi, When I try to align the caption in a chart, it works fine in flash, but in javascript, the alignment does not get applied and it is always centered. Is there some other parameter I need? Here's an example: -<graph enableRotation="1" showValues="1" smartLabelClearance="" enableSmartlabels="1" pieRadius="" plotFillAlpha="100" imageSaveURL="rdTemplate/rdAnimatedChart/FCExporter.aspx" imageSave="1" showBorder="0" chartBottomMargin="" chartTopMargin="" chartRightMargin="" chartLeftMargin="" numberPrefix="" showLabels="1" bgColor="ffffff" Caption="Sales By Category" animation="1" showFCMenuItem="0" unescapeLinks="0">-<styles>-<definition><style type="font" bold="0" color="5b5b5b" size="15" font="Helvetica" name="DataLabelsFontStyle"/><style type="font" bold="1" color="5b5b5b" size="24" font="Helvetica" name="CAPTIONFontStyle" align="left"/></definition>-<application><apply styles="DataLabelsFontStyle" toObject="DataLabels"/><apply styles="CAPTIONFontStyle" toObject="CAPTION"/></application></styles><set color="00558e" name="Beverages" hoverText="" value="103924.3100"/><set color="e54c25" name="Condiments" hoverText="" value="55368.6000"/><set color="84986b" name="Confections" hoverText="" value="82657.7300"/><set color="8f72aa" name="Dairy Products" hoverText="" value="115387.6500"/><set color="e59138" name="Grains/Cereals" hoverText="" value="56871.8200"/><set color="00558e" name="Meat/Poultry" hoverText="" value="80975.1200"/><set color="e54c25" name="Produce" hoverText="" value="54940.7600"/><set color="84986b" name="Seafood" hoverText="" value="66959.2100"/></graph>