Hi,
I am trying to draw line and bar chart at my default page. I follow the
example code but it through exception in the console.
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js";></script>
<script type="text/javascript"
src="https://www.google.com/jsapi";></script>
<script type="text/javascript">
google.charts.load('current', { packages: ['corechart'] });
$(document).ready(function () {
displayDashboard();
setInterval(function () {
displayDashboard();
}, 60000);
});
function displayDashboard() {
var dailyBookingChartData;
var monthlyChartData;
google.charts.setOnLoadCallback(getDailyBookingChartData);
google.charts.setOnLoadCallback(getMonthlyChartData);
}
function getDailyBookingChartData() {
$.ajax({
type: "POST",
url: "/services/dashboard.asmx/getBookedRoomsPerHour",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
dailyBookingChartData = data.d;
},
error: function () {
console.log("Error loading getDailyBookingChartData!
Please try again.");
}
}).done(function () {
drawDailyBookingChart();
});
}
function drawDailyBookingChart() {
var jsonChartData = $.parseJSON(dailyBookingChartData);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('datetime', 'Time of Day');
dataTable.addColumn('number', 'Centralen');
dataTable.addColumn('number', 'Odenplan');
dataTable.addColumn('number', 'Strandvägen');
for (var i = 0; i < jsonChartData.length; i++) {
dataTable.addRow([new Date(jsonChartData[i].Tid),
jsonChartData[i]["Centralen"], jsonChartData[i]["Odenplan"],
jsonChartData[i]["Strandvägen"]]);
}
var options = {
bars: 'vertical',
hAxis: {
title: '',
format: 'H:mm',
minValue: 6,
maxValue: 23
},
vAxis: {
title: '# Mötesrum Bokningar',
format: 'decimal'
}
};
var columnChart = new
google.charts.Bar(document.getElementById('dailyBookingChart'));
columnChart.draw(dataTable,
google.charts.Bar.convertOptions(options));
}
function getMonthlyChartData() {
$.ajax({
type: "POST",
url:
"/services/dashboard.asmx/getEstimatedAndDebitedStatisticsPerDay",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
monthlyChartData = data.d;
},
error: function () {
console.log("Error loading getMonthlyChartData! Please
try again.");
}
}).done(function () {
drawMonthChart();
});
}
function drawMonthChart() {
var jsonChartData = $.parseJSON(monthlyChartData);
console.log(jsonChartData);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('date', 'Tid');
dataTable.addColumn('number', 'estimated');
dataTable.addColumn('number', 'debited');
for (var i = 0; i < jsonChartData.length; i++) {
dataTable.addRow([new Date(jsonChartData[i].Date),
jsonChartData[i]["estimated"], jsonChartData[i]["debited"]]);
}
var options = {
hAxis: {
title: 'Month',
}
};
var lineChart = new
google.charts.lineChart(document.getElementById('monthlyChart'));
lineChart.draw(dataTable,
google.charts.lineChart.convertOptions(options));
}
</script>
Default.aspx:127 Uncaught TypeError: google.charts.lineChart is not a
constructor
at drawMonthChart (Default.aspx:127)
at Object.<anonymous> (Default.aspx:109)
at l (jquery.min.1.8.3.js:2)
at Object.fireWith [as resolveWith] (jquery.min.1.8.3.js:2)
at T (jquery.min.1.8.3.js:2)
at XMLHttpRequest.r (jquery.min.1.8.3.js:2)
drawMonthChart @ Default.aspx:127
(anonymous) @ Default.aspx:109
l @ jquery.min.1.8.3.js:2
fireWith @ jquery.min.1.8.3.js:2
T @ jquery.min.1.8.3.js:2
r @ jquery.min.1.8.3.js:2
XMLHttpRequest.send (async)
send @ jquery.min.1.8.3.js:2
ajax @ jquery.min.1.8.3.js:2
getMonthlyChartData @ Default.aspx:97
Promise.then (async)
google.G.K.U.hl @ loader.js:231
displayDashboard @ Default.aspx:34
(anonymous) @ Default.aspx:25
setInterval (async)
(anonymous) @ Default.aspx:24
l @ jquery.min.1.8.3.js:2
fireWith @ jquery.min.1.8.3.js:2
ready @ jquery.min.1.8.3.js:2
A @ jquery.min.1.8.3.js:2
2Default.aspx:93 Uncaught TypeError: google.charts.Bar is not a constructor
at drawDailyBookingChart (Default.aspx:93)
at Object.<anonymous> (Default.aspx:67)
at l (jquery.min.1.8.3.js:2)
at Object.fireWith [as resolveWith] (jquery.min.1.8.3.js:2)
at T (jquery.min.1.8.3.js:2)
at XMLHttpRequest.r (jquery.min.1.8.3.js:2)
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/acce3ea1-1f81-42f5-8bbe-57cfc424dae4%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
