Sign in to follow this  
Followers 0
ww1711

Fusionchart In Asp:updatepanel

By ww1711, in FusionCharts and ASP.NET

Recommended Posts

ww1711   

ww1711
Posted

Howdy,

 

I'm trying to render a chart in an asp:UpdatePanel and I'm having an issue doing so.

 

There are two methods that I've tried using: (LIT1 is an asp:Literal runat=server)

Please keep in mind that I'm doing this in the .aspx not the code behind aspx.vb

 

1) LIT1.Text = InfoSoftGlobal.FusionCharts.RenderChart("../_FusionCharts/Column3D.swf","",strXML.ToString(),"Efficiency","350","250",False,False)

2) LIT1.Text = InfoSoftGlobal.FusionCharts.RenderChartHTML("../_FusionCharts/Column3D.swf","",strXML.ToString(),"Efficiency","350","250",False,False)

 

Number one goes through the code and renders a blank div with "Chart." present (no swf file at all)

 

Number two goes through the code and render the swf with a message stating "Invalid XML data"

 

I know for a fact that the XML data is not invalid because it's the same string I use when rendering the chart normally (in a div with a javascript code block (ex: var MyChart....))

 

Can anyone shed some light on why this is happening?

 

Here is what is trying to load into LIT1.Text:

<!-- START Code Block for Chart Efficiency -->
<object  id="Efficiency" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="250" width="366" codebase="[url="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"]http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0[/url]" >

<param name="movie" value="../_FusionCharts/Column3D.swf">
<param name="FlashVars" value="&registerWithJS=1&chartHeight=250&DOMId=Efficiency&dataXML=<chart palette='2' caption='Productivity' baseFontColor='000000' showCanvasBg='0' showValues='0' chartNoDataText='Coming Soon!' legendNumColumns='2' forceYAxisValueDecimals='1' forceYAxisValueDecimals='1' yAxisValueDecimals='0' decimals='0' exportEnabled='1' exportAtClient='0' exportAction='download' exportHandler='../CPD/FCExporter.aspx' exportFormats='JPG=Export as JPEG' exportFileName='Productivity-12-1-2011_9-02-59_AM' subCaption='KPI Production Time ÷ Production Time' exportDialogColor='e1f5ff' exportDialogBorderColor='0372ab' YAxisMinValue='62.4607721732812' exportDialogFontColor='0372ab' exportDialogPBColor='0372ab' ><set value='71.46' color='FF0000' toolText = ' 71.46% ' name='11/1' /><set value='71.13' color='FF0000' toolText = ' 71.13% ' name='11/2' /><set value='68.13' color='FF0000' toolText = ' 68.13% ' name='11/3' /><set value='66.35' color='FF0000' toolText = ' 66.35% ' name='11/4' /><set value='70.50' color='FF0000' toolText = ' 70.50% ' name='11/7' /><set value='68.24' color='FF0000' toolText = ' 68.24% ' name='11/8' /><set value='69.89' color='FF0000' toolText = ' 69.89% ' name='11/9' /><set value='69.39' color='FF0000' toolText = ' 69.39% ' name='11/10' /><set value='69.77' color='FF0000' toolText = ' 69.77% ' name='11/11' /><set value='68.38' color='FF0000' toolText = ' 68.38% ' name='11/14' /><set value='71.50' color='FF0000' toolText = ' 71.50% ' name='11/15' /><set value='68.81' color='FF0000' toolText = ' 68.81% ' name='11/16' /><set value='68.42' color='FF0000' toolText = ' 68.42% ' name='11/17' /><set value='65.75' color='FF0000' toolText = ' 65.75% ' name='11/18' /><set value='68.89' color='FF0000' toolText = ' 68.89% ' name='11/21' /><set value='72.31' color='FF0000' toolText = ' 72.31% ' name='11/22' /><set value='74.91' color='FF0000' toolText = ' 74.91% ' name='11/23' /><set value='73.32' color='FF0000' toolText = ' 73.32% ' name='11/25' /><set value='75.40' color='FF0000' toolText = ' 75.40% ' name='11/28' /><set value='70.70' color='FF0000' toolText = ' 70.70% ' name='11/29' /><set value='75.27' color='FF0000' toolText = ' 75.27% ' name='11/30' /><trendlines>  <line startValue='90' color='993366' displayValue='90%' showOnTop='1' valueOnRight='1'/> </trendlines><styles><definition>  <style name='mySubCaptionFont' type='font' font='Tahoma' size='9' bold='0'/>  <style name='myShadow' type='shadow' color='5E1F4C' angle='45' />  <style name='mySCShadow' type='shadow' color='000000' angle='45' />  <style name='chartCaption' type='font' font='Arial' size='11' color='000000'/>  <style name='axisNLabels' type='font' font='Arial' size='10' color='000000'/></definition><application>  <apply toObject='Caption' styles='myShadow'/>  <apply toObject='Caption' styles='chartCaption'/>  <apply toObject='DataLabels' styles='axisNLabels'/>  <apply toObject='SubCaption' styles='mySubCaptionFont'/>  <apply toObject='SubCaption' styles='mySCShadow'/></application></styles></chart>〈=EN&scaleMode=noScale&chartWidth=366&debugMode=0">
<param name="wMode" value="opaque">
<param name="allowScriptAccess" value="always">
<param name="quality" value="best">
<param name="scaleMode" value="noScale">

