Controls And Dashboards | Charts | Google Developers Google Dashboards

Controls and Dashboards | Charts | Google Developers

Hi, selamat pagi, pada kali ini akan menjelaskan tentang google dashboards Controls and Dashboards | Charts | Google Developers simak selengkapnya

On this page, you'll see how to combine many charts into dashboards including perform users controls to manipulate what facts they show.

Overview

Dashboards are a simple method to organize together including run many charts that portion the same fundamental data. By using the APIs described inside this page, you can free yourself from the trouble of wiring together including coordinating all the charts that are share of a dashboard.

Dashboards are marked using classes. Dashboard instances receive a DataTable containing the facts to visualize including take be concerned of illustration including distributing the facts to all the charts that are part of the dashboard.

Controls are user interface widgets (such while class pickers, series sliders, autocompleters...) you interact with inside order to go (by car) the facts managed via a dashboard including the charts that are share of it.

Controls are marked using classes. You can count up ControlWrapper instances to a dashboard, where they act same as pipes including valves inside a plumbing system. They collect user information including utilize the facts to decide which of the facts the dashboard is managing should be present made ready to the charts that are share of it.

Have a see at the subsequent specimen where a class picker including a series slider are worn to go (by car) the facts visualized via a pie chart.

Note: The dashboard is interactive. Try operating the controls including see the table alteration inside real time.

Using Controls including Dashboards

Here are the door key steps intended creating a dashboard including embedding it inside your page. You'll find a code snippet demonstrating all these steps below, followed via full facts on every step.

. Your folio essential have while many HTML elements while needed to keep each representative of a dashboard. This includes the dashboard itself including all the controls including charts that are share of it. Typically you'll utilize a <div> intended every one.
. A dashboard requires only two libraries to be present included or loaded on top of the page: the Google AJAX API including the Google Visualization controls package.
. You'll need to make or get ready the data to visualize; this method either specifying the facts yourself inside code, or querying a remote site intended data.
. Instantiate your dashboard via profession its constructor including passing inside a allusion to the <div> element that drive keep it.
. Create google.visualization.ChartWrapper and google.visualization.ControlWrapper instances to tell every table including control that the dashboard manages.
. Call bind() on top of your dashboard including pass inside the power including table instances to enable the dashboard have knowledge of what to manage. Once a power including table are compelled together, the dashboard updates the table to match the constraints the power enforces summit of} the data.
. Call draw() on top of your dashboard including pass inside your facts to sketch the entire dashboard on supported by the page.
. Optionally, close of|following} the opening sketch you can programmatically go (by car) the controls that are share of the dashboard, including have the dashboard bring up to date the charts inside response to that.

Here's a simple specimen of a folio that creates a simple dashboard with a series slider driving a pie chart. The resulting dashboard is shown under the snippet.

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API including the controls package.
      google.charts.load('current', 'packages':['corechart', 'controls']);

      // Set a callback to speed when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawDashboard);

      // Callback that creates including populates a facts table,
      // instantiates a dashboard, a series slider including a pie chart,
      // passes inside the facts including draws it.
      purpose drawDashboard() 

        // Create our facts table.
        var facts = google.visualization.arrayToDataTable([
          ['Name', 'Donuts eaten'],
          ['Michael' , 5],
          ['Elisa', 7],
          ['Robert', 3],
          ['John', 2],
          ['Jessica', 6],
          ['Aaron', 1],
          ['Margareth', 8]
        ]);

        // Create a dashboard.
        var dashboard = modern google.visualization.Dashboard(
            document.getElementById('dashboard_div'));

        // Create a series slider, passing some options
        var donutRangeSlider = modern google.visualization.ControlWrapper(
          'controlType': 'NumberRangeFilter',
          'containerId': 'filter_div',
          'options': 
            'filterColumnLabel': 'Donuts eaten'
          
        );

        // Create a pie chart, passing some options
        var pieChart = modern google.visualization.ChartWrapper(
          'chartType': 'PieChart',
          'containerId': 'chart_div',
          'options': 
            'width': 300,
            'height': 300,
            'pieSliceText': 'value',
            'legend': 'right'
          
        );

        // Establish dependencies, declaring that 'filter' drives 'pieChart',
        // therefore that the pie table drive only display entries that are enable through
        // specified the chosen slider range.
        dashboard.bind(donutRangeSlider, pieChart);

        // Draw the dashboard.
        dashboard.draw(data);
      
    </script>
  </head>

  <body>
    <!--Div that drive keep the dashboard-->
    <div id="dashboard_div">
      <!--Divs that drive keep every power including chart-->
      <div id="filter_div"></div>
      <div id="chart_div"></div>
    </div>
  </body>
</html>

Here's the dashboard that this code creates.

1. Create An HTML Skeleton For Your Dashboard

