Page 1 of 2
Some problems on IOS
Posted: Tue Oct 02, 2012 9:44 am
by 16562340
I try to use Teechart on IPad but not everything is working:
series does not get focus:
http://www.steema.com/files/public/teec ... rizbar.htm
series onclick does not work
http://www.steema.com/files/public/teec ... nclick.htm
does not resize correct
http://www.steema.com/files/public/teec ... salign.htm
(PieChart works)
Jørgen
Re: Some problems on IOS
Posted: Tue Oct 02, 2012 9:56 am
by 16562340
if you press the legend (don't release the finger) before you touch the series it works, this is not easy!
Re: Some problems on IOS
Posted: Wed Oct 03, 2012 10:56 am
by yeray
Hi Jørgen,
The series focus changes with the mouse move in a desktop. But in a phone the series click event should be used instead.
Note the zoom and scroll features may interfere here with a phone.
If I disable the zoom and scroll it works fine for me here in a phone:
http://www.steema.com/files/public/teec ... g/test.htm
This works fine for me here both in a windows browser and in a phone. The only problem I see is that the generated chart seems to be a little bit too large (in height) and the bottom axis labels are cut if you don't scroll down the page a bit. Is this the problem you observed?
Thanks in advance.
Re: Some problems on IOS
Posted: Tue Oct 09, 2012 2:04 pm
by 16562340
Yeray wrote:This works fine for me here both in a windows browser and in a phone. The only problem I see is that the generated chart seems to be a little bit too large (in height) and the bottom axis labels are cut if you don't scroll down the page a bit. Is this the problem you observed?
The width is OK, but on my IPad it does not scale the height
Jørgen
Re: Some problems on IOS
Posted: Wed Oct 17, 2012 7:54 am
by Pep
Hi Jørgen,
we're not able to reproduce the scale problem here. Would you be so kind to post here a sample image of the result you got ?
Re: Some problems on IOS
Posted: Wed Oct 17, 2012 8:35 am
by 16562340
Here are screenshots of
http://www.steema.com/files/public/teec ... salign.htm
I just loaded the page and rotated the Ipad
Jørgen
Re: Some problems on IOS
Posted: Wed Oct 17, 2012 3:26 pm
by Pep
Hi Jørgen,
this depends on the way to align the Chart to the container :
Code: Select all
<br><canvas id="canvas" style="height:100%; width: 100%; align: center;">
</canvas>
Changing the height to 90% will change its effect, and you will be able to see complete chart.
Re: Some problems on IOS
Posted: Thu Oct 18, 2012 8:00 am
by 16562340
I have already done that.
It looks OK then you load the chart, but if you rotate the IPad, the size is wrong.
Jørgen
Re: Some problems on IOS
Posted: Thu Oct 18, 2012 9:39 am
by Pep
Hi Jørgen,
have you tried to adjust the size again into the DidRotate event ?
Re: Some problems on IOS
Posted: Thu Oct 18, 2012 2:21 pm
by 16562340
No I just have tested the sample chart
Should I add some more code?
Re: Some problems on IOS
Posted: Fri Oct 19, 2012 12:23 pm
by Pep
Hi Jørgen,
yes, it seems that some extra code must be added in order to resize the Chart once the devide is rotated, most likely to get again the client size.
We're going to investigate which code should solve it, we'll back with results as soon as possible.
Re: Some problems on IOS
Posted: Tue Oct 30, 2012 8:19 am
by 16562340
Any result?
Re: Some problems on IOS
Posted: Wed Oct 31, 2012 3:50 pm
by Pep
sorry for delay, I've been doing some tests and this is not a TeeChart problem, it's just that the html5 canvas, or Chart if you want has to be resized once the device is rotated, the way or size could be different depending on the browser used.
Please, take a look at the following
post. Here you can find how to accomplish it, and a guide of sizes in the case is needed.
You have to catch once the device is rotated by using the javascript code :
Code: Select all
// Detect whether device supports orientationchange event, otherwise fall back to
// the resize event.
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function() {
alert('HOLY ROTATING SCREENS BATMAN:' + window.orientation + " " + screen.width);
}, false);
Re: Some problems on IOS
Posted: Thu Nov 01, 2012 11:34 am
by 16562340
Tried to add something like this:
// Detect whether device supports orientationchange event, otherwise fall back to
// the resize event.
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function() {
alert('HOLY ROTATING SCREENS BATMAN:' + window.orientation + " " + screen.width + " " + screen.height);
// resize2();
}, false);
function resize2() {
if (window.orientation == 90) then
{
Chart1.canvas.width = window.innerWidth;
Chart1.canvas.height = window.innerHeight;
}
if (window.orientation == 180) then
{
Chart1.canvas.width = screen.width;
Chart1.canvas.height = screen.height;
}
Chart1.bounds.width=Chart1.canvas.width;
Chart1.bounds.height=Chart1.canvas.height;
Chart1.draw();
}
but it doesn't work. The event triggers, but i doesn't resize the chart .
I think it would have been use full if you make a sample showing how to make it work correct.
You probably have many customers that want to make the HTML5 chart to behave correct on mobile devices.
Jørgen
Re: Some problems on IOS
Posted: Fri Nov 02, 2012 11:04 am
by Pep
Hello,
using the following code works fine here, could you please test if it's working fine for you ?
Code: Select all
<script type="text/javascript">
var Chart1;
function draw() {
Chart1=new Tee.Chart("canvas");
Chart1.panel.transparent=true;
Chart1.addSeries(new Tee.Bar([5,3,2,7,1]) ).cursor="pointer";
Chart1.addSeries(new Tee.Bar([3,2,7,1,5]) ).cursor="pointer";
Chart1.addSeries(new Tee.Bar([2,7,1,5,3]) ).cursor="pointer";
Chart1.walls.back.format.shadow.visible=true;
Chart1.title.text="Full page align";
Chart1.tools.add(new Tee.DragTool(Chart1));
var tip=new Tee.ToolTip(Chart1);
var font=tip.add().format.font;
font.style="bold 21px Courier";
font.fill="red";
var font=tip.format.font;
font.fill="blue";
font.style="12px Verdana";
font.textAlign="start";
tip.ongettext=function(tool,text,series,index) {
tip.items[0].text=series.title;
tip.items[1].text="Point: "+index.toString();
return text;
}
font=tip.add().format.font;
font.style="italic bold 14px Tahoma";
font.fill="green";
font.textAlign="end";
Chart1.tools.add(tip);
resize();
}
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
} else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
} else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function getWindowWidth() {
var windowWidth = 0;
if (typeof(window.innerWidth) == 'number') {
windowWidth = window.innerWidth;
} else {
if (document.documentElement && document.documentElement.clientWidth) {
windowWidth = document.documentElement.clientWidth;
} else {
if (document.body && document.body.clientWidth) {
windowWidth = document.body.clientWidth;
}
}
}
return windowWidth;
}
function resize() {
Chart1.canvas.width=getWindowWidth();
Chart1.canvas.height=getWindowHeight();
Chart1.bounds.width=getWindowWidth();
Chart1.bounds.height=getWindowHeight();
Chart1.draw();
}
// Detect whether device supports orientationchange event, otherwise fall back to
// the resize event.
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function() {
resize();
}, false);
</script>
</HEAD>
<BODY onload="draw()" onresize="resize()">
<canvas id="canvas" style="padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
display: block;">
</canvas>