Options for custom visualization

visualizations
low_priority
done
reply
(Geeta Soragavi) #1

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

0 Likes

(Izzy) #2

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

0 Likes

(Geeta Soragavi) #3

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.

0 Likes

(Richard Czechowski) #4

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!

1 Like