Your folio essential have while many HTML elements (typically <div>s) to keep both the dashboard itself including all the controls including charts share of it. When instantiating dashboard, control, and table instances, you essential pass a allusion to their element, therefore set an ID to every HTML element.

    <!--Div that drive keep the dashboard-->
    <div id="dashboard_div">
      <!--Divs that drive keep every power including chart-->
      <div id="filter_div"></div>
      <div id="chart_div"></div>
    </div>

You are free to location every HTML element nevertheless you wish for your dashboard to look.

2. Load Your Libraries

A dashboard requires only two libraries to be present included or loaded on top of the page: the Google AJAX API including the Google Visualization controls package. The API (in particular, google.visualization.ChartWrapper) automatically identifies the other packages needed (for example, gauge provided you are using a Gauge chart) including loads them on supported by the fly wanting more mediation from you.

You essential utilize google.charts.load() to bring the power library.

<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

  // Load the Visualization API including the controls package.
  // Packages intended all the other charts you need drive be present loaded
  // automatically via the system.
  google.charts.load('current', 'packages':['corechart', 'controls']);

  // Set a callback to speed when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawDashboard);

  purpose drawDashboard() 
    // Everything is loaded. Assemble your dashboard...
  
</script>

3. Prepare Your Data

When the Visualization API has been loaded, google.charts.setOnLoadCallback() drive entitle your handler function, therefore you have knowledge of that all the obligatory helper methods including classes drive be present prepared for you to set about preparing your data.

Dashboards accepts facts inside a DataTable, the same while charts.

4. Create A Dashboard Instance

After you have created your data, you can instantiate your dashboard object. A dashboard constructor takes single parameter: a allusion to the DOM element inside which to sketch the dashboard.

  var dashboard = modern google.visualization.Dashboard(document.getElementById('dashboard_div'));

Dashboards are unconcealed while a Javascript class. After instantiating your dashboard, you can perform a not many optional steps such while adding event listeners (for example, to be present notified once the dashboard is 'ready'). Dashboards knob events inside the same method charts do, therefore transfer to or inside the chart part intended extra information.

5. Create Control And Chart Instances

Define while many instances you need intended every power including table that drive be present share of the dashboard. Use google.visualization.ChartWrapper including google.visualization.ControlWrapper to define charts including controls respectively.

  // Create a series slider, passing some options
  var donutRangeSlider = modern google.visualization.ControlWrapper(
    'controlType': 'NumberRangeFilter',
    'containerId': 'filter_div',
    'options': 
      'filterColumnLabel': 'Donuts eaten'
    
  );

  // Create a pie chart, passing some options
  var pieChart = modern google.visualization.ChartWrapper(
    'chartType': 'PieChart',
    'containerId': 'chart_div',
    'options': 
      'width': 300,
      'height': 300,
      'pieSliceText': 'label'
    
  );

When creating ChartWrapper including ControlWrapper instances, work not specify either the dataTable or the dataSourceUrl parameter. The dashboard takes be concerned of feeding every single with the appropriate data. However, be present sure to designate the obligatory parameters: chartType including containerId intended charts, controlType including containerId intended controls.

A not many tips on configuring controls including charts:

You essential perform all controls a filterColumnIndex (or filterColumnLabel) to designate which support of your google.visualization.DataTable the power operates on top of (in the specimen above, the power operates on supported by the support labeled Donuts eaten),

Use the state form alternative on supported by controls to initialize them with an explicit nation when they are first drawn. For example, utilize this setting to join the initial positions of the thumbs of a series slider control.

  var donutRangeSlider = modern google.visualization.ControlWrapper(
    'controlType': 'NumberRangeFilter',
    'containerId': 'filter_div',
    'options': 
      'filterColumnLabel': 'Donuts eaten',
      'minValue': 1,
      'maxValue': 10
    ,
    // Explicitly positions the thumbs at location 3 including 8,
    // not in of the viable series of 1 to 10.
    'state': 'lowValue': 3, 'highValue': 8
  );

All the charts that are share of a dashboard portion the same fundamental dataTable you prepared inside the step. However, charts often require a special arrangement of columns to display correctly: intended example, a pie chart requires a string support intended the label, followed via a figure support intended the value.

Use the view alternative during the time that configuring every ChartWrapper instance to declare which columns are significant intended the chart, while inside the subsequent example.

  var facts = 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]
  ]);

  var pieChart = modern google.visualization.ChartWrapper(
    'chartType': 'PieChart',
    'containerId': 'chart_div',
    'options': 
      'width': 300,
      'height': 300,
      'title': 'Donuts eaten per person'
    ,
    // The pie table drive utilize the columns 'Name' including 'Donuts eaten'
    // not in of all the ready ones.
    'view': 'columns': [0, 3]
  );

  // The sleep of dashboard form follows
  // ...

6. Establish Dependencies

