Sign in to follow this  
Followers 0
GregInYEG

Strange Animation Of Caption Between Two Data Points In Scrollline2D Chart

By GregInYEG, in Javascript Problems

Recommended Posts

GregInYEG   

GregInYEG
Posted

I'm using ScrollLine2D charts in an iPad app. When the user taps on one data point, causing a caption to be shown, and then taps on another data point somewhere else on the chart, the caption animates from data point 1 to data point 2, then back to data point 1, and then finally back to data point 2.

 

When I graph the same data using ScrollColumn2D and tap on one bar and then another, the animation smoothly moves the caption from bar 1 to bar 2, without jumping back and forth.

 

Is there something I can configure to remove this strange animation for the ScrollLine2D chart?

Share this post

Link to post
Share on other sites

Guest Sumedh   

Guest Sumedh
Posted

I'm using ScrollLine2D charts in an iPad app. When the user taps on one data point, causing a caption to be shown, and then taps on another data point somewhere else on the chart, the caption animates from data point 1 to data point 2, then back to data point 1, and then finally back to data point 2.

 

When I graph the same data using ScrollColumn2D and tap on one bar and then another, the animation smoothly moves the caption from bar 1 to bar 2, without jumping back and forth.

 

Is there something I can configure to remove this strange animation for the ScrollLine2D chart?

 

Hi,

 

Can you paste your XML code here? so that we can test.

Share this post

Link to post
Share on other sites

Bardia   

Bardia
Posted (edited)

<html>

 

<head>

 

<script type="text/javascript" src="FusionCharts.js">

 

</script>

 

</head>

 

<body>

 

<div id="chartContainer">FusionCharts will load here!</div>

 

<script type="text/javascript">

 

var myChart = new FusionCharts( "ScrollLine2D.swf","myChartId", "100%", "100%", "0", "1" );

 

myChart.setJSONData ({"dataset":[{"data":[{"value":"1937.119995","link":"6-1-2010"},{"value":"1842.609985","link":"7-1-2010"},{"value":"1626.500000","link":"8-1-2010"},{"value":"2157.570068","link":"9-1-2010"},{"value":"1426.750000","link":"10-1-2010"},{"value":"1285.209961","link":"11-1-2010"},{"value":"1901.719971","link":"12-1-2010"},{"value":"1703.650024","link":"1-1-2011"},{"value":"1718.300049","link":"2-1-2011"},{"value":"2405.500000","link":"3-1-2011"},{"value":"2880.540039","link":"4-1-2011"},{"value":"1462.689941","link":"5-1-2011"},{"value":"1472.780029","link":"6-1-2011"},{"value":"1313.699951","link":"7-1-2011"},{"value":"1265.270020","link":"8-1-2011"},{"value":"1319.140015","link":"9-1-2011"},{"value":"1187.000000","link":"10-1-2011"},{"value":"1132.500000","link":"11-1-2011"},{"value":"1224.199951","link":"12-1-2011"},{"value":"554.830017","link":"1-1-2012"},{"value":"534.330017","link":"2-1-2012"},{"value":"786.679993","link":"3-1-2012"},{"value":"332.119995","link":"4-1-2012"},{"value":"477.859985","link":"5-1-2012"}],"color":"1d7498,2695c4,1d7092","seriesname":"Actual"}],"chart":{"borderAlpha":"0","outCnvBaseFont":"Arial","bgAlpha":"100","yaxisminvalue":"0","canvasBgRatio":"100","canvasBgAngle":"0","showAlternateHGridColor":"0","scrollHeight":"30","canvasBottomMargin":"160","legendBorderThickness":"1","chartLeftMargin":"0","numvdivlines":"22","showalternatevgridcolor":"0","formatNumberScale":"0","borderColor":"151717","plotFillRatio":"0,60,100","numVisiblePlot":"12","canvasBgColor":"1E1E1E","canvasBgAlpha":"100","baseFont":"Arial-Bold","numberprefix":"","plotFillAngle":"360","borderThickness":"0","yaxismaxvalue":"3844","baseFontSize":"15","bgColor":"151717","canvasBorderAlpha":"100","yaxisname":"Hours","canvasBorderColor":"575858","outCnvBaseFontSize":"15","showBorder":"1","decimals":"2","adjustDiv":"0","canvasLeftMargin":"150","outCnvBaseFontColor":"F5F5F5","canvasBorderThickness":"1","baseFontColor":"9B9B9B","legendBorderColor":"E4E4E4","useroundedges":"1","showvalues":"0","numDivLines":"3","legendBgAlpha":"0"},"categories":[{"category":[{"label":"Jun{BR}2010"},{"label":"Jul{BR}2010"},{"label":"Aug{BR}2010"},{"label":"Sep{BR}2010"},{"label":"Oct{BR}2010"},{"label":"Nov{BR}2010"},{"label":"Dec{BR}2010"},{"label":"Jan{BR}2011"},{"label":"Feb{BR}2011"},{"label":"Mar{BR}2011"},{"label":"Apr{BR}2011"},{"label":"May{BR}2011"},{"label":"Jun{BR}2011"},{"label":"Jul{BR}2011"},{"label":"Aug{BR}2011"},{"label":"Sep{BR}2011"},{"label":"Oct{BR}2011"},{"label":"Nov{BR}2011"},{"label":"Dec{BR}2011"},{"label":"Jan{BR}2012"},{"label":"Feb{BR}2012"},{"label":"Mar{BR}2012"},{"label":"Apr{BR}2012"},{"label":"May{BR}2012"}]}]} );

 