<embed  src="../_FusionCharts/Column3D.swf" pluginspage="[url="http://www.macromedia.com/go/getflashplayer"]http://www.macromedia.com/go/getflashplayer[/url]" width="366" type="application/x-shockwave-flash" wMode="opaque" id="Efficiency" scaleMode="noScale" quality="best" flashvars="&registerWithJS=1&chartHeight=250&DOMId=Efficiency&dataXML=<chart palette='2' caption='Productivity' baseFontColor='000000' showCanvasBg='0' showValues='0' chartNoDataText='Coming Soon!' legendNumColumns='2' forceYAxisValueDecimals='1' forceYAxisValueDecimals='1' yAxisValueDecimals='0' decimals='0' exportEnabled='1' exportAtClient='0' exportAction='download' exportHandler='../CPD/FCExporter.aspx' exportFormats='JPG=Export as JPEG' exportFileName='Productivity-12-1-2011_9-02-59_AM' subCaption='KPI Production Time ÷ Production Time' exportDialogColor='e1f5ff' exportDialogBorderColor='0372ab' YAxisMinValue='62.4607721732812' exportDialogFontColor='0372ab' exportDialogPBColor='0372ab' ><set value='71.46' color='FF0000' toolText = ' 71.46% ' name='11/1' /><set value='71.13' color='FF0000' toolText = ' 71.13% ' name='11/2' /><set value='68.13' color='FF0000' toolText = ' 68.13% ' name='11/3' /><set value='66.35' color='FF0000' toolText = ' 66.35% ' name='11/4' /><set value='70.50' color='FF0000' toolText = ' 70.50% ' name='11/7' /><set value='68.24' color='FF0000' toolText = ' 68.24% ' name='11/8' /><set value='69.89' color='FF0000' toolText = ' 69.89% ' name='11/9' /><set value='69.39' color='FF0000' toolText = ' 69.39% ' name='11/10' /><set value='69.77' color='FF0000' toolText = ' 69.77% ' name='11/11' /><set value='68.38' color='FF0000' toolText = ' 68.38% ' name='11/14' /><set value='71.50' color='FF0000' toolText = ' 71.50% ' name='11/15' /><set value='68.81' color='FF0000' toolText = ' 68.81% ' name='11/16' /><set value='68.42' color='FF0000' toolText = ' 68.42% ' name='11/17' /><set value='65.75' color='FF0000' toolText = ' 65.75% ' name='11/18' /><set value='68.89' color='FF0000' toolText = ' 68.89% ' name='11/21' /><set value='72.31' color='FF0000' toolText = ' 72.31% ' name='11/22' /><set value='74.91' color='FF0000' toolText = ' 74.91% ' name='11/23' /><set value='73.32' color='FF0000' toolText = ' 73.32% ' name='11/25' /><set value='75.40' color='FF0000' toolText = ' 75.40% ' name='11/28' /><set value='70.70' color='FF0000' toolText = ' 70.70% ' name='11/29' /><set value='75.27' color='FF0000' toolText = ' 75.27% ' name='11/30' /><trendlines>  <line startValue='90' color='993366' displayValue='90%' showOnTop='1' valueOnRight='1'/> </trendlines><styles><definition>  <style name='mySubCaptionFont' type='font' font='Tahoma' size='9' bold='0'/>  <style name='myShadow' type='shadow' color='5E1F4C' angle='45' />  <style name='mySCShadow' type='shadow' color='000000' angle='45' />  <style name='chartCaption' type='font' font='Arial' size='11' color='000000'/>  <style name='axisNLabels' type='font' font='Arial' size='10' color='000000'/></definition><application>  <apply toObject='Caption' styles='myShadow'/>  <apply toObject='Caption' styles='chartCaption'/>  <apply toObject='DataLabels' styles='axisNLabels'/>  <apply toObject='SubCaption' styles='mySubCaptionFont'/>  <apply toObject='SubCaption' styles='mySCShadow'/></application></styles></chart>〈=EN&scaleMode=noScale&chartWidth=366&debugMode=0" allowScriptAccess="always" height="250" />

