Changing Measures using a Toggle (pillbox) in Analytics Cloud

Salesforce Analytics Cloud dashboards are interactively facetable using filters without requiring any JSON manipulation. However, if you want to do the same using measures, eg. change a widget from sum to average, this requires changing the JSON for that dashboard.

My example is a dashboard that shows the Sum of Miles Flown by Carrier, but I want a button that will change the same widget to the Average of Departure Delay by Carrier.

However, if you wanted to change the measure(not filter) of a widget interactively, on a dashboard, this requires a Static Selection Bind.

We need:

• OnTime Dataset (CSV here)

Upload and create an Ontime Dataset.

Create the Lenses

1. Choose the Sum of Distance in Miles Measure, group by Carrier, change to a Bar Chart. Then snap this to Designer.

2. Change measure to Avg of Departure Delay in Minutes. Then snap this to designer.

3. Add a Toggle and select “Carrier_2” as the Lens.

4. Save the dashboard and open in the Lens Explorer.

5. Copy/Paste to your favourite text editor. I prefer Atom.io

The JSON is separated into Widgets and Steps:

Widgets are the visual items you see on the page. The 2 graphs and the toggle button.

Steps define a view of data. It defines which measures to show, and how those measures are grouped. ie. We are measuring the number of flights, we are grouping by the airline carriers.

The chart_2 widget is broken into

1. Coordinates on the screen. The zIndex defines if it’s infront or behind other widgets.
2. The type is a ChartWidget
3. The type of chart is a vertical bar.
4. The Data in the widget is from step: Carrier_1

The Carrier_1 step is broken into

1. Measures — Average of DepDelayMinutes
2. Groups — Carrier
3. Em is the alias of the data set, OnTime.

Combining a widget and a graph you get something like the below. Note that this is a lens view just to help describe the concepts.

Changing the measure using the toggle.

To change the measure of the dashboard component, the easiest way is to have a button, known as a toggle, that allows us to select the Measure we want. This involves 2 components:

1. Create a Toggle Widget/Pillbox with the measures as selection options
2. Change the graph widget above to use the value selected from the widget

The existing Toggle code, the chartType is a Pillbox.

Change the Toggle/Pillbox values

We want to change this Toggle to show “Sum of Miles” & “Average Departure Delay”.

The easiest way is to create a new step. Copy and paste the existing “Carrier_2” step for easy reference.

We change the Carrier_2 step to the following:

1.IMPORTANT CONCEPT. This step is purely the VALUES to places into a MEASURE field of another step. Remember, we want a graph that has a button that says “Average Delay” and “Sum of Miles” and allows you to select one of those.

The measures on the graph (ie. Average Departure Delay OR Sum of Miles) are going to be pulled from the VALUES in the toggle.

These values could be used elsewhere, and not just as measures. Think of it as togglevariable = avgdeparturedelay. graph.measure= togglevariable.

Therefore we need to store VALUES on the step and not MEASURES. The values are set as the measures on the target graph.

2. “display” is the user-friendly label of the measure

3. If we look at the Step from earlier, we had measures avg, DepDelayMinutes. We want to assign these to values to this selection.

4. Do the same for the values sum of miles.

5. “start” specifies a default value. We need this or else we have an error as the graph uses the selection from the toggle, but if we don’t specify a default there isn’t one until the toggle is selected.

6. Specify the Step as type: Static. This declares that the steps are static values that are passed to other widgets, rather than calculated aggregate values/measures.

Make sure you change the name of the step, and remove unnecessary code.

Next make sure you change the step associated to the widget. Remember, we created a new step, but we haven’t told the widget to use that step yet.

Save and update your dashboard in Lens Explorer, you should now have the below:

When you click on this, it does nothing yet, because we haven’t told the Graph that it’s measures come from the Toggle/Pillbox.

Bind the Graph’s measure to the Toggle

Now change the code to use the selection of the Toggle:

the code “{{selection{toggle_selector)}}” states to use the selection from the toggle_selector step. This is done by using the button_group1 toggle/pillbox widget.

Done! Now you can change measures using a pillbox. You’ve done a static selection bind!