AngularGauge design with Ajax issue

[shyam]

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.

Edited December 31, 2014 by shyam

[Vishalika]

Hi,

 

Can you please share a scaled down sample with your Ajax implementation part so that we can replicate it from our end?

 

Also, try to upgrade the version of FusionCharts with the latest release of FusionCharts v3.5.1. To download the Evaluation version of FusionCharts Suite XT v3.5.1, please visit the link: http://www.fusioncharts.com/download/

 

Awaiting response.

[shyam]

uuuummmmm scaling down. It's going to take time. What I have done is bind the angular gauge in a datalist

<asp:DataList RepeatColumns="4" ItemStyle-CssClass="itemGauge" EditItemStyle-HorizontalAlign="Center" Width="100%" runat="server" ID="speedoList" CellPadding="2" CellSpacing="2">

                                        <ItemTemplate>

                                          <asp:Literal ID="AngularGauge" runat="server"></asp:Literal>       

                                          </ItemTemplate>    

                                    </asp:DataList>

And the said structure is embedded inside an update panel. That's all I can say for now.

[shyam]

this issue is killing me!!!!!!!!!!!!!!

[shyam]

Got it rectified. Hide show of a div was causing the issue. Thanks anyway.

[Sanjukta]

Got it rectified. Hide show of a div was causing the issue. Thanks anyway.

Hi,

 

The issue might be caused due to the hidden div as the chart is unable to render itself correctly and hence shows discrepancies which are not shown otherwise.

 

Glad that your issue is resolved. Happy FusionCharting!