I am having trouble with my dashboard. I took this code from a blog I
found on building dashboards. It works fine with a RangeFilter, LineChart,
and Table as long as their are only two columns but when three are added it
errors out. The table will show with the three columns and the linechart
will show just the two columns I specified, but the rangefilter errors out
with "All series on a given axis must be of the same data type×"
Here is the code I currently have:
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages : ['controls'] } );
google.setOnLoadCallback(createTable);
function createTable() {
// Create the dataset (DataTable)
var myData = new google.visualization.DataTable();
myData.addColumn('date', 'Date');
myData.addColumn('number', 'Weight');
myData.addColumn('string', 'Exercise Name');
myData.addRows([
[new Date(2014, 6, 12), 90, "Squat"],
[new Date(2014, 6, 13), 80, "Squat"],
[new Date(2014, 6, 14), 100, "Squat"],
[new Date(2014, 6, 15), 80, "Squat"],
[new Date(2014, 6, 16), 70, "Squat"]
]);
// Create a dashboard.
var dash_container = document.getElementById('dashboard_div'),
myDashboard = new google.visualization.Dashboard(dash_container);
// Create a date range slider
var myDateSlider = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control_div',
'options': {
'filterColumnLabel': 'Date'
}
});
// Table visualization
var myTable = new google.visualization.ChartWrapper({
'chartType' : 'Table',
'containerId' : 'table_div'
});
// Bind myTable to the dashboard, and to the controls
// this will make sure our table is update when our date changes
myDashboard.bind(myDateSlider, myTable);
// Line chart visualization
var myLine = new google.visualization.ChartWrapper({
'chartType' : 'LineChart',
'containerId' : 'line_div',
'view': {'columns': [0, 1]}
});
// Bind myLine to the dashboard, and to the controls
// this will make sure our line chart is update when our date changes
myDashboard.bind(myDateSlider, myLine );
myDashboard.draw(myData);
}
</script>
<div id="dashboard_div">
<div id="control_div"><!-- Controls renders here --></div>
<div id="line_div"><!-- Line chart renders here --></div>
<div id="table_div"><!-- Table renders here --></div>
</div>
Thanks for any help.
--
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 http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