Once you have instantiated both the dashboard including all the controls including charts that drive be present part it, utilize the bind() process to notify the dashboard on the dependencies that exist amidst controls including charts.

Once a power including table are compelled together, the dashboard updates the table to match the constraints the power enforces summit of} the data. In the specimen dashboard you are building, the series slider including the pie table are compelled together, therefore whenever you interact with the former, the latter updates to display only the facts that matches the selected range.

  // 'pieChart' drive bring up to date whenever you interact with 'donutRangeSlider'
  // to match the selected range.
  dashboard.bind(donutRangeSlider, pieChart);

You can join controls including charts inside many dissimilar configurations: one-to-one, one-to-many, many-to-one including many-to-many. Whenever many controls are compelled to a chart, the dashboard updates the table to match the combined constraints imposed via all the compelled controls. At the same time, a power can go (by car) many charts concurrently. To designate many bindings at the same time, pass inside arrays to the bind() process instead of single instances. You can also chain many bind() calls together. Here are some examples.

  // Many-to-one binding where 'ageSelector' including 'salarySelector' concurrently
  // participate inside selecting which facts 'ageVsSalaryScatterPlot' visualizes.
  dashboard.bind([agePicker, salaryPicker], ageVsSalaryScatterPlot);

  // One-to-many binding where 'ageSelector' drives two charts.
  dashboard.bind(agePicker, [ageVsSalaryScatterPlot, ageBarChart]);

  // bind() chaining where every power drives its own chart.
  dashboard.bind(agePicker, ageBarChart).bind(salaryRangePicker, salaryPieChart);

For advanced usages, you can also join controls to other controls to establish chains of dependencies .

  dashboard.bind(countryPicker, regionPicker).bind(regionPicker, cityPicker);

7. Draw Your Dashboard

Call the draw() process on top of the dashboard instance to render the entire dashboard. The draw() process takes only single parameter: the DataTable (or DataView) that powers the dashboard.

You should entitle draw() each time you alteration the composition of the dashboard (for specimen via adding modern controls or charts to it) or you alteration the overall DataTable that powers it.

The dashboard instance fires a ready event whenever draw() terminates illustration all the controls including charts that are share of it. An error event is fired if any of the managed controls or table fails to draw. To grasp extra on running events, see .

Note: You should listen intended the ready event before you try to alteration the dashboard composition or sketch it again.

8. Programmatic Changes After Draw

Once the dashboard completes the opening draw() it drive be present live including respond automatically to any action you do on supported by it (such while changing the selected series of a control slider that is share of the dashboard).

If you need to programmatically alter the dashboard state, you can work therefore via operating directly on top of the ControlWrapper including ChartWrapper instances that are share of it. The rule of digit is to do any alteration you need straight on top of the specific ControlWrapper (or ChartWrapper) instance: intended example, alteration a power alternative or nation via setOption() including setState() respectively, including entitle its draw() process afterward. The dashboard drive then bring up to date to match the requested changes.

The subsequent specimen shows such a case.

Full Web Page

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', 'packages':['corechart', 'controls']);
      google.charts.setOnLoadCallback(drawStuff);

      purpose drawStuff() 

        var dashboard = modern google.visualization.Dashboard(
          document.getElementById('programmatic_dashboard_div'));

        // We leave out "var" therefore that programmaticSlider is visible to changeRange.
        var programmaticSlider = modern google.visualization.ControlWrapper(
          'controlType': 'NumberRangeFilter',
          'containerId': 'programmatic_control_div',
          'options': 
            'filterColumnLabel': 'Donuts eaten',
            'ui': 'labelStacking': 'vertical'
          
        );

        var programmaticChart  = modern google.visualization.ChartWrapper(
          'chartType': 'PieChart',
          'containerId': 'programmatic_chart_div',
          'options': 
            'width': 300,
            'height': 300,
            'legend': 'none',
            'chartArea': 'left': 15, 'top': 15, 'right': 0, 'bottom': 0,
            'pieSliceText': 'value'
          
        );

        var facts = google.visualization.arrayToDataTable([
          ['Name', 'Donuts eaten'],
          ['Michael' , 5],
          ['Elisa', 7],
          ['Robert', 3],
          ['John', 2],
          ['Jessica', 6],
          ['Aaron', 1],
          ['Margareth', 8]
        ]);

        dashboard.bind(programmaticSlider, programmaticChart);
        dashboard.draw(data);

        changeRange = function() 
          programmaticSlider.setState('lowValue': 2, 'highValue': 5);
          programmaticSlider.draw();
        ;

        changeOptions = function() 
          programmaticChart.setOption('is3D', true);
          programmaticChart.draw();
        ;
      

    </script>
  </head>
  <body>
    <div id="programmatic_dashboard_div" style="border: 1px firm #ccc">
      <table class="columns">
        <tr>
          <td>
            <div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div>
            <div>
              <button style="margin: 1em 1em 1em 2em" onclick="changeRange();">
                Select series [2, 5]
              </button><br />
              <button style="margin: 1em 1em 1em 2em" onclick="changeOptions();">
                Make the pie table 3D
              </button>
            </div>
            <script type="text/javascript">
              purpose changeRange() 
                programmaticSlider.setState('lowValue': 2, 'highValue': 5);
                programmaticSlider.draw();
              

              purpose changeOptions() 
                programmaticChart.setOption('is3D', true);
                programmaticChart.draw();
              
            </script>
          </td>
          <td>
            <div id="programmatic_chart_div"></div>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

