real time chart and resize causes display malfunction in javascript render

[bmcwhorter]

Hi, If you have a real time chart (data stream) that you resize, it will have problems in javascript -- flash works fine.

 

Take the following chart and then in the console, make it smaller.  You will see the canvas and labels adjust fine, but the actual data plot becomes way too large for the canvas.

 

  <?xml version="1.0" encoding="utf-8" ?>

- <graph showFCMenuItem="0" animation="1" Caption="" bgColor="FFFFFF" showLabels="1" numberPrefix="" chartLeftMargin="" chartRightMargin="" chartTopMargin="" chartBottomMargin="" showBorder="0" unescapeLinks="0" imageSave="1" imageSaveURL="rdTemplate/rdAnimatedChart/FCExporter.aspx" bgAlpha="100" yaxisname="" xaxisname="" showPlotBorder="0" rotateLabels="1" canvasBgColor="ffffff" showValues="0" rotateValues="1" useRoundEdges="0" lineDashed="0" canvasPadding="0" plotFillColor="249fda" plotFillAlpha="100" alternateHGridColor="ffffff" alternateVGridColor="ffffff" plotGradientColor="249fda" lineThickness="3.5" anchorAlpha="0" divLineThickness="2" dataStreamURL="rdDownload/rdDL1e7ccad325b6423a9c03898f30f8273f.txt" refreshInterval="1" showRealTimeValue="0" setAdaptiveYMin="1">

- <styles>

- <definition>

  <style name="ToolTipFontStyle" type="font" font="Segoe UI" size="15" color="4c4c4c" bold="0" />

  <style name="DataLabelsFontStyle" type="font" font="Segoe UI" size="15" color="4c4c4c" bold="0" />

  <style name="XAXISNAMEFontStyle" type="font" font="Segoe UI" size="15" color="4c4c4c" bold="0" />

  <style name="CAPTIONFontStyle" type="font" font="Segoe UI" size="24" color="4c4c4c" bold="0" />

  <style name="YAXISVALUESFontStyle" type="font" font="Segoe UI" size="15" color="4c4c4c" bold="0" />

  <style name="YAXISNAMEFontStyle" type="font" font="Segoe UI" size="15" color="4c4c4c" bold="0" />

  <style name="DATAVALUESFontStyle" type="font" font="Segoe UI" size="15" color="4c4c4c" bold="0" />

  <style name="LegendFontStyle" type="font" font="Segoe UI" size="15" color="4c4c4c" bold="0" />

  </definition>

- <application>

  <apply toObject="ToolTip" styles="ToolTipFontStyle" />

  <apply toObject="DataLabels" styles="DataLabelsFontStyle" />

  <apply toObject="XAXISNAME" styles="XAXISNAMEFontStyle" />

  <apply toObject="CAPTION" styles="CAPTIONFontStyle" />

  <apply toObject="YAXISVALUES" styles="YAXISVALUESFontStyle" />

  <apply toObject="YAXISNAME" styles="YAXISNAMEFontStyle" />

  <apply toObject="DATAVALUES" styles="DATAVALUESFontStyle" />

  <apply toObject="Legend" styles="LegendFontStyle" />

  </application>

  </styles>

  <categories />

  <dataset showValues="0" seriesName="" color="249fda" />

  <trendlines />

  </graph>

 

[Haritha]

Hi,

We are unable to open the second and third attachments at our end. Could you please attach them again?

[bmcwhorter]

[bmcwhorter]

You should be able to see the image in my previous post.

[Haritha]

Hi,

 

We are looking into this and shall get back to you soon.

[Haritha]

Hi,

 

Could you please let us know if you have set the chart dimensions in terms of pixels or percentages?

 

Also, please let us know if you have changed the dimensions for re-sizing the chart from console in the chart SVG element or tried to maximize the window of the browser.

 

Awaiting your response.

[bmcwhorter]

Hi,

 

We are setting chart dimensions with pixels.  However, I just tested using 100% and setting the size of the containing div and it behaved the same way.

 

I am changing dimensions using FusionCharts(x).resizeTo(x,y)

[bmcwhorter]

Based on the behavior I'm seeing, it looks like the problem has to do with the auto scaling.  It seems that on the resize, it doesn't include the previous data points that have already been rendered when doing the auto scaling.

[bmcwhorter]

Any update on this?  We are waiting for a solution.

[Haritha]

Hey,

 

Apologies for delay.

 

I tried setting the dimensions of the container in terms of pixels and the chart in terms of percentage but could not find the problem that you are talking about. Below given is my code snippet:

 

 

<div id="fc" style='width:600px;height:400px'></div>
<script language="javascript">
    FusionCharts.setCurrentRenderer('javascript');
     var myChart = new FusionCharts( "./FusionCharts/RealTimeLine.swf","fusionc", "60%", "60%", "0" );
     myChart.setXMLUrl("./FusionCharts/Data.xml");
     myChart.render("fc");    
     
     function resize()
     {
      FusionCharts('fusionc').resizeTo('100%','100%')
     }
</script>

Could you please check if you see this problem in all the browsers or just IE? If you seeing this only in IE then which version of IE are you using?

 

Please attach your complete sample here to speed up the process.

[bmcwhorter]

Hey,

 

You have to give it time to display a few data points at first.  Did you do that?  You do see my screenshot, right?  Also, you have to have streaming data that changes values to see the effect of it.  I assumed you guys have some sort of sample that you used to test the functionality right?  It is too complicated a setup for me to pass over the forum.  Here's another screenshot that shows the plot going outside of the plot canvas.  Also, this happens in all browsers, its a generic javascript bug that is not related to any browser.

[shamasis]

I am observing the instability of the axis. By any chance can you set yAxisMaxValue to stabilise the axis and turn off auto scaling (unless aug-scaling is required)?

 

I have attached a sample with evaluation version of FusionCharts version 3, 3, 1, "sr2", 20420. This is a newer build on the same, if you notice, in this I am resizing the chart after 4 seconds and the plot does get out of canvas for an instance and on the next update it gets back in. Are you seeing the same in your environment or in your case the plot is permanently staying out of canvas? Note that in the sample shows a reduced effect of the bug you are reporting.

 

I also attached a screencast: http://screencast.com/t/nxrJMfvH

 

Give me your thoughts.

 

PS: The sample needs to be run from a server and the data-stream file is in PHP. In case your server is not PHP, the streamer code can be very simply ported to your webserver language.

rt-resize-01.zip

Edited October 17, 2013 by shamasis
added screencast

[bmcwhorter]

hi, unfortunately, auto scaling is required.  Your screencast depicts the exact behavior we witnessed as well.  However, it does not look ok to have it go off the screen for a second.  Is there a way to fix the auto scaling problems?

[shamasis]

Let me dig deeper.

[Haritha]

Please find the attached files of FusionCharts v3.3.1-sr2.20781 build.

 

Can you please test with these files at your end and let us know your feedback?

 

Eval Patch.zip

[bmcwhorter]

Hi, this seems to fix the issue.  Can you give me a production copy of the files?

[Haritha]

Hi,

 

Please drop us a mail at [email protected] for the same.

[Haritha]

Hi,

 

This fix has been released officially and is available in the latest version of FusionCharts v3.3.1 SR3.

 

To download the trial version of FusionCharts v3.3.1 SR3, please visit the link: http://www.fusioncharts.com/download/trials/

 

Hope this helps!