I created a js fiddle of what I want to accomplish and it works perfectly.
*http://jsfiddle.net/sremias/psvpp/11/*
<http://jsfiddle.net/sremias/psvpp/11/> Very simply, it accepts user
selection from the dropdown and displays it in a gauge. When I add the
EXACT SAME javascript logic to my program, I get an error:
"google.visualization.dashboard is not a constructor" on the highlighted
line below.
Here is all the javascript (same as in the js fiddle)
function drawVisualization() {
// Prepare the data
var data = google.visualization.arrayToDataTable([
['Pct', 'Project'],
[0, 'PROJECT 10'],
[66, 'PROJECT 1'],
[100, 'PROJECT 2'],
]);
// set up gauge datatable
var gaugeData = new google.visualization.DataTable();
gaugeData.addColumn('string', 'Series');
gaugeData.addColumn('number', 'Average');
var gauge1 = new google.visualization.ChartWrapper({
chartType: 'Gauge',
dataTable: gaugeData,
containerId: 'gauge1',
options: {
width: 150,
height: 150,
min: 0,
max: 100,
animation: {
duration: 1000,
easing: 'inAndOut'
},
redFrom: 0,
redTo: 50,
yellowFrom: 50,
yellowTo: 75,
greenFrom: 75,
greenTo: 100,
majorTicks: ['0', '25', '50', '75', '100']
},
view: {
rows: [0] // restrict to the first row only
}
});
// Define category pickers for 'Project'
var ProjectPicker = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'projects',
options: {
filterColumnLabel:'Project',
filterColumnIndex: 1, // assumes you want to filter the first
column
ui: {
labelStacking: 'vertical',
allowTyping: true,
caption: 'Pick a project',
label: 'Select a project'
}
}
});
var dashboard = new
google.visualization.Dashboard(document.getElementById('dashboard'));
dashboard.bind([ProjectPicker], [gauge1]);
dashboard.draw(data);
}
This is my first attempt at binding a dropdown control to a gauge. I've
done other gauges and google charts but the binding is giving me issues.
With a regular gauge NOT bound to a control, I would do the following in
place of the last 3 lines in my js above:
var chart = new
google.visualization.Gauge(document.getElementById('charttasks'));
//where charttasks is the div id
chart.draw(data
Can anyone tell me what I'm doing wrong?
--
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/d/optout.
