issue binding dropdown ( error: "google.visualization.dashboard is not a constructor" )

[smre...@gmail.com]

I created a js fiddle of what I want to accomplish and it works perfectly.  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?

[Daniel LaLiberte]

You didn't include the first 2 lines from your jsfiddle javascript:

google.load('visualization', '1', {packages: ['controls']});

google.setOnLoadCallback(drawVisualization);

Check that they are the same in your actual code.  In particular, in your jsfiddle, it says {packages: ['controls']} rather than {packages: ['corechart']} .

Hope that helps.

--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[smre...@gmail.com]

ah ha!  I did have those lines but as you said, I was using packages corechart instead of controls.  That got me past the error, thank you.  Unfortunately the gauge is not rendering, just remains blank, so I'll keep plugging away.  thanks for your help!

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlali...@Google.com   5CC, Cambridge MA

daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA