modify the ControlWrapper of the dashboard

[Ravindra Gharge]

Following function create the dashboard with the give values in the data object
i want to create the ControlWrapper with the values user 1 , user 2 , user 3 from the data object
and depending on the selection of multiple/single users line on the chart should plot
please help

function drawVisualization() {
  // Prepare the data
  var data = google.visualization.arrayToDataTable([
    ['Year', 'sales', 'user 1', 'user 2','user 3'],
    ['2010',  268,    24, 51,     193],
    ['2012',  50,     0,  0,      50 ],
    ['2013',  0,      0,  0,      0, ]
  ]);

  // Define a slider control for the Age column.
  var slider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'control1',
    'options': {
      'filterColumnLabel': 'sales',
    'ui': {'labelStacking': 'vertical'}
    }
  });

  // 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 Pie chart
  var pie = new google.visualization.ChartWrapper({
    'chartType': 'LineChart',
    'containerId': 'chart1',
    'options': {
      'width': 300,
      'height': 300,
      'legend': 'none',
      'title': 'Donuts eaten per person',
      'curveType': "function"
    },
    // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
    // from the 'data' DataTable.
    
  });

  // Define a table
  var table = new google.visualization.ChartWrapper({
    'chartType': 'Table',
    'containerId': 'chart2'

  });

  // 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);
}

[asgallant]

I wrote a hack that turns a CategoryFilter into a column selector: http://jsfiddle.net/asgallant/WaUu2/.  Will that work for you?

[Ravindra Gharge]

Thanks for the reply sir.
this hack will work for me.
now i want know that is it possible to insert any third part control i.e. multi select box like this http://jsfiddle.net/oumichaelm/Mp2bK/11/    to be a part of dashboard as a controlwraper

[asgallant]

Yes, you can use 3rd-party controls, but they have to be compatible with the Visualization API.  The control in the example you posted does not appear be be designed for use with the Visualization API, so it would need to be modified or wrapped in another object to make it compatible.

[Ravindra Gharge]

I want to add the multiselect box
LIKE
<select  name="yearSelect[]" style='width:123px;' multiple id="yearSelect" size='8'>
          <option selected value="">    abc </option>

</select>

instead of the bellow Google api's CategoryFilter but it must function simillar to CategoryFilter

 var columnFilter = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'colFilter_div',
        dataTable: columnsTable,
        options: {
            filterColumnLabel: 'colLabel',
            ui: {
                label: 'Columns',
                allowTyping: false,
                allowMultiple: true,
                allowNone: false,
                selectedValuesLayout: 'belowStacked'
            }
        },
        state: initState
    });

Please help

Thanks

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/hSQCER6dO-M/unsubscribe.
To unsubscribe from this group and all its topics, 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/groups/opt_out.

[asgallant]

You will have to write the code for it yourself, there is no "easy" way to make a new control.  There is no documentation for creating new controls, so you have to figure it out by experimentation.  As near as I can tell, your control has to expose at least the following methods:

constructor: a function that accepts the container div as an argument
draw: a function that accepts a DataTable and an options object as arguments, and draws the control
clear: a function that destroys the control
resetControl: a function that returns the control to an unfiltered state
applyFilter: a function that applies the filtering logic of the control to the DataTable passed in via the draw method, and returns a filtered DataTable

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.