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.

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 ?

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