</object>
<!-- END Code Block for Chart Efficiency -->

Share this post

Link to post
Share on other sites

ww1711   

ww1711
Posted

That code block is what tries to load for scenario 2, i.e. RenderChartHTML

 

For scenario 1, i.e. RenderChart here is what's trying to load to LIT1.Text:

<!-- START Script Block for Chart Efficiency -->
<div id='EfficiencyDiv' >
Chart.
</div>
<script type="text/javascript">
var chart_Efficiency = new FusionCharts({"debugMode" : "0", "swfUrl" : "../_FusionCharts/Column3D.swf", "renderAt" : "EfficiencyDiv", "width" : "366", "wMode" : "opaque", "dataFormat" : "xml", "id" : "Efficiency", "registerWithJS" : "1", "height" : "250","dataSource" : "<chart palette='2' caption='Productivity' baseFontColor='000000' showCanvasBg='0' showValues='0' chartNoDataText='Coming Soon!' legendNumColumns='2' forceYAxisValueDecimals='1' forceYAxisValueDecimals='1' yAxisValueDecimals='0' decimals='0' exportEnabled='1' exportAtClient='0' exportAction='download' exportHandler='../CPD/FCExporter.aspx' exportFormats='JPG=Export as JPEG' exportFileName='Productivity-12-1-2011_9-13-59_AM' subCaption='KPI Production Time ÷ Production Time' exportDialogColor='e1f5ff' exportDialogBorderColor='0372ab' YAxisMinValue='69.0290232734735' exportDialogFontColor='0372ab' exportDialogPBColor='0372ab' ><set value='78.41' color='FF0000' toolText = ' 78.41% ' name='11/1' /><set value='72.66' color='FF0000' toolText = ' 72.66% ' name='11/2' /><set value='81.51' color='FF0000' toolText = ' 81.51% ' name='11/3' /><set value='75.48' color='FF0000' toolText = ' 75.48% ' name='11/4' /><set value='82.71' color='FF0000' toolText = ' 82.71% ' name='11/7' /><set value='85.92' color='FF0000' toolText = ' 85.92% ' name='11/8' /><set value='84.29' color='FF0000' toolText = ' 84.29% ' name='11/9' /><set value='81.94' color='FF0000' toolText = ' 81.94% ' name='11/10' /><set value='90.63' color='8EA184' toolText = ' 90.63% ' name='11/11' /><set value='91.05' color='586cc4' toolText = ' 91.05% ' name='11/14' /><set value='89.59' color='FF0000' toolText = ' 89.59% ' name='11/15' /><set value='81.98' color='FF0000' toolText = ' 81.98% ' name='11/16' /><set value='85.72' color='FF0000' toolText = ' 85.72% ' name='11/17' /><set value='93.14' color='CFCFCF' toolText = ' 93.14% ' name='11/18' /><set value='87.83' color='FF0000' toolText = ' 87.83% ' name='11/21' /><set value='91.09' color='586cc4' toolText = ' 91.09% ' name='11/22' /><set value='90.14' color='CFCFCF' toolText = ' 90.14% ' name='11/23' /><set value='91.21' color='8EA184' toolText = ' 91.21% ' name='11/25' /><set value='90.48' color='586cc4' toolText = ' 90.48% ' name='11/28' /><set value='89.80' color='FF0000' toolText = ' 89.80% ' name='11/29' /><set value='87.23' color='FF0000' toolText = ' 87.23% ' name='11/30' /><trendlines>  <line startValue='90' color='993366' displayValue='90%' showOnTop='1' valueOnRight='1'/> </trendlines><styles><definition>  <style name='mySubCaptionFont' type='font' font='Tahoma' size='9' bold='0'/>  <style name='myShadow' type='shadow' color='5E1F4C' angle='45' />  <style name='mySCShadow' type='shadow' color='000000' angle='45' />  <style name='chartCaption' type='font' font='Arial' size='11' color='000000'/>  <style name='axisNLabels' type='font' font='Arial' size='10' color='000000'/></definition><application>  <apply toObject='Caption' styles='myShadow'/>  <apply toObject='Caption' styles='chartCaption'/>  <apply toObject='DataLabels' styles='axisNLabels'/>  <apply toObject='SubCaption' styles='mySubCaptionFont'/>  <apply toObject='SubCaption' styles='mySCShadow'/></application></styles></chart>"}).render();</script>
<!-- END Script Block for Chart Efficiency -->