API Reference

This part lists the objects unconcealed via the Controls including Dashboards API, including the standard methods unconcealed via all controls.

Dashboard

Represents a collection of collaborating controls including charts that portion the same fundamental data.

Constructor

Dashboard(containerRef)

containerRef
: A allusion to a valid container element on top of the folio that drive keep the dashboard contents.

Methods

Dashboard exposes the subsequent methods:

Method Return Type Description

Method	Return Type	Description
`bind(controls, charts)`	google.visualization.Dashboard	Binds single or extra Controls to single or extra other dashboard participants (either charts or other controls), therefore that all of the latter are redrawn whenever any of the former collects a programmatic or user interaction that affects the facts managed via the dashboard. Returns the dashboard instance itself intended chaining many `bind()` calls together. controls - Either a single single or an show of `google.visualization.ControlWrapper` instances defining the controls to bind. charts - Either a single single or an show of `google.visualization.ChartWrapper` instances defining the charts the that drive be present driven the via the controls.
`draw(dataTable)`	None	Draws the dashboard. dataTable - Any single of the following: a `DataTable` object; a `DataView` object; a JSON body of representatives of a DataTable; or an show following the syntax of google.visualization.arrayToDataTable() .
`getSelection()`	Array of objects	Returns an show of the selected optic entities of the charts inside the dashboard. The `getSelection()` method, when called on top of the dashboard, returns an body of all of the selections made on supported by all of the charts in it, allowing intended the utilize of a single allusion when working with table selections. Note: listeners intended the take event still need to be present married to every table to which you wish to listen.

bind(controls, charts)

google.visualization.Dashboard

Binds single or extra Controls to single or extra other dashboard participants (either charts or other controls), therefore that all of the latter are redrawn whenever any of the former collects a programmatic or user interaction that affects the facts managed via the dashboard. Returns the dashboard instance itself intended chaining many bind() calls together.

controls - Either a single single or an show of google.visualization.ControlWrapper instances defining the controls to bind.
charts - Either a single single or an show of google.visualization.ChartWrapper instances defining the charts the that drive be present driven the via the controls.

draw(dataTable)

None

Draws the dashboard.

dataTable - Any single of the following: a DataTable object; a DataView object; a JSON body of representatives of a DataTable; or an show following the syntax of google.visualization.arrayToDataTable() .

getSelection()

Array of objects

Returns an show of the selected optic entities of the charts inside the dashboard. The getSelection() method, when called on top of the dashboard, returns an body of all of the selections made on supported by all of the charts in it, allowing intended the utilize of a single allusion when working with table selections.

Note: listeners intended the take event still need to be present married to every table to which you wish to listen.

Events

The Dashboard object throws the subsequent events. Note that you essential call Dashboard.draw() before any events drive be present thrown.

Name Description Properties

error Fired when an slip occurs when attempting to render the dashboard. One or extra of the controls including charts that are share of the dashboard may have failed rendering. id, message

Name	Description	Properties
`error`	Fired when an slip occurs when attempting to render the dashboard. One or extra of the controls including charts that are share of the dashboard may have failed rendering.	id, message
`ready`	The dashboard has completed illustration including is prepared to accept changes. All the controls and charts that are share of the dashboard are prepared intended external process entitle including user interaction. If you wish for to alteration the dashboard (or the facts it displays) close of\|following} you draw it, you should set up a listener intended this event before you entitle the `draw` method, including then apply your changes only close of\|following} the event was fired. The `ready` event drive also fire: close of\|following} the completion of a dashboard refresh triggered via a user or programmatic interaction with single of the controls, close of\|following} a programmatic entitle to the `draw()` process of any table share of the dashboard.	None

ready

The dashboard has completed illustration including is prepared to accept changes. All the controls and charts that are share of the dashboard are prepared intended external process entitle including user interaction. If you wish for to alteration the dashboard (or the facts it displays) close of|following} you draw it, you should set up a listener intended this event before you entitle the draw method, including then apply your changes only close of|following} the event was fired.

The ready event drive also fire:

close of|following} the completion of a dashboard refresh triggered via a user or programmatic interaction with single of the controls,
close of|following} a programmatic entitle to the draw() process of any table share of the dashboard.

None

ControlWrapper

A ControlWrapper object is a cover around a JSON body of representatives of a configured control instance. The grade exposes benefit methods intended defining a dashboard control, illustration it and programmatically changing its state.

Constructor

ControlWrapper(opt_spec)

opt_spec: [Optional] - Either a JSON object defining the control, or a serialized string version of that object. The supported properties of the JSON object are shown inside the subsequent table. If not specified, you essential set all the appropriate properties using the set... methods unconcealed via ControlWrapper.

Property	Type	Required	Default	Description
controlType	String	Required	none	The grade nickname of the control. The `google.visualization` parcel nickname can be omitted intended Google controls. Examples: `CategoryFilter`, `NumberRangeFilter`.
containerId	String	Required	none	The ID of the DOM element on top of your folio that drive host the control.
options	Object	Optional	none	An object describing the options intended the control. You can utilize either JavaScript literal notation, or supply a knob to the object. Example: `"options": "filterColumnLabel": "Age", "minValue": 10, "maxValue": 80`
state	Object	Optional	none	An object describing the nation of the control. The nation collects all the variables that the user operating the power can affect. For example, a series slider nation can be present described in term of the positions that the small including high digit of the slider occupy. You can utilize either Javascript close notation, or supply a knob to the object.Example: `"state": "lowValue": 20, "highValue": 50`

Methods

ControlWrapper exposes the subsequent extra methods:

Method	Return Type	Description
`draw()`	None	Draws the control. Normally the dashboard property the power takes be concerned of illustration it. You should entitle `draw()` to force programmatic redraws of the power close of\|following} you alteration any of its other settings, same as options or state.
`toJSON()`	String	Returns a string version of the JSON body of representatives of the control.
`clone()`		Returns a deep copy of the power wrapper.
`getControlType()`	String	The grade nickname of the control. If this is a Google control, the nickname drive not be present qualified with `google.visualization`. So, intended example, provided this were a CategoryFilter control, it would return "CategoryFilter" rather than "google.visualization.CategoryFilter".
`getControlName()`	String	Returns the power nickname assigned via `setControlName()`.
`getControl()`	Control object reference	Returns a allusion to the power created via this ControlWrapper. This drive return null up to close of\|following} you have called `draw()` on supported by the ControlWrapper object (or on top of the dashboard property it), including it throws a prepared event. The returned object only exposes one method: `resetControl()`, which resets the power nation to the single it was initialized with (like resetting an HTML form element).
`getContainerId()`	String	The ID of the control's DOM container element.
`getOption(key, opt_default_val)`	Any type	Returns the specified power alternative value key - The nickname of the alternative to retrieve. May be present a trained name, such as `'vAxis.title'`. opt_default_value [Optional] - If the specified use is indefinite or null, this use drive be present returned.
`getOptions()`	Object	Returns the options object intended this control.
`getState()`	Object	Returns the power state.
`setControlType(type)`	None	Sets the power type. Pass inside the grade nickname of the power to instantiate. If this is a Google control, work not qualify it with `google.visualization`. So, intended example, intended a series slider summit of} a numeric column, pass in "NumberRangeFilter".
`setControlName(name)`	None	Sets an chance nickname intended the control. This is not shown anywhere on supported by the control, but is for your allusion only.
`setContainerId(id)`	None	Sets the ID of the containing DOM element intended the control.
`setOption(key, value)`	None	Sets a single power alternative value, where key is the alternative nickname including value is the value. To unset an option, pass inside null intended the value. Note that key may be present a trained name, such while `'vAxis.title'`.
`setOptions(options_obj)`	None	Sets a total options object intended a control.
`setState(state_obj)`	None	Sets the power state. The nation collects all the variables that the user operating the power can affect. For example, a series slider nation can be present described inside term of the positions that the small including high digit of the slider occupy.

Events

The ControlWrapper object throws the subsequent events. Note that you essential call ControlWrapper.draw() (or sketch the dashboard property the control) before any events drive be present thrown.

Name	Description	Properties
`error`	Fired when an slip occurs when attempting to render the control.	id, message
`ready`	The power is prepared to accept user interaction including intended external process calls. If you want to interact with the control, including entitle methods close of\|following} you sketch it, you should set up a listener intended this event before you entitle the `draw` method, including entitle them only after the event was fired. Alternatively, you can listen intended a `ready` event on supported by the dashboard property the power including entitle power methods only close of\|following} the event was fired.	None
`statechange`	Fired when the user interacts with the control, affecting its state. For example, a `statechange` event drive blaze whenever you move the thumbs of a series slider control. To get back an updated power nation close of\|following} the event fired, call `ControlWrapper.getState()`.	None

ChartWrapper

Refer to google.visualization.ChartWrapper documentation inside the visualizations' API allusion section.

The subsequent notes apply when using a ChartWrapper while share of a dashboard:

