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
On Thursday, December 19, 2013 3:52:25 AM UTC-5, Ravindra Gharge wrote:
>
> 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
>
>
> On Thu, Dec 19, 2013 at 12:14 AM, asgallant
> <[email protected]<javascript:>
> > wrote:
>
>> 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.
>>
>>
>> On Wednesday, December 18, 2013 1:19:45 PM UTC-5, Ravindra Gharge wrote:
>>>
>>> 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
>>>
>>>
>>>
>>> On Wednesday, December 18, 2013 8:55:07 PM UTC+5:30, asgallant wrote:
>>>>
>>>> I wrote a hack that turns a CategoryFilter into a column selector:
>>>> http://jsfiddle.net/asgallant/WaUu2/. Will that work for you?
>>>>
>>>> On Wednesday, December 18, 2013 5:03:54 AM UTC-5, Ravindra Gharge wrote:
>>>>>
>>>>> 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);
>>>>> }
>>>>>
>>>> --
>> 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
>> [email protected] <javascript:>.
>> To post to this group, send email to
>> [email protected]<javascript:>
>> .
>> Visit this group at
>> http://groups.google.com/group/google-visualization-api.
>> For more options, visit https://groups.google.com/groups/opt_out.
>>
>
>
--
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.
