Problema en Exportar Gráfica de Highcharts IE

eliza_ralves · #1 (**permalink**) 28/07/2011, 14:13

Hola que tal???

Espero estén bien!

Tengo un problema al exporta una grafica de Highcharts.

Realice miles de pruebas, y hasta ayer me exportaba. Pero el día de hoy no me exporta (sin realizar ninguna modficicación) y me aparece el siguiente error:

Cita:

About to transcode 1 SVG file(s)

Converting 74001a014d33bf6a3d4d5c5646955f4e.svg to temp/74001a014d33bf6a3d4d5c5646955f4e.pdf ... ... error (SVGConverter.error.while.rasterizing.file)

Error while converting SVG

Despues d e tanto leer en la documentación, el problemas es que "no esta bien formada" y la cuetión es que es tal cual. Intente utilizando un simple código de exportación javascript:

Código:

// button handler
$('#button').click(function() {
    chart.exportChart();
});

En el HTML:

Código HTML:

<button id="button">Export chart</button>

Pero no exporta a JPEG ni a PNG ni a PDF, sólo a SVC (pero me dá el error de que está mal formada cuando abre la imagen).

El codigo completo del javascript es el siguiente:

Código HTML:

Highcharts.visualize = function(table, options) {
// the categories
options.xAxis.categories = [];
$('tbody th', table).each( function(i) {
	options.xAxis.categories.push(this.innerHTML);
});
				
// the data series
options.series = [];
$('tr', table).each( function(i) {
	var tr = this;
	$('th, td', tr).each( function(j) {
		if (j > 0) { // skip first column
			if (i == 0) { // get the name and init the series
				options.series[j - 1] = { 
					name: this.innerHTML,
					data: [],
                                        type: 'area',
                                        dataLabels: {
                                            enabled: true,
                                            color: '#000000',
                                            formatter: function() {
                                                  return this.y;
                                             }
                                         }
	                         };
			} else { // add values
				options.series[j - 1].data.push(parseFloat(this.innerHTML));
			    }
		}
	});
});
				
var chart = new Highcharts.Chart(options);
}
            
$(document).ready(function() {
   var table = document.getElementById('datatable'),
	options ={
				
		chart: {
		     renderTo: 'container',
		     defaultSeriesType: 'area',
                     spacingBottom: 30
		},
	title: {
		text: 'Gráficos Estadísticos - SPO2'
		},
	xAxis: {
		title: {
			text: 'Período de Tiempo - Meses'
			}
	},
	yAxis: {
		title: {
			text: 'Horas - Hombre'
		},
	labels: {
		formatter: function() {
			return this.value;
		}
	}
},
	tooltip: {
		formatter: function() {
			return '<b>'+ this.series.name +'</b><br/>'+
			 this.y +'H/H';
		}
	},
	plotOptions: {
		area: {
			fillOpacity: 0.5
		}
	},
       exporting: {
             enabled: true,
               filename: 'Grafica - SPO2'
        }
};
Highcharts.visualize(table, options);
});
            
// button handler
$('#button').click(function() {
    chart.exportChart();
});

Y en el HTML:

Código HTML:

<head>
<!-- Para Definicion de Estilo de los Graficos -->
<script type="text/javascript" src="../../javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../../javascript/highcharts.js"></script>

<!-- Para exportar archivo -->
<script type="text/javascript" src="../../javascript/modules/exporting.js"></script>

<!-- Para Acción sobre los Graficos -->
<script type="text/javascript" src="../../javascript/grafico.js"></script>

</head>

<body>

    <div id="container" style="width: 800px; height: 320px; margin:0 auto"></div>
                   
       <table border="0" id="datatable"  title="grafica" cellpadding="5" cellspacing="5" summary="Presentacion del grafico estadiastico">
              <thead>
                      <tr>
                          <th></th>
                          <th> Proyecto</th>
                           <th>Actividad</th>

                      </tr>
              </thead>
               <tbody >
                      <tr>
                           <th>Mes</th>
                           <td>4</td>
                           <td>6</td>
                      </tr>
                      <tr>
                           <th>Mes</th>
                           <td>7</td>
                           <td>12</td>
                      </tr>
                      <tr>
                           <th>Mes</th>
                           <td>89</td>
                           <td>34</td>
                      </tr>
              </tbody>

 </table>
                        
<button id="button">Export chart</button>

</body>

Pero no se ejecuta.

Espero su ayuda!

eliza_ralves · #2 (**permalink**) 29/07/2011, 09:14

Hola que tal? Les dejo aquí la solución al problema. Resulta que no me admitía un formato para la gráfica:

Código:

			

Highcharts.visualize = function(table, options) {
// the categories
    options.xAxis.categories = [];
    $('tbody th', table).each( function(i) {
	options.xAxis.categories.push(this.innerHTML);
     });
				
// the data series
	options.series = [];
	$('tr', table).each( function(i) {
		var tr = this;
		$('th, td', tr).each( function(j) {
		if (j > 0) { // skip first column
			if (i == 0) { // get the name and init the series
				options.series[j - 1] = { 
					name: this.innerHTML,
					data: [],
                                        type: 'area',
                                        dataLabels: {
                                               enabled: true,
                                               style: {
                                                  font: 'normal 13px Verdana, sans-serif'
                                                },
                                                color: '#000000',
                                               formatter: function() {
                                                  return this.y;
                                               }
                                          }
				};
			} else { // add values
					options.series[j - 1].data.push(parseFloat(this.innerHTML));
				}
		}
	});
});
				
var chart = new Highcharts.Chart(options);
}
				
// On document ready, call visualize on the datatable.
$(document).ready(function() {			
	var table = document.getElementById('datatable'),
		options = {
			chart: {
				 renderTo: 'container',
				defaultSeriesType: 'area'
			},
			title: {
				 text: 'Graficos Estadisticos - SPO2'
				},
			 xAxis: {
                            title: {
				 text: 'Meses'
			}
			},
			yAxis: {
				 title: {
					 text: 'Horas - Hombre'
				}
			},
			 tooltip: {
				 formatter: function() {
					 return '<b>'+ this.series.name +'</b><br/>'+
					 this.y +'H/H';
				}
			}
};			
			      					
Highcharts.visualize(table, options);
});

mr_nobody · #3 (**permalink**) 29/11/2011, 10:54

Yo tengo el mismo problema ... pero he visto que es cuando le paso una EÑE ... por ejemplo: subtitulo: del año 2009