est-il possible d'avoir plusieurs google graphiques dans une page?

Je suis en utilisant Google visualisation de l'api.
Voici mon exemple de code. Les deux cartes peut être indiqué s'il est le seul à être tirées. Mais je ne peux pas obtenir à la fois de travail. Merci pour vos conseils. 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<title>Home Page</title>
<!--Load the AJAX API-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
//Load the Visualization API and the ready-made Google table visualization
google.load('visualization', '1', {'packages':['corechart']});
</script>
<script type='text/javascript'>
function drawA() {
//Define the chart using setters:
var wrap = new google.visualization.ChartWrapper();
wrap.setChartType('ColumnChart');
wrap.setDataSourceUrl('dataurl');
wrap.setContainerId('checkin-column');
wrap.setOptions({'title':'Daily Check-in Numbers', 'width':500,'height':400});
wrap.draw();
wrap.getChart();
}
function drawB() {
//Define the chart using setters:
var wrap = new google.visualization.ChartWrapper();
wrap.setChartType('ColumnChart');
wrap.setDataSourceUrl('dataurl2');
wrap.setContainerId('redemption-table');
wrap.setOptions({'title':'Redemption History', 'width':500,'height':400});
wrap.draw();
}
function drawVisualization() {
drawA();
drawB();
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="checkin-column"/>
<p/>
<div id="redemption-table"/>
</body>
</html>
vous êtes seulement l'appel wrap.getChart(); dans drawA()
qui ne devrait pas d'importance. Juste pour le débogage.

OriginalL'auteur Bobo | 2011-07-15

  1. 12

    Le problème est dans votre divs.

    Remplacer ceci:

    <div id="checkin-column"/>
<p/>
<div id="redemption-table"/>

    :

    <div id="checkin-column"></div>
<p></p>
<div id="redemption-table"></div>
    Je viens de découvrir ce problème quelques minutes auparavant. Pourquoi est-ce un problème? Pour moi, le <div id="checkin-colonne"/> est un bien fermé tag.
    Ok. C'est parce que <div> élément est non-vide de l'élément, de sorte qu'il n'est pas destiné à l'auto-fermeture basé sur ce stackoverflow.com/questions/5455768/...
    Les deux <div> et <p>, pour être exact.

    OriginalL'auteur Jos Dirksen

  2. 0

    Probablement pas votre problème, mais sur une note connexe, j'ai constaté que si vous avez beaucoup de Google Visualisations sur la même page ( je crois que c'était dans le voisinage de 50) , Google gaz, utilisation et arrêt rendu correctement.

    Ce peut-être appliqué précédemment avec l'ancienne Image de "Cartes" de l'API, mais avec l'API JavaScript, vous pouvez charger la bibliothèque une fois, et puis Google n'a aucune idée de combien de cartes vous êtes le dessin. Événement si vous appelez google.load() de nombreuses fois, il les caches de la bibliothèque et de ne pas faire une autre demande pour le même forfait.

    OriginalL'auteur djsadinoff

  3. 0

    Juste en jetant quelques informations qui se rapporte à un problème que j'ai eu (pas le cas des OP exact Q).

    Quand vous voulez tracer plusieurs graphiques sur une page, vous devez utiliser des identifiants différents pour les divs votre ciblage (duh!) . Donc, si vous avez une page qui devrait avoir plusieurs cartes, mais seulement 1 (ou N < attendu) est rendu, vérifiez qu'il existe un unique div id pour chaque graphique, et que le JavaScript cibles unique div id.

    Par exemple, que le rendu d'un tableau: 

    <div id="chart"></div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
google.setOnLoadCallback(drawChart2);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['', 'Stuff', 'Stuff2'],
['', 1.0, 2.0]
]);
var options = {
title: 'MyChart',
pointSize: 3,
vAxis: {
baseline: 0.1,
title: 'vAxis'
},
hAxis: {
title: 'hAxis'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(data, options);
}
function drawChart2() {
var data = google.visualization.arrayToDataTable([
['', 'Stuff', 'Stuff2'],
['', 4.0, 5.0]
]);
var options = {
title: 'MyChart2',
pointSize: 3,
vAxis: {
baseline: 0.1,
title: 'vAxis'
},
hAxis: {
title: 'hAxis'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(data, options);
}
</script>

    OriginalL'auteur Mike Graf