Do not set the dataTable, query, dataSourceUrl and refreshInterval attributes explicitly. The dashboard property the table takes care of feeding it the facts it needs.
Do set its view ascribe to declare which columns, not in of all the ones current in the dataTable specified to the dashboard, are significant intended the chart, while shown in .

Controls Gallery

Filters are graphical elements that people can utilize to interactively take which facts is displayed on top of your chart. This part describes the Google Chart filters: CategoryFilter, ChartRangeFilter, DateRangeFilter, NumberRangeFilter, and StringFilter.

You can utilize any of them while a parameter to ControlWrapper.setControlType().

Note: In describing options, the point signs is worn to tell nested object attributes. For specimen an alternative called 'ui.label' should be present declared inside an options object as var options = "ui": "label": "someLabelValue" ;

CategoryFilter

A picker to choose single or extra amidst a set of marked values.

State

Name	Type	Default	Description
selectedValues	Array of objects or primitive types	none	The set of values currently selected. The selected values essential be present a set of the overall selectable values marked via the `values` alternative (any extraneous single drive be ignored). If the `CategoryFilter` does not permit many choice, only the first use of the show is retained.

Options

Name	Type	Default	Description
filterColumnIndex	number	none	The support of the datatable the mesh should operate upon. It is compulsory to supply either this alternative or `filterColumnLabel`. If both present, this alternative takes precedence.
filterColumnLabel	string	none	The ticket of the support the mesh should operate upon. It is compulsory to supply either this alternative or `filterColumnIndex`. If both present, `filterColumnIndex` takes precedence.
values	Array	auto	List of values to choose from. If an show of Objects is used, they should have a suitable `toString()` body of representatives intended display to the user. If null or undefined, the inventory of values drive be present automatically computed from the values current inside the DataTable column this power operates on.
useFormattedValue	boolean	false	When populating the inventory of selectable values automatically from the DataTable support this mesh operates on, whether to utilize the actual room values or their formatted values.
ui	Object	null	An object with members to configure various aspects of the control's UI. To designate properties of this object, you can utilize object close notation, while shown here: label: 'Metric', labelSeparator: ':'
ui.caption	string	'Choose a value...'	The caption to display interior the use picker widget when no item is selected.
ui.sortValues	boolean	true	Whether the values to choose from should be present sorted.
ui.selectedValuesLayout	string	'aside'	How to display selected values, when many selection is allowed. Possible values are: `'aside'`: selected values drive display inside a single contents line next to the use picker widget, `'below'`: selected values drive display inside a single contents line under the widget, `'belowWrapping'`: uniform to `below`, but entries that cannot fit inside the picker drive wrap to a modern line, `'belowStacked'`: selected values drive be present displayed inside a support under the widget.
ui.allowNone	boolean	true	Whether the user is allowed not to choose any value. If `false` the user must choose at meanest single use from the ready ones. During power initialization, provided the alternative is set to `false` including no `selectedValues` nation is given, the first use from the avaiable ones is automatically seleted.
ui.allowMultiple	boolean	true	Whether many values can be present selected, rather than just one.
ui.allowTyping	boolean	true	Whether the user is allowed to type inside a contents meadow to narrow ending of} the inventory of possible choices (via an autocompleter), or not.
ui.label	string	auto	The ticket to display next to the class picker. If unspecified, the ticket of the support the power operates on top of drive be present used.
ui.labelSeparator	string	none	A separator string appended to the label, to visually separate the ticket from the category picker.
ui.labelStacking	string	'horizontal'	Whether the ticket should display over (vertical stacking) or next to (horizontal stacking) the class picker. Use either `'vertical'` or `'horizontal'`.
ui.cssClass	string	'google-visualization-controls-categoryfilter'	The CSS grade to set to the control, intended tradition styling.

ChartRangeFilter

A slider with two thumbs superimposed onto a chart, to take a series of values from the of the chart.

State

Name	Type	Default	Description
range.start	number, date, datetime or timeofday	Range set about value	The set about of the selected range, inclusive.
range.end	number, date, datetime or timeofday	Range end value	The end of the selected range, inclusive.

Options

