Search the Community

Hello, I'm using AngularGauge and I need add animation for value, when it more then current value. Have a FusionChart this option ? Addition animation some part of chart. Thank, you.

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 ?

Hello. I have a AngularGauge chart with Vue.js. I configure gauge for dynamic resizing, like in manual. Code of my component: ``` <template> <div id="chart-container"> <fusioncharts :type="type" :width="width" :height="height" :data-format="dataFormat" :data-source="chartData" > </fusioncharts> </div> </template> <script> import { mapState } from "vuex"; export default { name: "AngularGauge", props: { dataValue: String, title: String, colorRange: Object }, computed: { ...mapState({ switchedTheme: state => state.switchedTheme }), chartData() { return { chart: { manageResize: "1", captionFont: "Roboto-Light", captionFontColor: this.switchedTheme ? "#262626" : "#ffffff", captionFontSize: "20", captionFontBold: "0", bgColor: this.switchedTheme ? "#ffffff" : "#262626", usePlotGradientColor: "1", pivotFillAlpha: "0", pivotBorderAlpha: "0", valueFont: "Roboto-Regular", valueFontSize: "40rem", valueFontColor: "#3F903E", valueBorderRadius: "3", valuePadding: "10", lowerLimit: this.colorRange.minRangeValue, upperLimit: this.colorRange.maxRangeValue, lowerLimitDisplay: this.colorRange.minRangeValue, upperLimitDisplay: this.colorRange.maxRangeValue, showValue: this.dataValue, valueBelowPivot: "1", theme: "fusion" }, colorRange: { color: [ { minvalue: this.colorRange.low.minvalue, maxvalue: this.colorRange.low.maxvalue, code: "#3B953A" }, { minValue: this.colorRange.middle.minvalue, maxValue: this.colorRange.middle.maxvalue, code: "#E3A402" }, { minValue: this.colorRange.max.minvalue, maxValue: this.colorRange.max.maxvalue, code: "#C22424" } ] }, dials: { dial: [ { radius: 165, baseWidth: 145, baseRadius: 25, topWidth: 1, rearExtension: 0, value: this.dataValue, valueY: 213, bgColor: this.switchedTheme ? "#006FBA" : "#793DC0" }, { radius: 132, baseWidth: 148, bgColor: this.switchedTheme ? "#ffffff" : "#262626", borderAlpha: 0, baseRadius: 25, topWidth: 40, rearExtension: 2, value: this.dataValue, showValue: "0" } ] }, annotations: { origw: 500, origh: 272, autoscale: "1" } }; } }, data() { return { type: "angulargauge", renderAt: "chart-container", width: "100%", height: "100%", dataFormat: "json" }; } }; </script> <style> #chart-container { position: relative; width: 100%; height: 100%; } </style> ``` I added width and height for component in percents. And added menageResize: "1", autoScale: "1". But when I resize a page, AngularGauge only change your width. Height didn't change at all. In console I have this errors: ``` fusioncharts.js?8f68:13 Error: <path> attribute d: Expected number, "MNaN,NaNQ0,0,NaN,…". e._setFillAndStroke @ fusioncharts.js?8f68:13 ``` How can I fix this problem ?

Hi I am trying to clone an AngularGauge chart, but having a problem setting the chart caption. I have tried var clonedChart = Guage1.clone({ renderAt: 'New_Id', chart: { caption: 'New Caption' } }, true); FusionCharts v3.11.2 Regards Mark

I'm using AngularGauge.swf and ASP.net (VB.net) to create a simple meter board. Here is my source code (code behind) strXML= File.ReadAllText(Server.MapPath("~") & "\Chart\AngularGauge.txt") Literal1.Text = FusionCharts.RenderChart("FusionCharts/AngularGauge.swf", "", strXML, "mygraph1", "700", "320", False, True) AngularGauge.txt content: <chart lowerLimit="0" upperLimit="100" lowerLimitDisplay="Bad" upperLimitDisplay="Good" numberSuffix="%" showValue="1"> <colorRange> <color minValue="0" maxValue="75" code="FF654F"/> <color minValue="75" maxValue="90" code="F6BD0F"/> <color minValue="90" maxValue="100" code="8BBA00"/> </colorRange> <dials> <dial value="92"/> </dials> </chart> When I run in Google Chrome, it does show anything and I debug the page (F12) and the AngularGauge show as below: var chart_mygraph1 = new FusionCharts("FusionCharts/AngularGauge.swf", "mygraph1", "750", "680", "0", "1"); chart_mygraph1.setDataXML("<chart lowerLimit="0" upperLimit="100" lowerLimitDisplay="Bad" upperLimitDisplay="Good" numberSuffix="%" showValue="1"> <colorRange> <color minValue="0" maxValue="75" code="FF654F"/> <color minValue="75" maxValue="90" code="F6BD0F"/> <color minValue="90" maxValue="100" code="8BBA00"/> </colorRange> <dials> <dial value="92"/> </dials> </chart>"); chart_mygraph1.render("mygraph1Div"); ?? I thought this will use the Literal1?? Does this need to include theme as well?

