Menu
I'm trying to work with Google charts API, but I get an error I can't understand:
TypeError: google.charts.Bar is not a constructor
Here is my code:
<div class="row">
<div class="col-md-12" style="padding-left:3px; padding-right:3px">
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Date', 'val1', 'val2' , 'val3', 'val4'],
[ '09', 12, 5, 9, 2],
[ '10', 32, 19, 16, 9],
[ '11', 2, 7, 5, 12],
[ '12', 23, 11, 9, 18],
[ '13', 5, 7, 4, 12],
[ '14', 21, 16, 12, 43],
[ '15', 2, 1, 2, 3],
[ '16', 9, 12, 18, 32],
]);
var options = {
height: 400,
title: 'Viste journalière',
intervals: { 'style':'area' },
hAxis: {title: 'Jour', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 420px;"></div>
</body>
</html>
</div>
<div class="row">
<div class="col-md-4" style="margin-left:10px; padding-left:3px; padding-right:3px">
<html>
<head>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Titre', 'Comment', 'like', 'no'],
[ 'text1', 7, 10, 3],
[ 'text2', 2, 4, 5],
[ 'text3', 4, 3, 2],
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options)); }
</script>
</head>
<body>
<div id="barchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>
</div>
</div>
418
Your HTML markup is strange, and I'm not sure if that is intentional or not. According to the docs, you should load everything in a single call to google.charts.load() and you should be loading both the corechart and bar packages there. All of your javascript should also be in the same <script></script> tag.
Here's a working example with two charts on the same page:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
google.charts.setOnLoadCallback(drawChartTwo);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Date', 'val1', 'val2' , 'val3', 'val4'],
[ '09', 12, 5, 9, 2],
[ '10', 32, 19, 16, 9],
[ '11', 2, 7, 5, 12],
[ '12', 23, 11, 9, 18],
[ '13', 5, 7, 4, 12],
[ '14', 21, 16, 12, 43],
[ '15', 2, 1, 2, 3],
[ '16', 9, 12, 18, 32],
]);
var options = {
height: 400,
title: 'Viste journalière',
intervals: { 'style':'area' },
hAxis: {title: 'Jour', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
function drawChartTwo() {
var data = google.visualization.arrayToDataTable([
['Titre', 'Comment', 'like', 'no'],
[ 'text1', 7, 10, 3],
[ 'text2', 2, 4, 5],
[ 'text3', 4, 3, 2],
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
<div class="row">
<div class="col-md-12" style="padding-left:3px; padding-right:3px">
<div id="chart_div" style="width: 100%; height: 420px;"></div>
</div>
</div>
<div class="row">
<div class="col-md-4" style="margin-left:10px; padding-left:3px; padding-right:3px">
<div id="barchart_material" style="width: 900px; height: 500px;"></div>
</div>
</div>
Edit: Example works now and added a jsfiddle
94
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