Name	Type	Default	Description
filterColumnIndex	number	none	The list of the support inside the facts table the mesh operates on. It is compulsory to supply either this alternative or `filterColumnLabel`. If both are present, this alternative takes precedence. Note that it only makes faculty to designate an list of a support that is embodied inside the continued shaft of the table worn interior the control.
filterColumnLabel	string	none	The ticket of the support of the facts table the mesh operates on. It is compulsory to provide either this alternative or `filterColumnIndex`. If both are present, `filterColumnIndex` takes precedence. Note that it only makes faculty to designate an ticket of a support that is embodied inside the continued shaft of the table worn interior the control.
ui	Object	null	An object with members to configure various aspects of the control's UI. To designate properties of this object, you can utilize object close notation, while shown here: chartType: 'ScatterChart', chartOptions: pointSize: 10
ui.chartType	string	'ComboChart'	The type of the table worn interior the control. Can be present single of: 'AreaChart', 'LineChart', 'ComboChart' or 'ScatterChart'.
ui.chartOptions	Object	'enableInteractivity': false, 'chartArea': 'height': '100%', 'legend': 'position': 'none', 'hAxis': 'textPosition': 'in', 'vAxis': 'textPosition': 'none', 'gridlines': 'color': 'none'	The form options of the table worn interior the control. Allows the same level of form while any table inside the dashboard, including complies with the same arrangement while received by . You can designate extra options or outweigh the want ones (note that the defaults have been carefully chosen intended optimal appearance, though).
ui.chartView	Object or string (serialized Object)	null	Specification of the thought to apply to the facts table worn to sketch the table interior the control. Allows the same level of form while any table inside the dashboard, including complies with the same arrangement while received by . If not specified, the facts table itself is worn to sketch the chart. Please message that the level shaft of the worn table essential be , therefore be present careful to designate `ui.chartView` accordingly.
ui.minRangeSize	number	Data use contrast interpreted while 1 pixel	The smallest selectable series size (`range.end - range.start`), specified inside data use units. For a numeric axis, it is a figure (not naturally an integer). For a date, datetime or timeofday axis, it is an integer that specifies the contrast in milliseconds.
ui.snapToData	boolean	false	If true, series thumbs are snapped to the nearest facts points. In this case, the end points of the series returned via `getState()` are necessarily values inside the facts table.

Events

Additions to events:

Name	Description	Properties
`statechange`	Same while documented intended each ControlWrapper, only has an extra boolean property, `inProgress`, that specifies whether the nation is currently individual changed (either single of the thumbs or the series itself is individual dragged).	inProgress

DateRangeFilter

A dual-valued slider intended selecting ranges of dates.

Try moving the slider to alteration which rows are shown inside the table below.

State

Name	Type	Default	Description
lowValue	number	none	The under amount of the selected range, inclusive.
highValue	number	none	The higher amount of the selected range, inclusive.
lowThumbAtMinimum	boolean	none	Whether the under digit of the slider is locked at the smallest allowed range. If set, overrides `lowValue`.
highThumbAtMaximum	boolean	none	Whether the higher digit of the slider is locked at the maximum allowed range. If set, overrides `highValue`.

Options

