api - tipos - google charts tutorial español
"El contenedor no está definido" Google chart (4)
Debe haber una línea donde carga los tipos de visualización que desea tener en su página web. Se parece a esto
google.load("visualization", "1", {packages: ["corechart"]});
Aquí estoy cargando el paquete corechart . Coloque esta línea como la primera línea después en la etiqueta <script> dentro de su página HTML como index.html. Eso debería resolver el problema.
Resolví mi problema, pero no puedo responderlo porque soy demasiado nuevo en este sitio:
Resulta que necesitaba usar lo siguiente:
chart = new google.visualization.PieChart(document.getElementById(''pie_today_div''));
Estaba usando JQuery para acceder al elemento, $(''#pie_today_div'') . A partir de ahora, la evidencia apunta al hecho de que el constructor PieChart tiene que tener un código JS estándar, document.getElementById(''pie_today_div'')
Tal vez algo más está sucediendo, pero cambiar la forma en que accedo al elemento contenedor corrige mi código
NÚMERO ORIGINAL PARA LA REFERENCIA A MI SOLUCIÓN
Recibo el error "El contenedor no está definido" cuando intento crear una instancia de un objeto PieChart de Google.
Validé mi página en http://validator.w3.org/ y recibo una pancarta bastante verde que dice que valida.
No recibo ningún error js cuando se carga la página. Mi llamada Ajax está haciendo un viaje completo con los datos que quiero de la base de datos.
Aquí está mi HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link href="/css/note.css?10022012" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" language="javascript" src="/call/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load(''visualization'', ''1.0'', {''packages'':[''corechart'']});</script>
<script type="text/javascript" language="javascript" src="/call/js/init.js?10042012-2"></script>
<title>Call Stats</title>
</head>
<body>
<a href="#" id="pie_today_link">Today Stats</a>
<div id="pie_today_div"></div>
</body>
</html>
Aquí está el js:
function drawPieChartToday() {
$.post(''/call/ajax.php5'',{
action:''pieToday''
}, function(ticketData) {
var data = new google.visualization.DataTable();
data.addColumn(''string'', ''Count'');
data.addColumn(''number'', ''Topic'');
for (var key in ticketData){
data.addRow([key, ticketData[key]]);
}
options = {
title: ''Issue Topics''
};
alert($(''#pie_today_div'').attr(''id''));
chart = new google.visualization.PieChart($(''#pie_today_div''));
chart.draw(data, options);
},''json'');
}
Aquí está mi código de depuración para asegurarme de que se encuentre el elemento: alert($(''#pie_today_div'').attr(''id'')); <- alertas "pie_today_div"
No soy un fan de jquery, pero creo que $ (''# pie_today_div'') devuelve un conjunto de elementos emparejados. El cálculo de atributos funciona porque (a partir de la documentation jquery) "obtiene el valor de un atributo para el primer elemento del conjunto de elementos coincidentes".
Así que intenta
chart = new google.visualization.PieChart($(''#pie_today_div'')[0]);
o directamente
chart = new google.visualization.PieChart(document.getElementById(''pie_today_div''));
Solo quería mencionar, esto me pasó después de un simple error. Cambié
var data = new google.visualization.DataTable(huh);
a lo siguiente en un esfuerzo por cambiar el tipo de gráfico:
var data = new google.visualization.BarChart(huh);
pero todo esto es incorrecto, cambias la tabla donde mencionas el contenedor:
var chart = new google.visualization.ComboChart(document.getElementById(''chart_div''));
Un error de contenedor es exactamente eso, está buscando el ejemplo de ID:
var chart = new google.visualization.PieChart(document.getElementById(''chart_div''));
Obtendrá este error "El contenedor no está definido" para Google Charts si le falta esa identificación. Por lo tanto, una Div con esa identificación chart_div solucionaría esto