Hi! I would like your help I'm trying to get a circle in the end of the dial (between the angular gauge radius), can someone give me a tip how i can accomplish that ? I was trying to do it with annotations but its hard to establish the (x,y) needed for the center. Thanks, Luis Bessa

hi, i am trying to use following example : http://jsfiddle.net/fusioncharts/XhdN4/ but when i use same code in my application i am getting output something like this : https://www.dropbox.com/s/0lzri18wjbgloah/UNI%20PLEX%20%20%20.png?dl=0 when i looked at console i am getting following errors : Error: Invalid value for <path> attribute d="L288.5401766446414,96.4598233553586Z" Error: Invalid value for <path> attribute d="L162.35,4Z" can anybody guide on right path? Thanks in advance.

I have a little problem width AngularGauge and markerToolText width javascript (works fine in flash mode) see screenshot , the only thing beetween the two graph is that i had : markerToolText='toto' in <point> markertooltext works in flash, i see the tooltext but i think it's crash angulargauge

Hello, I'am using AngularGauge and the option refreshInstantly works perfectly when the render is flash, but that doesn't work with javascript. So, i have to wait the refreshInterval to see the gauge moving Here is the code : {"chart":{"dataStreamURL":"http:\/\/127.0.0.1\/portail-dev\/datasource\/SupervisionJaugeGES-data.php?type_jauge=","refreshInterval":30,"bgcolor":"AEC0CA,FFFFFF","refreshInstantly":"1","showValue":"1","fillAngle":"45","lowerLimit":"0","upperLimit":"100","majorTMNumber":"0","majorTMHeight":"10","showGaugeBorder":"1","gaugeBorderAlpha":"100","gaugeInnerRadius":"65","gaugeOuterRadius":"85","gaugeOriginX":"90","gaugeOriginY":"115","formatNumberScale":"1","tickMarkDecimalPrecision":"1","pivotRadius":"9","showPivotBorder":"1","pivotBorderColor":"000000","pivotBorderThickness":"1","pivotFillMix":"FFFFFF,000000","showlimits":"0","upperLimitDisplay":"OK","lowerLimitDisplay":"NOK","manageResize":"1"},"colorRange":{"color":[{"minValue":0,"maxValue":80,"code":"B41527"},{"minValue":80,"maxValue":90,"code":"E48739"},{"minValue":90,"maxValue":100,"code":"399E38"}]},"dials":{"dial":[{"value":"0","borderAlpha":"100","borderColor":"000000","bgColor":"00FF00","baseWidth":"10","topWidth":"1","radius":"85","rearExtension":"20","borderThickness":"1","toolText":"Taux d appels OK","valueX":"70","valueY":"65"},{"value":"0","borderAlpha":"100","borderColor":"000000","bgColor":"FF8000","baseWidth":"10","topWidth":"1","radius":"85","rearExtension":"20","borderThickness":"1","toolText":"Taux d appels en erreur Fonctionnelle","valueX":"70","valueY":"85"},{"value":"0","borderAlpha":"100","borderColor":"000000","bgColor":"FF0000","baseWidth":"10","topWidth":"1","radius":"85","rearExtension":"20","borderThickness":"1","toolText":"Taux d appels en erreur Technique","valueX":"110","valueY":"65"},{"value":"0","borderAlpha":"100","borderColor":"000000","bgColor":"0000FF","baseWidth":"10","topWidth":"1","radius":"85","rearExtension":"20","borderThickness":"1","toolText":"Taux d appels OK de plus de 20 secondes","valueX":"110","valueY":"85"}]},"annotations":{"annotationGroup":{"annotation":{"type":"text","label":null,"font":"Verdana","xPos":"90","yPos":"20","halign":"middle","valign":"top","fontcolor":"333333","fontSize":"10","isBold":"1"}}},"styles":{"definition":{"style":{"type":"font","name":"myValueFont","bgColor":"F1F1F1","borderColor":"999999"}},"application":{"apply":{"toObject":"Value","styles":"myValueFont"}}}} Bug ?