Search the Community

Hello, this angular gauge here: basics of angular gauge or jsFiddle example have 5 major tick marks. It is possible to configure the major tick marks without the value of 25 in this fiddle for example (jsFiddle example), but the other major tick marks stay at their positions? At the upperLimit or lowerLimit there are the posibility to set "upperLimitDisplay": " ", Maybe also for one of the other major tick marks is it possible to set an empty value?

In the manual an example is provided for the usage of an HTML table as a datasource for a mscolumn2d type of chart. Is it possible to have an HTMLtable as the datasource for an angular gauge? How should the HTML table look like for the angular gauge? The gauge is drawed but how to set the colorRange and dial values? Thanks for any help, Erwin

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 Team, The angular gauge is acting little bit strange and I could not figure out why is it happening. On first page load it seems ok(only issue value overload which manageValueOverlapping='1' didn't help). But on reloading the ajax enabled portion the position of the tick value get corrupt. Please have a look into attachment for better understanding. My aspx page use Ajax which I feel is the only reason for the behavior. Also below here is my xml. <chart manageresize='1' bgcolor='FFFFFF' upperlimit='' lowerlimit='0' basefontcolor='fff' majorTMNumber='12' minorTMNumber='3' adjustTM='1' numberSuffix='%' tickValueDistance='2' manageValueOverlapping='1' autoAlignTickValues='1' showValue='1' majortmcolor='FFFFFF' minortmcolor='FFFFFF' minortmheight='3' tooltipbordercolor='FFFFFF' tooltipbgcolor='333333' gaugeouterradius='85' gaugestartangle='225' gaugeendangle='-45' placevaluesinside='1' gaugeinnerradius='90%' annrenderdelay='0' gaugefillmix='' placeTicksInside='1' pivotradius='10' showpivotborder='0' pivotfillmix='{CCCCCC},{333333}' pivotfillratio='50,50' showshadow='0' gaugeoriginx='120' gaugeoriginy='120' showborder='0'><colorRange><color minValue='0' maxValue='21.59' code='8BBA00'/><color minValue='21.59' maxValue='23.75' code='F6BD0F'/><color minValue='23.75' maxValue='42.75' code='FF654F'/></colorRange><dials><dial value='21.59' rearExtension='10'/></dials><annotations><annotationgroup x='120' y='120' showbelow='1'><annotation type='circle' x='0' y='0' radius='115' fillcolor='CCCCCC,111111' fillpattern='linear' fillalpha='100,100' fillratio='50,50' fillangle='-45' /><annotation type='circle' x='0' y='0' radius='100' fillcolor='111111,cccccc' fillpattern='linear' fillalpha='100,100' fillratio='50,50' fillangle='-45' /><annotation type='circle' x='0' y='0' radius='90' color='666666' /></annotationgroup></annotations></chart> liAngularGauge.Text = FusionCharts.RenderChart("Charts/AngularGauge.swf", "", vXML.ToString(), ChartId, "750", "680", false, true); Guys I need help.

Hello, When a value is beyond the max limit, I want the gauge tick to be at the maximum limit . Is this possible using the Angular Gauge ? Thanks

Hi, I'm using an angular gauge which is updated in real-time with values received from the server. If the upper limit of the gauge is currently 200, and I receive a value of 250, then I want to increase the upper limit of the gauge to something slightly larger than 250 before displaying this new value. My effort at implementing this is shown below: chart.addEventListener("RealtimeUpdateComplete", function (event, parameter) { var newValue = event.sender.getData(1); var currentUpperLimit = parseInt(chart.getChartAttribute("upperLimit")); if (newValue > currentUpperLimit) { var newUpperLimit = newValue * 1.2; chartRef.setChartAttribute("upperLimit", newUpperLimit); chartRef.setChartAttribute("upperLimitDisplay", newUpperLimit); } } ); This seemed to be the right approach, however when a value is received from the server which is larger than the upper limit of the gauge, the variable newValue is always set to 0. Strangely, this variable is set correctly when the value received is lower than the gauge's upper limit. Is there another way to change the upper limit of the gauge at runtime so that it always exceeds the current value of the gauge?