Looker Connect Training

Help Center

Documentation

Community

Cloud Certifications

Question

Who is using custom visualizations?

  • 30 April 2015
  • 4 replies
  • 188 views
R

Hi there.

Who is using custom visualizations? I have enhanced the bubble chart and have that to trade… our version doesn’t require that columns are metrics and also allows for a 4th column to be displayed in the tool tip as “meta data” I’m looking for others who might have done some additional footwork on the “options” in the visualization pane of explore.


Also @natenate I don’t see any docs yet on custom visualizations. I would love to see things like: How to create toggle buttons for a value on an off options as well as radio buttons, and perhaps even a reference line example? A knerd can dream…

4 replies

N
Rank

@Rex docs are in progress. I’ll post something here about the “options” hash shortly.


We have a public git repository here that we encourage anyone who’s got a visualization to share to fork, and create a pull request.

N
Rank

@Rex apologies for the extended turn around time on this. Here’s a first pass at some options docs that will be included in the formal documentation shortly!


Options:


Example:


options: {

    colorRange: {

      type: 'array',

      label: 'Color Ranges',

      section: 'Style',

      placeholder: '#fff, red, etc...'

    },

    transportModePicker: {

      type: 'string',

      display: 'select',

      values: [{'Airplane', 'airplane'}, {'Car', 'car'}, {'Unicycle', 'unicycle'}],

      default: 'unicycle'

    }

}

Requirements:



  1. Options are defined in an “options” block.

  2. Options require a key name, in the example above the key name is “colorRange”.

  3. Each key maps to a set of configuration values for the option.

  4. You must define an option type. Each type maps to a kind of input field.


Settings:


type (REQUIRED)

The type of the option.

Values: string, number, array, boolean, object


default

The default value for the option.


label

The label displayed in the visualization configuration panel.


section

The section the option should appear in, within the visualization configuration panel.


order

The order in which to display the option in the visualization configuration panel section. Must be an integer.


Settings that depend on other settings’ values:


display

Requires type value of: string, number

Accepted values when type is string: radio, select

Accepted values when type is number: range


values

Requires type value of: string

Requires display value of: radio, select

A list of key/value pairs to use for radio and select types.

Example: [{“Line”: “line”}, {“Range”: “range”}, {“Line with Margins”: “margins”}]

Each key (e.g. “Line”) will be used as the display label, and each value, as the selected value.


placeholder

Requires type value of: string, number, or array

The placeholder value to display in the input form.


min, max, step

Requires type value of: number

The min, max or step to allow for a given numeric input.


Usage in visualization:


Option values (aka settings) are passed into the update function as the 3rd argument. In the included heatmap example you can see the colorRange option being accessed like so:


...

update: function(data, elements, settings, resp) {

  ...

  var colorSettings = settings.colorRange || ['white', 'purple', 'red'];

  ...

}
R

Thanks Nate. I’ll dig in and give feedback soon.

zlebowitz
Rank
Userlevel 3

Closing out this thread with [our docs] (How to Make Custom Visualizations (3.16+, Requires Javascript, Self-Hosting))!

Reply


Terms of Service