How do I make this code work (ignore //comments)? When run on jsbin.com, it is s
ID: 3907183 • Letter: H
Question
How do I make this code work (ignore //comments)? When run on jsbin.com, it is supposed to display 3 charts and 2 controls.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Beef Demand Data Visualization </title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', { 'packages': ['controls'] });
google.setOnLoadCallback(queryData);
// Send query to the Google Spreadsheet that contains the Cafe Sales data.
function queryData() {
// Don't forget to add "/gviz/tq?tq=" to the end of the spreadsheet URL.
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1Ppv-lR7T0JcivlkCVCWXHvY-k6VtaIUXODsjVR7Kq84/gviz/tq?tq=');
query.send(handleQueryResponse);
}
// Callback function that receives data from the Google Spreadsheet
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' '
+ response.getDetailedMessage());
return;
}
// If there is no error, retrieve data from the Google Spreadsheet response.
var dataTable = response.getDataTable();
// Create table chart
var tableChart = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'tableChart',
// 'view': { 'columns': [1, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 19, 20, 21] }
});
// Don't draw the chart now. The chart will be drawn when the dashboard is drawn.
// Create line chart
var lineChart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'line_chart_div',
'view': { 'columns': [1, 3, 4] },
'options': {
hAxis: { title: ‘Beef Price & Beef Consumption per Year’ },
vAxis: { format: '###'},
}
});
// Create column chart
var columnChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'bar_chart_div',
'view': { 'columns': [1, 2, 7, 3, 8] },
'options': {
hAxis: { title: ‘Chick Price, Real Chick Price, Beef Price, Real Beef Price per Year’ },
vAxis: { format: 'currency'},
'title': ‘Prices Per Year’ // Put the title of the chart here.
}
});
// Create controls
var beefFilter = new google.visualization.ControlWrapper({
'width': 1600,
'height': 1200,
'controlType': 'NumberRangeFilter',
'containerId': ‘beef_filter_div',
'options': {
'filterColumnLabel': ‘Beef Consumption’,
ui: { 'labelStacking': 'vertical', 'label': ‘Beef Consumption’ }
}
});
var dateFilter = new google.visualization.ControlWrapper({
'width': 1600,
'height': 1200,
'controlType': 'DateRangeFilter',
'containerId': 'date_filter_div',
'options': {
'filterColumnLabel': ‘Year’,
ui: {
'labelStacking': 'vertical',
'label': ‘Year’
}
}
});
// Create a dashboard
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
// Bind controls with charts. These controls and charts are now part of the dashboard.
dashboard.bind([beefFilter, dateFilter],
[tableChart, lineChart, columnChart]);
// Draw the dashboard.
dashboard.draw(dataTable);
}
</script>
</head>
<body>
<h2>Beef Demand Data Visualization</h2>
<div id="dashboard_div">
<table>
<tr>
<td>
<div id=“beef_filter_div">
</div>
<br />
<div id="date_filter_div">
</div>
</td>
<td>
<div id="tableChart">
</div>
<div id="line_chart_div">
</div>
<div id="bar_chart_div">
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Explanation / Answer
here two errors causing this problem.
Error-1:
in the beefFilter object 'options.filterColumnLabel' value should be 'BeefConsump' instead of 'Beef Consumption'.
because in the imported google docs we have the column(#4) name as 'BeefConsump'.
var beefFilter = new google.visualization.ControlWrapper({
'width': 1600,
'height': 1200,
'controlType': 'NumberRangeFilter',
'containerId': ‘beef_filter_div',
'options': {
'filterColumnLabel': ‘BeefConsump’,
ui: { 'labelStacking': 'vertical', 'label': ‘Beef Consumption’ }
}
});
Error-2:
in dateFilter object 'options.filterColumnLabel' : 'Year' is not a date. that is why we are getting error as:
One or more participants failed to draw()
Column 0 is not a date
if we can change the Year column format it will render properly.
to check only beefFilter charts (with no errors) :
replace
dashboard.bind([beefFilter, dateFilter],[tableChart, lineChart, columnChart]);
with
dashboard.bind([beefFilter],[tableChart, lineChart, columnChart]);
for only dateFilter charts (getting error due to date format):
replace with
dashboard.bind([dateFilter],[tableChart, lineChart, columnChart]);
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.