Some problems on IOS

[jls]

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

[jls]

if you press the legend (don't release the finger) before you touch the series it works, this is not easy!

[Yeray]

Hi Jørgen,

series does not get focus:

http://www.steema.com/files/public/teec ... rizbar.htm

The series focus changes with the mouse move in a desktop. But in a phone the series click event should be used instead.

series onclick does not work
http://www.steema.com/files/public/teec ... nclick.htm

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

does not resize correct
http://www.steema.com/files/public/teec ... salign.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.

[jls]

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

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

[jls]

Here are screenshots of

http://www.steema.com/files/public/teec ... salign.htm

I just loaded the page and rotated the Ipad

Jørgen

[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.

[jls]

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

[Pep]

Hi Jørgen,

have you tried to adjust the size again into the DidRotate event ?

[jls]

No I just have tested the sample chart

Should I add some more code?

[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.

[jls]

Any result?

[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);

[jls]

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

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