Excepcion "Canvas does not provide Context" IE 8

QuickTrend · 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 · Post by **QuickTrend** » Mon Mar 25, 2013 12:16 pm

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

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.

QuickTrend · 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

Excepcion "Canvas does not provide Context" IE 8

Excepcion "Canvas does not provide Context" IE 8

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

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

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

	Yeray Alonso Development & Support Steema Software Av. Montilivi 33, 17003 Girona, Catalonia (SP)
	Please read our Bug Fixing Policy