Excepcion "Canvas does not provide Context" IE 8

TeeChart for JavaScript for the HTML5 Canvas
Post Reply
QuickTrend
Newbie
Newbie
Posts: 15
Joined: Fri Mar 15, 2013 12:00 am

Excepcion "Canvas does not provide Context" IE 8

Post by QuickTrend » Mon Mar 25, 2013 12:00 pm

Hola.

He creado un grafico de lineas que se muestra utilizando EXCANVAS para internet explorer 8 y versiones anteriores. El problema viene cuando se ejecuta el metodo DRAW, salta la excepcion indicda en el titulo "Canvas does not provide Context". Tengo un par de preguntas al respecto.
- ¿Hay algun ejemplo de teechart creado utilizando Excanvas?
- ¿Que tengo que poner en mi programa funcione?

reg es un array con los datos de las series.
h es la altura que se requiere para el objeto.
w es la anchura que se requiere para el objeto.

Code: Select all

function dibujarGrafico(reg,h,w)
{
	chart = new Tee.Chart("cv");

	canvas = chart.canvas;
	canvas.setAttribute('width', "" + w + "px");
	canvas.setAttribute('height', "" + h + "px");
	canvas.width = w;
	canvas.height = h;
	canvas.style.width = "" + w + "px";
	canvas.style.height = "" + h + "px";
	chart.bounds.width = w;
	chart.bounds.height = h;

	chart.panel.transparent = true;
	chart.panel.margins.top = 8;

	for (c = 0; c < reg.length; c++) {
		s = new Tee.Line(reg[c]);
		chart.addSeries(s);
		chart.series.items[c].format.stroke.size = 2;

		s.onclick = function (series, index, x, y) {
			series.visible = false;
			chart.draw();
		}
	}

	chart.title.text = "";
	chart.title.format.font.style = "18px Verdana";
	chart.draw();
}
Gracias.

QuickTrend
Newbie
Newbie
Posts: 15
Joined: Fri Mar 15, 2013 12:00 am

Re: Excepcion "Canvas does not provide Context" IE 8

Post by QuickTrend » Mon Mar 25, 2013 12:16 pm

Vale, ya vi que los ejemplos utilizan Excanvas.. pero me sigue saltando esa excepcion.

Yeray
Site Admin
Site Admin
Posts: 9514
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Excepcion "Canvas does not provide Context" IE 8

Post by Yeray » Wed Mar 27, 2013 11:32 am

Hola,

Éste codigo completo no me dá error:

Code: Select all

<!DOCTYPE HTML>
<html>
<HEAD>
<title>Testing</TITLE>

<!--[if lt IE 9]>
    <script src="../src/excanvas/excanvas_text.js"></script>
    <script src="../src/excanvas/canvas.text.js"></script>
<![endif]-->

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


<script type="text/javascript">

var Chart1;
var reg = new Array();

function draw() {
  Chart1=new Tee.Chart("canvas1");
  
  w = 600;
  h = 400;
  reg[0] = [10, 20, 30];
  reg[1] = [20, 30, 40];
  
  canvas = Chart1.canvas;
  canvas.setAttribute('width', "" + w + "px");
  canvas.setAttribute('height', "" + h + "px");
  canvas.width = w;
  canvas.height = h;
  canvas.style.width = "" + w + "px";
  canvas.style.height = "" + h + "px";
  Chart1.bounds.width = w;
  Chart1.bounds.height = h;

  Chart1.panel.transparent = true;
  Chart1.panel.margins.top = 8;

  for (c = 0; c < reg.length; c++) {
     s = new Tee.Line(reg[c]);
     Chart1.addSeries(s);
     Chart1.series.items[c].format.stroke.size = 2;

     s.onclick = function (series, index, x, y) {
        series.visible = false;
        Chart1.draw();
     }
  }

  Chart1.title.text = "";
  Chart1.title.format.font.style = "18px Verdana";
  
  Chart1.draw();
}
</script>
</HEAD>
<BODY onload="draw()">
<CENTER>
<br><canvas id="canvas1" width="600" height="400">
This browser does not seem to support HTML5 Canvas.
</canvas>
</CENTER>
</BODY>
</HTML>
Sin embargo, hay algun problema con los eventos, que no se estan capturando correctamente con el excanvas. Así que la funcionalidad que has implementado para desactivar una serie si clicas sobre ella, no funciona.

Estamos investigando a ver si logramos capturar bien esos eventos en excanvas.
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

QuickTrend
Newbie
Newbie
Posts: 15
Joined: Fri Mar 15, 2013 12:00 am

Re: Excepcion "Canvas does not provide Context" IE 8

Post by QuickTrend » Tue May 21, 2013 3:10 pm

Hola Yeray.

Se que es un post viejo, pero igual es interesante para los demas usuarios. El problema se producr por que a parte de los graficos, utilizamos el framework EXT JS version 4.1, y vuestro componente esta mostrandose en uno de los objetos panel de este framework. He conseguido solucionar el problema, y os pongo la solucion.

Code: Select all


function draw() {
  Chart1=new Tee.Chart("canvas1");
 
  w = 600;
  h = 400;
  reg[0] = [10, 20, 30];
  reg[1] = [20, 30, 40];
 
  canvas = Chart1.canvas;
if (!is_ie8) {
        canvas .setAttribute('width', "" + w + "px");
        canvas .setAttribute('height', "" + h + "px");
    }
    else {
      G_vmlCanvasManager.initElement(canvas ); // <----- Esta es la solucion al problema.
    }
  canvas.width = w;
  canvas.height = h;
  canvas.style.width = "" + w + "px";
  canvas.style.height = "" + h + "px";
  Chart1.bounds.width = w;
  Chart1.bounds.height = h;

  Chart1.panel.transparent = true;
  Chart1.panel.margins.top = 8;

  for (c = 0; c < reg.length; c++) {
     s = new Tee.Line(reg[c]);
     Chart1.addSeries(s);
     Chart1.series.items[c].format.stroke.size = 2;

     s.onclick = function (series, index, x, y) {
        series.visible = false;
        Chart1.draw();
     }
  }

  Chart1.title.text = "";
  Chart1.title.format.font.style = "18px Verdana";
 
  Chart1.draw();
}

Espero que os sirva para el futuro.

Un saludo y muchas gracias

Post Reply