myChart.render("chartContainer");

 

</script>

 

</body>

 

</html>

 

 

Edited by Bardia

Share this post

Link to post
Share on other sites

Guest Sumedh   

Guest Sumedh
Posted

<html>

 

<head>

 

<script type="text/javascript" src="FusionCharts.js">

 

</script>

 

</head>

 

<body>

 

<div id="chartContainer">FusionCharts will load here!</div>

 

<script type="text/javascript">

 

var myChart = new FusionCharts( "ScrollLine2D.swf","myChartId", "100%", "100%", "0", "1" );

 

myChart.setJSONData ({"dataset":[{"data":[{"value":"1937.119995","link":"6-1-2010"},{"value":"1842.609985","link":"7-1-2010"},{"value":"1626.500000","link":"8-1-2010"},{"value":"2157.570068","link":"9-1-2010"},{"value":"1426.750000","link":"10-1-2010"},{"value":"1285.209961","link":"11-1-2010"},{"value":"1901.719971","link":"12-1-2010"},{"value":"1703.650024","link":"1-1-2011"},{"value":"1718.300049","link":"2-1-2011"},{"value":"2405.500000","link":"3-1-2011"},{"value":"2880.540039","link":"4-1-2011"},{"value":"1462.689941","link":"5-1-2011"},{"value":"1472.780029","link":"6-1-2011"},{"value":"1313.699951","link":"7-1-2011"},{"value":"1265.270020","link":"8-1-2011"},{"value":"1319.140015","link":"9-1-2011"},{"value":"1187.000000","link":"10-1-2011"},{"value":"1132.500000","link":"11-1-2011"},{"value":"1224.199951","link":"12-1-2011"},{"value":"554.830017","link":"1-1-2012"},{"value":"534.330017","link":"2-1-2012"},{"value":"786.679993","link":"3-1-2012"},{"value":"332.119995","link":"4-1-2012"},{"value":"477.859985","link":"5-1-2012"}],"color":"1d7498,2695c4,1d7092","seriesname":"Actual"}],"chart":{"borderAlpha":"0","outCnvBaseFont":"Arial","bgAlpha":"100","yaxisminvalue":"0","canvasBgRatio":"100","canvasBgAngle":"0","showAlternateHGridColor":"0","scrollHeight":"30","canvasBottomMargin":"160","legendBorderThickness":"1","chartLeftMargin":"0","numvdivlines":"22","showalternatevgridcolor":"0","formatNumberScale":"0","borderColor":"151717","plotFillRatio":"0,60,100","numVisiblePlot":"12","canvasBgColor":"1E1E1E","canvasBgAlpha":"100","baseFont":"Arial-Bold","numberprefix":"","plotFillAngle":"360","borderThickness":"0","yaxismaxvalue":"3844","baseFontSize":"15","bgColor":"151717","canvasBorderAlpha":"100","yaxisname":"Hours","canvasBorderColor":"575858","outCnvBaseFontSize":"15","showBorder":"1","decimals":"2","adjustDiv":"0","canvasLeftMargin":"150","outCnvBaseFontColor":"F5F5F5","canvasBorderThickness":"1","baseFontColor":"9B9B9B","legendBorderColor":"E4E4E4","useroundedges":"1","showvalues":"0","numDivLines":"3","legendBgAlpha":"0"},"categories":[{"category":[{"label":"Jun{BR}2010"},{"label":"Jul{BR}2010"},{"label":"Aug{BR}2010"},{"label":"Sep{BR}2010"},{"label":"Oct{BR}2010"},{"label":"Nov{BR}2010"},{"label":"Dec{BR}2010"},{"label":"Jan{BR}2011"},{"label":"Feb{BR}2011"},{"label":"Mar{BR}2011"},{"label":"Apr{BR}2011"},{"label":"May{BR}2011"},{"label":"Jun{BR}2011"},{"label":"Jul{BR}2011"},{"label":"Aug{BR}2011"},{"label":"Sep{BR}2011"},{"label":"Oct{BR}2011"},{"label":"Nov{BR}2011"},{"label":"Dec{BR}2011"},{"label":"Jan{BR}2012"},{"label":"Feb{BR}2012"},{"label":"Mar{BR}2012"},{"label":"Apr{BR}2012"},{"label":"May{BR}2012"}]}]} );

 

