I'm swinging between Highcharts and Google Charts to visualize my data. I like the charts produced by Highcharts, but I wonder whether Highcharts supports features like the Controls and Dashboard in Google Charts.
Below is a demo of how controls and dashboard in Google charts look like. If you run the code snippet, you can see two controls (a range slider and a gender filter) and two charts (a pie chart and a table chart). We can use the slider and filter to control how charts are displayed.
Can Highcharts do something like this? I didn't seem to find any related documentation. If it can, any sample code would be much appreciated.
// Load the Visualization API and the controls package.
google.load('visualization', '1.0', {
'packages': ['controls']
});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawDashboard);
// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
function drawDashboard() {
// Create our data table.
var data = google.visualization.arrayToDataTable([
['Name', 'Gender', 'Age', 'Donuts eaten'],
['Michael', 'Male', 12, 5],
['Elisa', 'Female', 20, 7],
['Robert', 'Male', 7, 3],
['John', 'Male', 54, 2],
['Jessica', 'Female', 22, 6],
['Aaron', 'Male', 3, 1],
['Margareth', 'Female', 42, 8]
]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a range slider, passing some options
var donutRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Donuts eaten'
}
});
// Create a category filter for gender
var genderFilter = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'cfilter_div',
'ui': {
allowMultiple: false,
labelStacking: 'vertical'
},
'options': {
'filterColumnLabel': 'Gender'
}
});
// Create a pie chart, passing some options
var pieChart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart_div',
'options': {
'width': 300,
'height': 300,
'pieSliceText': 'value',
'legend': 'right'
},
'view': {
'columns': [0, 3]
}
});
var tableChart = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table_div'
});
// Establish dependencies, declaring that 'filter' drives 'pieChart',
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(donutRangeSlider, [pieChart, tableChart]);
dashboard.bind(genderFilter, [pieChart, tableChart]);
// Draw the dashboard.
dashboard.draw(data);
}
<script src="https://www.google.com/jsapi"></script>
<div id="dashboard_div">
<table>
<tr>
<td>
<div id="filter_div"></div>
</td>
<td>
<div id="cfilter_div"></div>
</td>
</tr>
<tr>
<td>
<div id="chart_div"></div>
</td>
<td>
<div id="table_div"></div>
</td>
</tr>
</table>
</div>
Related
I'm trying to combine two charts and a filter, specifically a Pie Chart and Sankey Diagram with no success. There is a similar answered question, but the difference with my problem is that I am embedding my charts inside a dashboard so I can use the slicer filter.
I have tried several ideas to solve it but only the Pie Chart and the slicer appear or simply nothing appears.
Ideas I have tried:
Passing only the columns I need in the view property of the ChartWrapper class.
Naming the columns and casting the data types as shown in the examples for the Sankey diagram
Passing only the data I need to the Sankey through the dataTable property of the ChartWrapper class
For the moment, I have used the sample code from Google Charts documentation. What I am trying to do is to make appear both charts, so I can arrange de visualizations in the dashboard and then use my own data.
Thanks for the help!
Sample code bellow:
I include the loader in the partials/header file
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<%- include("partials/header"); -%>
<script type="text/javascript">
// Load the Visualization API and the controls package.
google.charts.load('current', {
'packages': ['corechart', 'controls', 'sankey']
});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawDashboard);
// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
function drawDashboard() {
// Create our data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Donuts eaten');
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addRows([
['Michael', 5, 'A', 'X', 2],
['Elisa', 7, 'A', 'Y', 7],
['Robert', 3, 'A', 'Z', 6],
['John', 2, 'B', 'X', 1],
['Jessica', 6, 'B', 'Y', 9],
['Aaron', 1, 'B', 'Z', 4],
['Margareth', 8, 'C', 'X', 4]
]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a range slider, passing some options
var donutRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Donuts eaten'
},
'view': {
'columns': [0, 1]
}
});
// Create a pie chart, passing some options
var pieChart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart_div',
'options': {
'width': 300,
'height': 300,
'pieSliceText': 'value',
'legend': 'right'
},
'view': {
'columns': [0, 1]
}
});
var sankeyChart = new google.visualization.ChartWrapper({
'chartType': 'Sankey',
'containerId': 'sankey_div',
'options': {
'width': 600
},
'view': {
'columns': [2, 3, 4]
}
});
// Establish dependencies, declaring that 'filter' drives 'pieChart',
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(donutRangeSlider, pieChart, sankeyChart);
// Draw the dashboard.
dashboard.draw(data);
}
</script>
<div id="dashboard_div">
<!--Divs that will hold each control and chart-->
<div id="filter_div"></div>
<div id="chart_div"></div>
<div id="sankey_div" style="width: 900px; height: 300px;"></div>
</div>
<%- include("partials/footer"); -%>
This question already has answers here:
Data column(s) for axis #0 cannot be of type string error in google chart
(6 answers)
Closed 6 years ago.
I am trying to make a google chart dashboard and tried the following code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['controls']});
</script>
<script type="text/javascript">
function drawVisualization() {
var listOfValues = document.getElementById("id1").value ;
var temp2 = null;
var temp3 = null ;
var longArray = ['Year','Positive','Negative','Neutral','Comments','Status','Score'];
var shortArrays = [], m, len;
var arrayOfArray = [];
var temp = listOfValues.split("-");
for(var i=0; i<temp.length; i++){
temp2 = temp[i].split(',');
if(temp2.length == 7){
for(var j=0; j<temp2.length;j++){
temp3 = temp2[j].split(',');
longArray.push(temp3[0]);
}
}
}
for (m = 0, len = longArray.length; m < len; m += 7) {
shortArrays.push(longArray.slice(m, m + 7));
console.log(shortArrays);
}
for (m = 0, len = shortArrays.length; m < len; m++) {
arrayOfArray.push(shortArrays[m]);
}
// Prepare the data
var data = google.visualization.arrayToDataTable(arrayOfArray);
// Define a category picker control for the Gender column
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Year',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': true
}
}
});
// Define a category picker control for the Gender column
var categoryPicker2 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'categoryPick2',
'options': {
'filterColumnLabel': 'Status',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': true
}
}
});
//Define a combo chart
var combo = new google.visualization.ChartWrapper({
'chartType':'ComboChart',
'containerId':'chart2',
'options': {
'title' : 'Sentiment Analysis',
// setting the "isStacked" option to true fixes the spacing problem
'isStacked': false,
'height': 300,
'width': 300,
'vAxis': {title: "Sentiment"},
'hAxis': {title: "Month"},
'seriesType': "bars",
'series': {5: {type: "line"}}
},
// 'view': {'columns': [0, 1,2,3]}
'view': {
// set the columns to use in the chart's view
// calculated columns put data belonging to each country in the proper column
columns: [0,1,2,3]
}
});
// Define a table
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart4',
'options': {
'view': {'columns': [1,2]},
'width': '700px',
'height':'100px'
}
});
// Define a table
var table2 = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table2',
'options': {
'width': '200px'
},
'view': {'columns': [0,5]}
});
//Define a line chart
var line = new google.visualization.ChartWrapper({
'chartType':'LineChart',
'containerId':'lineChart',
'options': {
'label':'Sentiment Analysis'
},
'view': {'columns': [4,6]}
});
// Create a dashboard
// new google.visualization.Dashboard(document.getElementById('dashboard'));
new google.visualization.Dashboard(document.getElementById('dashboard')).
// Establish bindings, declaring the both the slider and the category
// picker will drive both charts.
bind([categoryPicker2], [line,table2]).
bind([categoryPicker], [combo,table]).
// Draw the entire dashboard.
draw(data);
//draw(data2);
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="dashboard">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="control1"></div>
<div id="control2"></div>
<div id="control3"></div>
<div id="categoryPick2"></div>
</td>
<td style='width: 600px'>
<div style="float: left;" id="chart1"></div>
<div style="float: left;" id="chart2"></div>
<div style="float: right;" id="chart3"></div>
<div style="float: right;" id="chart4"></div>
<div style="float: right;" id="lineChart"></div>
<div style="float: right;" id="table2"></div>
</td>
</tr>
</table>
<input type="hidden" id="id1" value=" ${listVal}" />
<input type="hidden" id="id2" value=" ${header1}" />
</div>
<div id="chart_div2" ></div>
</body>
</html>
After executing this code I get table data clearly; but, it doesn't show the chart properly (I have used combo chart and Line chart). It is throwing the following error:
"Data column(s) for axis #0 cannot be of type string"
Can someone please tell how to solve this issue.
Thanks.
when you alert listOfValues you will get these values :
2010,84,65,45,facebook,bad,12345-2011,64,75,85,facebook,bad,2345-
Basically these are two rows in database which i have separated by a hyphen. Please let me know if you need further details.
Your data series must be type "number" in order to draw a chart (your x-axis data can be type "string"). Since you are spliting a string into an array, the array elements will all be strings. Assuming all of your data is numeric, you can replace this line:
longArray.push(temp3[0]);
with this:
longArray.push(parseFloat(temp3[0]));
or this, if your data is all integers:
longArray.push(parseInt(temp3[0], 10));
[Edit: more complete answer to deal with different datatypes]
There are two ways you can address this. The first way is to define your column data types up front:
var longArray = [
{label: 'Year', type: 'number'},
{label: 'Positive', type: 'number'},
{label: 'Negative', type: 'number'},
{label: 'Neutral', type: 'number'},
{label: 'Comments', type: 'string'},
{label: 'Status', type: 'string'},
{label: 'Score', type: 'number'}
];
You can also do some crude type detection when inputting your data:
for(var i=0; i<temp.length; i++){
temp2 = temp[i].split(',');
if(temp2.length == 7){
for(var j=0; j<temp2.length;j++){
// this does nothing except make temp2[j] into a 1-element array
// temp3[0] === temp2[j], since you split on ',' already
temp3 = temp2[j].split(',');
if (temp3[0] == parseInt(temp3[0])) {
longArray.push(parseInt(temp3[0]));
}
else if (temp3[0] == parseFloat(temp3[0])) {
longArray.push(parseFloat(temp3[0]));
}
else {
longArray.push(temp3[0]);
}
}
}
}
You can combine these two methods just in case something slips through. See them working here: http://jsfiddle.net/asgallant/xLKcx/
As an aside, I suggest cleaning up your code - you have a lot of spaghetti code in your section building the data array. Here's a simpler version: http://jsfiddle.net/asgallant/xLKcx/1/
I'm trying to figure out how to take an initial data table, apply multiple category filters to it, and illustrate a combination of simple and summary statistics of the resulting data subset through pie charts and bar graphs.
I've created a sample script out of the Google dependent-filters example that will help explain. In a nutshell, this dataset has two countries (USA and France) with two regions each (New York/California and Ile-de-France/Provence). The population of each region is broken down into four components: Dark Blue, Light Blue, Dark Green, and Light Green.
Here's what I want: when selections are made from the two category filters for country and region (e.g., USA & New York), I want (a) a bar chart that shows the populations of the four population groups in that region; (b) a pie chart that shows the two-way split between Darks and Lights in that region (using two slices, labeled "Dark" and "Light") and (c) a pie chart that shows the two-way split between Blues and Greens in that region (also using two slices, labeled "Blue" and "Green").
Getting (a) is simple enough, but I can't figure out the right approach for (b) and (c). I don't need to do more than one region at once (e.g., select USA and leave the region filter open, and get summary stats for New York and Cali combined). All I need is to take four rows of data from one region and produce three charts.
I've started experimenting with adding calculated columns in the dataview but then I realized that the number of rows needs to change, so simply appending an extra column isn't all that's needed. I need to take the four-row dataview given to me by the category filters and somehow transform it into two-row dataviews that sum up the four-row view, and do it in different ways for each pie chart. Problem is, I have no idea how to do this, and the Internet isn't helping.
Here's the patch of code I've been staring at for hours. I've lost some of my prior experimentation - I've been playing mostly with the pie chart "view:" sections, but after getting nowhere I reverted them to the same view as the bar chart and forgot to save a draft - so I'm not sure how helpful it's going to be. Nonetheless:
google.load('visualization', '1.1', {packages: ['controls']});
function drawVisualization() {
// Prepare the data
var data = google.visualization.arrayToDataTable([
['Country', 'Region/State', 'Color', 'Population'],
['USA', 'California', 'Dark Green', 700000],
['USA', 'California', 'Light Green', 776733],
['USA', 'California', 'Dark Blue', 3000000],
['USA', 'California', 'Light Blue', 3694820],
['USA', 'New York', 'Dark Green', 2000000],
['USA', 'New York', 'Light Green', 657592],
['USA', 'New York', 'Dark Blue', 8000000],
['USA', 'New York', 'Light Blue', 3175173],
['France', 'Ile-de-France', 'Dark Green', 2000000],
['France', 'Ile-de-France', 'Light Green', 1093031],
['France', 'Ile-de-France', 'Dark Blue', 100000],
['France', 'Ile-de-France', 'Light Blue', 51372],
['France', 'Provence', 'Dark Green', 800000],
['France', 'Provence', 'Light Green', 252395],
['France', 'Provence', 'Dark Blue', 300000],
['France', 'Provence', 'Light Blue', 73556]
]);
// Define category pickers for 'Country', 'Region/State' and 'City'
var countryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Country',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false,
'allowNone': false
}
},
'state': {
selectedValues: ['USA']
}
});
var regionPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Region/State',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false,
'allowNone': false
}
},
'state': {
selectedValues: ['California']
}
});
// Define a bar chart to show 'Population' data
var barChart = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
'containerId': 'chart1',
'options': {
'width': 300,
'height': 300
},
'view': {
'columns': [2, 3]
}
});
var pieChartA = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart2',
'options': {
'width': 300,
'height': 300
},
'view': {
'columns': [2, 3]
}
});
var pieChartB = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart3',
'options': {
'width': 300,
'height': 300
},
'view': {
'columns': [2, 3]
}
});
// Create the dashboard.
var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
dash.bind(countryPicker, regionPicker);
dash.bind(regionPicker, [barChart, pieChartA, pieChartB]);
dash.draw(data);
}
google.setOnLoadCallback(drawVisualization);
Here's the JSFiddle:
http://jsfiddle.net/james_twc/7nLZ8/
Unfortunately, while it's working fine in the Google Code Playground it's not working in JSFiddle. I'm using jQuery 1.8.3, "no wrap - in(body)", normalized CSS unchecked, and "http://www.google.com/jsapi?fake=.js" as an external resource, all to no avail. To get the code to propagate you'll either have to wave your magic wand over my JSFiddle or copy/paste the code to the Playground or another environment that's less finicky about Google APIs.
Also: I'm open to re-configuring the database structure if that's what it takes.
Any helpful commentary is appreciated. Thank you!
James
To make this work, you have to aggregate the filtered data and use the aggregated data to draw your PieCharts. The Dashboards do not support this sort of relationship, so you have to cheat. Bind the BarChart to your Dashboard, but do not bind the PieCharts. Then set up a "ready" event handler for the BarChart that gets the filtered data, aggregates it, and draws the PieCharts with the aggregated data. Here's an example:
// use a "ready" event handler on the BarChart to aggregate the data for the PieCharts
google.visualization.events.addListener(barChart, 'ready', function () {
// get the filtered data used to draw the BarChart
var dt = barChart.getDataTable();
// group data by dark/light
var darkLightGroup = google.visualization.data.group(dt, [{
type: 'string',
label: dt.getColumnLabel(2),
column: 2,
modifier: function (val) {
return val.split(' ')[0];
}
}], [{
type: 'number',
label: dt.getColumnLabel(2),
column: 3,
aggregation: google.visualization.data.sum
}]);
pieChartA.setDataTable(darkLightGroup);
pieChartA.draw();
// group data by color
var colorGroup = google.visualization.data.group(dt, [{
type: 'string',
label: dt.getColumnLabel(2),
column: 2,
modifier: function (val) {
return val.split(' ')[1];
}
}], [{
type: 'number',
label: dt.getColumnLabel(2),
column: 3,
aggregation: google.visualization.data.sum
}]);
pieChartB.setDataTable(colorGroup);
pieChartB.draw();
});
see it working here: http://jsfiddle.net/asgallant/7nLZ8/4/
I'm trying to perform a fairly basic procedure. I have a lengthy data table with large cell sizes to use with Google Visualization. Before creating the page I'd like to replace the large cells with codes and abbreviations to keep the file sizes and loading times down. I can handle that. However, when a cell or column value/name/label shows up in the visualization itself I'd like to see a longform version of the value (ex. 'Male' in original dataset -> 'M' in Google Visualization data table -> 'Male' in category filter dropdown, tooltip, etc.), and this has been unexpectedly problematic.
I've tried to replicate the issue (and my failed attempt to fix it) in the modified Google Playground example below. In this example I've changed the initial dataset to have 'M' and 'F' in the Gender column, and I still want the visualization to display 'Male' and 'Female' in the dropdown and the displayed table as it does in the original visualization.
My attempt to fix is labeled ATTEMPT TO FIX GENDER below; basically, I'm trying to create a DataView of the original table and replace the Gender column with a calculated column transforming the 'M's and 'F's into 'Male's and 'Female's...but I'm not sure if this is a wise approach, even if I could get it to work (which I can't). The point of this runaround is to avoid replacing every short value in the original table with a long one; I only want to replace table values as they are being displayed in the visualization. But I can't find another approach here or elsewhere, and I'm a bit new to this stuff so I don't think I can come up with one without some guidance. At least, not if the past several hours of failure are any indication.
Any advice or suggestions would be sorely appreciated. The original code example is here.
function drawVisualization() {
// Prepare the data
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Gender');
data.addColumn('number', 'Age');
data.addColumn('number', 'Donuts Eaten');
data.addRows([
['Michael' , 'M', 12, 5],
['Elisa', 'F', 20, 7],
['Robert', 'M', 7, 3],
['John', 'M', 54, 2],
['Jessica', 'F', 22, 6],
['Aaron', 'M', 3, 1],
['Margareth', 'F', 42, 8],
['Miranda', 'F', 33, 6]
]);
*******//ATTEMPT TO FIX GENDER
/*var sexfix = function (data, row) {
var val = data.getValue(row, 1);
switch (val) {
case 'M':
val = 'Male';
break;
case 'F':
val = 'Female';
break;
default:
alert('error');
return 'Error!';
}
}
var dview = new google.visualization.DataView(data);
dview.setColumns([0,{calc: sexfix, type:'string'}, 2, 3]);
********/
// Define a slider control for the Age column.
var slider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Age',
'ui': {'labelStacking': 'vertical'}
}
});
// Define a category picker control for the Gender column
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Gender',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
// Define a Pie chart
var pie = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart1',
'options': {
'width': 300,
'height': 300,
'legend': 'none',
'title': 'Donuts eaten per person',
'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
'pieSliceText': 'label'
},
// Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
// from the 'data' DataTable.
'view': {'columns': [0, 3]}
});
// Define a table
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart2',
'options': {
'width': '300px'
}
});
// Create a dashboard
new google.visualization.Dashboard(document.getElementById('dashboard')).
// Establish bindings, declaring the both the slider and the category
// picker will drive both charts.
bind([slider, categoryPicker], [pie, table]).
// Draw the entire dashboard.
draw(data);
}
EDIT: Solution below. In summary:
1) under dview.setColumns, include a label name as an option (e.g., "label: 'Gender'") so that controls and charts can refer to the calculated column by label;
2) draw the view, not the table (final line should be: "draw(dview)");
3) change the variable renaming in my sexfix code from general format "var = 'X'" to "return: {v: 'X' f: 'Xxxxxx'}"; and
4) either add the line "addFormattedValue: true" or use the "view:" option in the ControlWrappers and ChartWrappers to display formatted values.
I suspect that you have two problems in your code. The first is that when you added the "Gender" column to the DataView, you left off the column label, which is needed because your gender filter has the filterColumnLabel option set instead of filterColumnIndex. Add the label in to fix:
{calc: sexfix, type:'string', label: 'Gender'}
The second problem is that you are drawing your Dashboard with the DataTable instead of the DataView:
new google.visualization.Dashboard(document.getElementById('dashboard')).
// Establish bindings, declaring the both the slider and the category
// picker will drive both charts.
bind([slider, categoryPicker], [pie, table]).
// Draw the entire dashboard.
draw(dview);
timechart = new google.visualization.Dashboard(document.getElementById('timechart'));
I get the undefined is not a function on this line. I have other charts initialized on the same page and they work fine. For reference, the rest of my relevant code:
var timechartGraph = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'timechart-graph',
'options': {
// Use the same chart area width as the control for axis alignment.
'legend': {'position': 'right'}
},
// Convert the first column from 'date' to 'string'.
'view': {
'columns': [
{
'calc': function(dataTable, rowIndex) {
return dataTable.getFormattedValue(rowIndex, 11);
},
'type': 'string'
},1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}
});
var timechartRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'timechart-range-slider',
'options': {
// Filter by the date axis.
'filterColumnIndex': 11,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'hAxis': {'baselineColor': 'none'}
},
// Display a single series that shows the closing value of the stock.
// Thus, this view has two columns: the date (axis) and the stock value (line series).
'chartView': {
'columns': [11, 12]
},
// 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
//'minRangeSize': 86400000
}
},
// Initial range: 2012-02-09 to 2012-03-20.
//'state': {'range': {'start': new Date(2012, 1, 9), 'end': new Date(2012, 2, 20)}}
});
timechartData = new google.visualization.DataTable();
timechart = new google.visualization.Dashboard(document.getElementById('timechart'));
timechart.bind(timechartRangeSlider, timechartGraph);
If you're loading just corechart right now, you're code probably looks something like this:
google.load('visualization', '1', {
'packages': ['corechart']
});
You have to load the controls package as well, like this:
google.load('visualization', '1', {
'packages': ['corechart', 'controls']
});
And that should make google.visualization.Dashboard defined.