bmcwhorter

real time chart and resize causes display malfunction in javascript render

Recommended Posts

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.post-44684-0-93215100-1380800250_thumb.pngpost-44684-0-76324500-1380800316_thumb.pngpost-44684-0-76324500-1380800316_thumb.png

 

  <?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>

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

post-44684-0-16028000-1382009266_thumb.pngHey,

 

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.

Share this post


Link to post
Share on other sites

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 by shamasis
added screencast

Share this post


Link to post
Share on other sites

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?

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