Search the Community

Showing results for tags 'style'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Company Forums
    • Company News
  • Product Forums
    • FusionCharts XT
    • FusionWidgets XT
    • PowerCharts XT
    • FusionMaps XT
    • Collabion Charts for SharePoint
    • jQuery Plugin for FusionCharts
    • AngularJS plugin
    • ReactJS plugin
  • General Forums
    • FusionCharts Jobs and Consultation
    • FusionLounge

Found 4 results

  1. 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 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. 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":}] }, "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(); }, }
  2. 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?
  3. 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.
  4. 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>