Google Charts - Graphique à bulles de base
Voici un exemple de graphique à bulles de base. Un graphique à bulles est utilisé pour visualiser un ensemble de données ayant deux à quatre dimensions. Les deux premières dimensions sont visualisées sous forme de coordonnées, la troisième sous forme de couleur et la quatrième sous forme de taille. Nous avons déjà vu la configuration utilisée pour dessiner ce graphique dans le chapitre Syntaxe de configuration de Google Charts . Alors, voyons l'exemple complet.
Configurations
Nous avons utilisé BubbleChart classe pour afficher le graphique à bulles.
//bubble chart
var chart = new google.visualization.BubbleChart(document.getElementById('container'));Exemple
googlecharts_bubble_basic.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Id');
data.addColumn('number', 'Age');
data.addColumn('number', 'Weight');
data.addRows([
[ '', 8, 12],
[ '', 4, 5.5],
[ '', 11, 14],
[ '', 4, 5],
[ '', 3, 3.5],
[ '', 6.5, 7]
]);
// Set chart options
var options = {'title':'Age vs Weight', 'width':550, 'height':400};
// Instantiate and draw the chart.
var chart = new google.visualization.BubbleChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Résultat
Vérifiez le résultat.