Question

Options for custom visualization

  • 20 March 2019
  • 3 replies
  • 583 views

What will be the object properties to add options for custom visualization resembling series tab of visualization dashboard.


3 replies

Userlevel 7
Badge +1

Check out the “Configuration” section of this getting started guide which has examples of how to add options: https://github.com/looker/custom_visualizations_v2/blob/master/docs/getting_started.md#Configuration



If you already know how to do it and are wondering what the actual options are that we use in our series tabs, I’m not sure but I would start by reverse engineering the publicly available custom viz examples in that repo. See these lines specifically: https://github.com/looker/custom_visualizations_v2/blob/master/src/examples/advanced_table/options.js#L133

Hi Izzy , thank you I have tried all the possible options including getting started guide and also publicly available custom viz, I am wondering if any one have come up with this , may be the Looker team as they have already implemented as part of visualizations which are already a part of Looker.

Hi Geeta,



Unfortunately the current implementation of the per-series options do not leverage a public-facing API. The nature of that API is such that it wouldn’t be easy to expose either.


As a work around, what you could consider doing is using the registerOptions event to configure your vis config after you have received your data. Then you could loop through your (series/measures/etc.) to generate the number of color options or title options you require based on your query result.



Here’s the relevant code from the example in the docs:



   update: function(data, element, config, queryResponse, details){

options = {}

// Create an option for each measure in your query

queryResponse.fields.measure_like.forEach(function(field) {

id = "color_" + field.name

options[id] =

{

label: field.label_short + " Color",

default: "#8B7DA8",

section: "Style",

type: "string",

display: "color"

}

})

this.trigger('registerOptions', options) // register options with parent page to update visConfig

...

}

});



Hope this helps!

Reply