myChart.render("chartContainer");

 

</script>

 

</body>

 

</html>

 

 

 

 

Hi,

 

We are unable to replicate the same. The tooltip is working absolutely fine.

 

 

Share this post

Link to post
Share on other sites

Bardia   

Bardia
Posted

Hi,

 

We are unable to replicate the same. The tooltip is working absolutely fine.

 

 

 

Just realized we should have mentioned this is within a webkit view on an iPad (nested inside a native application).

 

Sincerely,

 

Bardia

 

 

 

Share this post

Link to post
Share on other sites

Guest Sumedh   

Guest Sumedh
Posted

Just realized we should have mentioned this is within a webkit view on an iPad (nested inside a native application).

 

Sincerely,

 

Bardia

 

 

 

 

Hi,

 

There is no rendering difference between Safari browser and the phone's browser.

 

Both of them use same WebKit.

Share this post

Link to post
Share on other sites

GregInYEG   

GregInYEG
Posted

Hi,

 

There is no rendering difference between Safari browser and the phone's browser.

 

Both of them use same WebKit.

 

Sorry for the delay in responding to this.

 

Here's a video that shows the behaviour we're describing. It does not behave like this in Safari for a desktop computer. I took this video from the iPad Simulator, but exactly the same behaviour occurs on an iPad 1/2/3 as well.

 

 

If you'd like, I can open up my web server so that you can see it, if you have an iPad to test on.

Share this post

Link to post
Share on other sites

Guest Sumedh   

Guest Sumedh
Posted

Hi,

 

We are not able to replicate it. We tested it on iPad and iPad simulator.

 

The label's behavior on hovering/clicking is correct.

Share this post

Link to post
Share on other sites

GregInYEG   

GregInYEG
Posted

Hi,

 

We are not able to replicate it. We tested it on iPad and iPad simulator.

 

The label's behavior on hovering/clicking is correct.

 

It's not possible to hover on an iPad; it's only possible to tap.

 

Did you watch the video? It's pretty clear that it is not working properly in that video, which was captured from the iPad simulator running iOS 5.1.

 

I've attached a zipped directory containing the files that Mobile Safari was pointing at. You can unzip them and navigate to it on an iPad or the simulator, and you'll see the same thing.

Sample.zip

Share this post

Link to post
Share on other sites

GregInYEG   

GregInYEG
Posted

It's not possible to hover on an iPad; it's only possible to tap.

 

Did you watch the video? It's pretty clear that it is not working properly in that video, which was captured from the iPad simulator running iOS 5.1.

 

I've attached a zipped directory containing the files that Mobile Safari was pointing at. You can unzip them and navigate to it on an iPad or the simulator, and you'll see the same thing.

 

Also, I noticed one other issue with the same chart on my iPad, which also doesn't happen in desktop Safari.

 

 

Notice that the scroll bar's thumb control increases in height when it is being dragged. Why does it do this?

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 Javascript Problems