Name	Type	Default	Description
filterColumnIndex	number	none	The support of the datatable the mesh should operate upon. It is compulsory to supply either this alternative or `filterColumnLabel`. If both present, this alternative takes precedence. Must essence to a support with type `number`.
filterColumnLabel	string	none	The ticket of the support the mesh should operate upon. It is compulsory to supply either this alternative or `filterColumnIndex`. If both present, `filterColumnIndex` takes precedence. Must essence to a support with type `number`.
minValue	Date	auto	Minimum allowed use intended the series under extent. If undefined, the use drive be present inferred from the contents of the DataTable managed via the control.
maxValue	Date	auto	Maximum allowed use intended the series higher extent. If undefined, the use drive be present inferred from the contents of the DataTable managed via the control.
ui	Object	null	An object with members to configure various aspects of the control's UI. To designate properties of this object, you can utilize object close notation, while shown here: label: 'Age', labelSeparator: ':'
ui.format	Object	none	How to speak for the date while a string. Accepts any valid date format .
ui.step	string	day	The smallest viable alteration when dragging the slider thumbs: can be present any time whole up to "day". ("month" including "year" aren't yet supported.)
ui.ticks	number	auto	The figure of ticks (fixed positions inside the series bar) the slider thumbs can occupy.
ui.unitIncrement	string	'1'	The lot to increment intended whole increments of the series extents. A whole increment is equal to using the arrow keys to move a slider thumb.
ui.blockIncrement	number	10	The lot to increment intended block increments of the series extents. A block increment is equal to using the pgUp including pgDown keys to move the slider thumbs.
ui.showRangeValues	boolean	true	Whether to have labels next to the slider displaying extents of the selected range.
ui.orientation	string	'horizontal'	The slider orientation. Either `'horizontal'` or `'vertical'`.
ui.label	string	auto	The ticket to display next to the slider. If unspecified, the ticket of the support the control operates on top of drive be present used.
ui.labelSeparator	string	none	A separator string appended to the label, to visually separate the ticket from the slider.
ui.labelStacking	string	'horizontal'	Whether the ticket should display over (vertical stacking) or next to (horizontal stacking) the slider. Use either `'vertical'` or `'horizontal'`.
ui.cssClass	string	'google-visualization-controls-rangefilter'	The CSS grade to set to the control, intended tradition styling.

NumberRangeFilter

A dual-valued slider intended selecting ranges of numeric values.

State

Name	Type	Default	Description
lowValue	number	none	The under amount of the selected range, inclusive.
highValue	number	none	The higher amount of the selected range, inclusive.
lowThumbAtMinimum	boolean	none	Whether the under digit of the slider is locked at the smallest allowed range. If set, overrides `lowValue`.
highThumbAtMaximum	boolean	none	Whether the higher digit of the slider is locked at the maximum allowed range. If set, overrides `highValue`.

Options

Name	Type	Default	Description
filterColumnIndex	number	none	The support of the datatable the mesh should operate upon. It is compulsory to supply either this alternative or `filterColumnLabel`. If both present, this alternative takes precedence. Must essence to a support with type `number`.
filterColumnLabel	string	none	The ticket of the support the mesh should operate upon. It is compulsory to supply either this alternative or `filterColumnIndex`. If both present, `filterColumnIndex` takes precedence. Must essence to a support with type `number`.
minValue	number	auto	Minimum allowed use intended the series under extent. If undefined, the use drive be present inferred from the contents of the DataTable managed via the control.
maxValue	number	auto	Maximum allowed use intended the series higher extent. If undefined, the use drive be present inferred from the contents of the DataTable managed via the control.
ui	Object	null	An object with members to configure various aspects of the control's UI. To designate properties of this object, you can utilize object close notation, while shown here: label: 'Age', labelSeparator: ':'
ui.format	Object	none	How to speak for the figure while a string. Accepts any valid figure format .
ui.step	number	1, or computed from `ticks` provided defined	The smallest viable alteration when dragging the slider thumbs.
ui.ticks	number	auto	The figure of ticks (fixed positions inside the series bar) the slider thumbs can occupy.
ui.unitIncrement	number	1	The lot to increment intended whole increments of the series extents. A whole increment is equal to using the arrow keys to move a slider thumb.
ui.blockIncrement	number	10	The lot to increment intended block increments of the series extents. A block increment is equal to using the pgUp including pgDown keys to move the slider thumbs.
ui.showRangeValues	boolean	true	Whether to have labels next to the slider displaying extents of the selected range.
ui.orientation	string	'horizontal'	The slider orientation. Either `'horizontal'` or `'vertical'`.
ui.label	string	auto	The ticket to display next to the slider. If unspecified, the ticket of the support the control operates on top of drive be present used.
ui.labelSeparator	string	none	A separator string appended to the label, to visually separate the ticket from the slider.
ui.labelStacking	string	'horizontal'	Whether the ticket should display over (vertical stacking) or next to (horizontal stacking) the slider. Use either `'vertical'` or `'horizontal'`.
ui.cssClass	string	'google-visualization-controls-rangefilter'	The CSS grade to set to the control, intended tradition styling.

StringFilter

A simple contents information meadow that lets you mesh facts by method of string matching. It updates close of|following} every keypress: try typing j to narrow the table under to John including Jessica.

State

Name	Type	Default	Description
value	string or object	none	The contents currently entered inside the power information field.

Options

Name	Type	Default	Description
filterColumnIndex	number	none	The support of the datatable the mesh should operate upon. It is compulsory to supply either this alternative or `filterColumnLabel`. If both present, this alternative takes precedence.
filterColumnLabel	string	none	The ticket of the support the mesh should operate upon. It is compulsory to supply either this alternative or `filterColumnIndex`. If both present, `filterColumnIndex` takes precedence.
matchType	string	'prefix'	Whether the power should match exact values only (`'exact'`), prefixes starting from the opening of the use (`'prefix'`) or any substring (`'any'`).
caseSensitive	boolean	false	Whether like should be present event sensitive or not.
useFormattedValue	boolean	false	Whether the power should match against room formatted values or againt actual values.
ui	Object	null	An object with members to configure various aspects of the control's UI. To designate properties of this object, you can utilize object close notation, while shown here: label: 'Name', labelSeparator: ':'
ui.realtimeTrigger	boolean	true	Whether the power should match any time a door key is pressed or only when the information field 'changes' (loss of centre or pressing the Enter key).
ui.label	string	auto	The ticket to display next to the information field. If unspecified, the ticket of the support the power operates on top of drive be present used.
ui.labelSeparator	string	none	A separator string appended to the label, to visually separate the ticket from the information field.
ui.labelStacking	string	'horizontal'	Whether the ticket should display over (vertical stacking) or next to (horizontal stacking) the information field. Use either `'vertical'` or `'horizontal'`.
ui.cssClass	string	'google-visualization-controls-stringfilter'	The CSS grade to set to the control, intended tradition styling.

https://developers.google.com/chart/interactive/docs/gallery/controls

Oke detil mengenai Controls and Dashboards | Charts | Google Developers semoga artikel ini berfaedah terima kasih

Tulisan ini diposting pada kategori google dashboards, google analytics dashboards templates, google data dashboards,