Share this post

Link to post
Share on other sites

Guest Angshu   

Guest Angshu
Posted

Hi,

 

Thanks for your post.

 

We have come up with a work around where you can use renderChart to update an update panel.

 

Please find the attached sample.

 

Here we did the following changes:

 

1. Added reference to jquery.min.js

 

2. Modified script manager to load a js script reference (JSScript.js) which will handle AJAX Client events (and render chart)

 

3. Modfied cs file to render all charts (when postback) using RenderChart (instead of RenderChartHTML)

 

4. APP_Code has a FusionCharts.cs (the source of the FusionCharts.dll) with a modification which will dispose an earlier built chart of the same id. You can compile the cs to dll.

 

Now you will find that RenderChart would work in AJAX PostBack and hence JavaScript chart would also work fine after Update Panel is updated.

 

Please give us your feedback on this.

 

Please do not hesitate to contact me if you've any queries.

NewUpdatePanel_SampleASPNET4.zip

Share this post

Link to post
Share on other sites

pablo   

pablo
Posted

Hello! I had the same issue and Angshu's solution worked fine for me.

 

But I have another problem now, in the UpdatePanel I have an AJAX AlwaysVisibleControlExtender which is not working ok since I applied this solution (works fine first time, second and next works wrong). The problem is in the JScript.js, if I remove this script from loading on ScriptManager the AlwaysVisibleControlExtender works fine (but then comes the FusionCharts issue and the wheel keeps turning :P)

 

Any ideas or suggestions? Thank you for your help!

Share this post

Link to post
Share on other sites

Sanjukta   

Sanjukta
Posted

Hi,

 

It seems that AJAX component "AlwaysVisibleControlExtender" you have mentioned, is conflicting with the ScriptManager that is preventing the Script from loading and causing the issue.

 

Hence, in this case, you would need to modify the code at your end to solve the purpose.

 

Please feel free to get back to us in case you have any further queries.

Share this post

Link to post
Share on other sites

nih   

nih
Posted

Hi,

 

Thanks for your post.

 

We have come up with a work around where you can use renderChart to update an update panel.

 

Please find the attached sample.

 

Here we did the following changes:

 

1. Added reference to jquery.min.js

 

2. Modified script manager to load a js script reference (JSScript.js) which will handle AJAX Client events (and render chart)

 

3. Modfied cs file to render all charts (when postback) using RenderChart (instead of RenderChartHTML)

 

4. APP_Code has a FusionCharts.cs (the source of the FusionCharts.dll) with a modification which will dispose an earlier built chart of the same id. You can compile the cs to dll.

 

Now you will find that RenderChart would work in AJAX PostBack and hence JavaScript chart would also work fine after Update Panel is updated.

 

Please give us your feedback on this.

 

Please do not hesitate to contact me if you've any queries.

Share this post

Link to post
Share on other sites

niltara   

niltara
Posted

Dear Mr. Angshu,

 

The JScript.JS doesn't work with AJAX control. if I have collasible panel on my page with Fusion chart in Updatepanel then Collapsible panel stoped working, but chart is binding.

 

Please suggest some thing to change the script so both get to work (Fusion chart & AJAX)

 

--

Akshay

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing FusionCharts and ASP.NET