0
En essayant de mettre à la fois un treemap et un graphique à bulles sur la même page, les deux fonctionnent individuellement, mais pas ensemble. J'ai essayé un tas de choses différentes, mais je ne sais pas si je définis correctement les deux choses distinctes.Problème de chargement des cartes Google Treemap et Bubble Chart sur la même page
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.load('visualization', "1", {packages: ['treemap']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(
[
["State","Percent of GDP","Average Freshman Graduation Rate","Region","Expenditure ($ millions)"],
["Alabama",0.214,71.8,"Southeast",5165],
["Alaska",0.135,75.5,"Far West",1635],
["Arizona",0.186,74.7,"Southwest",5454],
["Arkansas",0.155,75,"Southeast",3342],
["California",0.209,78.2,"Far West",47674],
["Colorado",0.265,79.8,"Rocky Mountain",7547],
["Connecticut",0.14,75.1,"New England",3930],
["Deleware",0.243,75.5,"Mid-Atlantic",2227],
["Florida",0.181,70.8,"Southeast",12636],
["Georgia",0.241,69.9,"Southeast",9916],
["Hawaii",0.155,75.4,"Far West",1794],
["Idaho",0.226,84,"Rocky Mountain",1634],
["Illinois",0.144,81.9,"Greater Lakes",9588],
["Indiana",0.313,77.2,"Greater Lakes",8680],
["Iowa",0.166,87.9,"Plains",3251],
["Kansas",0.259,84.5,"Plains",3737],
["Kentucky",0.196,79.9,"Southeast",5021],
["Louisiana",0.181,68.8,"Southeast",5367],
["Maine",0.166,82.8,"New England",1297],
["Maryland",0.191,82.2,"Mid-Atlantic",7073],
["Massachusetts",0.106,82.6,"New England",6402],
["Michigan",0.268,75.9,"Greater Lakes",13059],
["Minnesota",0.272,88.2,"Plains",9729],
["Mississippi",0.163,63.8,"Southeast",3174],
["Missouri",0.228,83.7,"Plains",5229],
["Montana",0.155,81.9,"Rocky Mountain",936],
["Nebraska",0.146,83.8,"Plains",1488],
["Nevada",0.222,57.8,"Far West",1976],
["New Hampshire",0.233,86.3,"New England",1171],
["New Jersey",0.243,87.2,"Mid-Atlantic",12651],
["New Mexico",0.197,67.3,"Southwest",2870],
["New York",0.193,76,"Mid-Atlantic",25657],
["North Carolina",0.206,76.9,"Southeast",10605],
["North Dakota",0.143,88.4,"Plains",851],
["Ohio",0.198,81.4,"Greater Lakes",11515],
["Oklahoma",0.162,78.5,"Southwest",3474],
["Oregon",0.143,76.3,"Far West",3680],
["Pennsylvania",0.189,84.1,"Mid-Atlantic",12820],
["Rhode Island",0.149,76.4,"New England",1209],
["South Carolina",0.175,68.2,"Southeast",3903],
["South Dakota",0.14,81.8,"Plains",578],
["Tennessee",0.178,80.4,"Southeast",5609],
["Texas",0.27,78.9,"Southwest",26163],
["Utah",0.245,78.6,"Rocky Mountain",3091],
["Vermont",0.325,91.4,"New England",1613],
["Virginia",0.155,81.2,"Southeast",6928],
["Washington",0.237,77.2,"Far West",7873],
["West Virginia",0.095,78.3,"Southeast",2221],
["Wisconsin",0.162,91.1,"Greater Lakes",6935],
["Wyoming",0.055,80.3,"Rocky Mountain",474]
]);
var data2 = google.visualization.arrayToDataTable([
["Location", "Parent", "Spending in $millions (size)"],
["United States", null, 340852],
["New England", "United States", 15622],
["Connecticut", "New England", 3930],
["Maine", "New England", 1297],
["Massachusetts", "New England", 6402],
["New Hampshire", "New England", 1171],
["Rhode Island", "New England", 1209],
["Vermont", "New England", 1613],
["Mid-Atlantic", "United States", 60428],
["Deleware", "Mid-Atlantic", 2227],
["Maryland", "Mid-Atlantic", 7073],
["New Jersey", "Mid-Atlantic", 12651],
["New York", "Mid-Atlantic", 25657],
["Pennsylvania", "Mid-Atlantic", 12820],
["Greater Lakes", "United States", 49777],
["Illinois", "Greater Lakes", 9588],
["Indiana", "Greater Lakes", 8680],
["Michigan", "Greater Lakes", 13059],
["Ohio", "Greater Lakes", 11515],
["Wisconsin", "Greater Lakes", 6935],
["Plains", "United States", 24863],
["Iowa", "Plains", 3251],
["Kansas", "Plains", 3737],
["Minnesota", "Plains", 9729],
["Missouri", "Plains", 5229],
["Nebraska", "Plains", 1488],
["North Dakota", "Plains", 851],
["South Dakota", "Plains", 578],
["Southeast", "United States", 73887],
["Alabama", "Southeast", 5165],
["Arkansas", "Southeast", 3342],
["Florida", "Southeast", 12636],
["Georgia", "Southeast", 9916],
["Kentucky", "Southeast", 5021],
["Louisiana", "Southeast", 5367],
["Mississippi", "Southeast", 3174],
["North Carolina", "Southeast", 10605],
["South Carolina", "Southeast", 3903],
["Tennessee", "Southeast", 5609],
["Virginia", "Southeast", 6928],
["West Virginia", "Southeast", 2221],
["Southwest", "United States", 37961],
["Arizona", "Southwest", 5454],
["New Mexico", "Southwest", 2870],
["Oklahoma", "Southwest", 3474],
["Texas", "Southwest", 26163],
["Rocky Mountain", "United States", 13682],
["Colorado", "Rocky Mountain", 7547],
["Idaho", "Rocky Mountain", 1634],
["Montana", "Rocky Mountain", 936],
["Utah", "Rocky Mountain", 3091],
["Wyoming", "Rocky Mountain", 474],
["Far West", "United States", 64632],
["Alaska", "Far West", 1635],
["California", "Far West", 47674],
["Hawaii", "Far West", 1794],
["Nevada", "Far West", 1976],
["Oregon", "Far West", 3680],
["Washington", "Far West", 7873]
]);
var options = {
title: 'Correlation between Average Freshman Graduation Rate (After Four Years of High School), Percentage of GDP Spent on Education, and State Expenditure on Education (2013)',
hAxis: {title: 'Percent of GDP'},
vAxis: {title: 'AFGR'},
bubble: {textStyle: {fontSize: 11}}
};
var options2 = {};
var chart = google.visualization.BubbleChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
var tree = google.visualization.TreeMap(document.getElementById('chart_div'));
tree.draw(data, {
headerHeight: 15,
fontColor: 'black',
showScale: true
});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>