How to Make the Gauge Chart Dynamic Again
Several have asked me “how do we do the dynamic gauge post Summer18 release?”. Why? Well, when the gauge chart was released I wrote a blog on how to make the ranges dynamic; a great use case for actual vs. quota. On top of that, it was often a question I got when I worked with standard reporting in Salesforce, people really like that the ranges in the gauge are dynamic. However, since the introduction of conditional formatting and the asset XMD in Summer18 if you follow the steps in the blog I wrote back in June 2017 you will no longer be successful. Therefore I decided to try and solve this puzzle (and the many questions I got) and luckily I was successful so this blog will demonstrate how you can make the gauge chart dynamic again.
Get the basics down
So the steps that I covered in “How to make your Gauge chart dynamic” still apply. You need to make sure you have the following:
- Your gauge chart
- Your breakpoint calculations
- The breakpoint bindings
So basically you need to follow the whole blog! Once you have that there is one more action to take in the Dashboard JSON.
The secret trick
Before going into the JSON make sure you notice the widget name of your gauge. You can do this by clicking on your gauge chart and in the property panel to the right you will see two tabs “Widget” and “Step”, make sure you are on the “Widget” tab and one of the first things you see is the name or ID of the widget.
With that memorized now go to your Dashboard JSON by hitting command+E (Mac) or control+E (Windows).
You can now search for the widget that you just looked at; in my case ‘Chart_1’. In order to search in the Dashboard JSON hit command+F (Mac) or control+F (windows) and type in the widget name of the gauge.
The JSON for that widget should look something like this:
"chart_1": {
"parameters": {
"max": "{{cell(BP_1.result,0,"Max").asString()}}",
"showPercentage": true,
"visualizationType": "gauge",
"exploreLink": true,
"medium": "{{cell(BP_1.result,0,"Mid").asString()}}",
"title": {
"fontSize": 14,
"subtitleFontSize": 11,
"label": "",
"align": "center",
"subtitleLabel": ""
},
"trellis": {
"flipLabels": false,
"showGridLines": true,
"size": [
100,
100
],
"enable": false,
"type": "x",
"chartsPerLine": 4
},
"bands": {
"high": {
"color": "#008000",
"label": "High"
},
"low": {
"color": "#B22222",
"label": "Low"
},
"medium": {
"color": "#ffa500",
"label": "Medium"
}
},
"showRange": true,
"showLabel": true,
"showValue": true,
"high": "{{cell(BP_1.result,0,"High").asString()}}",
"columnMap": {
"trellis": [],
"plots": [
"sum_Amount"
]
},
"min": 0,
"angle": 240,
"theme": "wave",
"step": "Gauge_1",
"applyConditionalFormatting": true,
"legend": {
"show": false,
"inside": false,
"showHeader": true,
"position": "right-top"
}
},
"type": "chart"
},
You may have noticed that my naming is not consistent with the original blog, but that is alright the idea is the same. The only real difference is that with Summer18 you can create a column alias in compare tables, which means we don’t have to use ‘A’, ‘B’ and ‘C’ when referencing columns, we can just use the alias. Hence my bindings are using ‘Max’, ‘High’ and ‘Mid’.
Now the other change is there is a key called applyConditionalFormatting; I’ve highlighted it in the JSON above. This key is what we need to change. By default, it is set to ‘true’ but we want to change that to ‘false’. The JSON for that chart should now look like this:
"chart_1": {
"parameters": {
"max": "{{cell(BP_1.result,0,"Max").asString()}}",
"showPercentage": true,
"visualizationType": "gauge",
"exploreLink": true,
"medium": "{{cell(BP_1.result,0,"Mid").asString()}}",
"title": {
"fontSize": 14,
"subtitleFontSize": 11,
"label": "",
"align": "center",
"subtitleLabel": ""
},
"trellis": {
"flipLabels": false,
"showGridLines": true,
"size": [
100,
100
],
"enable": false,
"type": "x",
"chartsPerLine": 4
},
"bands": {
"high": {
"color": "#008000",
"label": "High"
},
"low": {
"color": "#B22222",
"label": "Low"
},
"medium": {
"color": "#ffa500",
"label": "Medium"
}
},
"showRange": true,
"showLabel": true,
"showValue": true,
"high": "{{cell(BP_1.result,0,"High").asString()}}",
"columnMap": {
"trellis": [],
"plots": [
"sum_Amount"
]
},
"min": 0,
"angle": 240,
"theme": "wave",
"step": "Gauge_1",
"applyConditionalFormatting": false,
"legend": {
"show": false,
"inside": false,
"showHeader": true,
"position": "right-top"
}
},
"type": "chart"
},
With this done hit ‘Done’ in the top right corner and your gauge should yet again be dynamic.
Written by
Hi Rikka,
Do you know of any way to NOT have the value the same color as where the gauge arrow is pointing? I have a customer who wants that number to stay black and not adopt the gauge color.
Robert
Unfortunately it is not working for me 🙁 Is there anything else what might be set up incorrectly? It is not changing the angle either.
Did you check if you added your binding to the widget? It won’t work if you add it to the step.
I have multiple Gauge charts grouped by Name, each having its own target amount in record,
Is it possible to apply targets from table to multiple Gauge charts?
Hi Rikka, my use case is to set the maximum range to guage dynamically, but faceting is not working
here is my JSON
Widget
{
“type”: “chart”,
“parameters”: {
“max”: “{{cell(TotalOpportunityQuan_1.result, 0, \”sum_TotalOpportunityQuantity\”).asString()}}”,
“showPercentage”: true,
“legend”: {
“showHeader”: true,
“show”: false,
“position”: “right-top”,
“inside”: false
},
“visualizationType”: “gauge”,
“exploreLink”: true,
“medium”: 33,
“title”: {
“fontSize”: 14,
“subtitleFontSize”: 11,
“label”: “”,
“align”: “center”,
“subtitleLabel”: “”
},
“trellis”: {
“flipLabels”: false,
“showGridLines”: true,
“size”: [
100,
100
],
“enable”: false,
“type”: “x”,
“chartsPerLine”: 4
},
“bands”: {
“high”: {
“color”: “#008000”,
“label”: “High”
},
“low”: {
“color”: “#B22222”,
“label”: “Low”
},
“medium”: {
“color”: “#ffa500”,
“label”: “Medium”
}
},
“showRange”: true,
“showLabel”: true,
“columnMap”: {
“trellis”: [],
“plots”: [
“sum_CRM_RDSPotentialVolume__c”
]
},
“showValue”: true,
“high”: 66,
“showActionMenu”: true,
“min”: 0,
“angle”: 240,
“theme”: “wave”,
“step”: “Stage_StageName_2_1”,
“applyConditionalFormatting”: false,
“autoFitMode”: “keepLabels”
}
}
Query
{
“type”: “aggregateflex”,
“query”: {
“measures”: [
[
“sum”,
“CRM_RDSPotentialVolume__c”
]
]
},
“visualizationParameters”: {
“parameters”: {
“visualizationType”: “gauge”,
“autoFitMode”: “keepLabels”,
“theme”: “wave”,
“max”: “{{cell(TotalOpportunityQuan_1.result, 0, \”sum_TotalOpportunityQuantity\”).asString()}}”,
“showPercentage”: true,
“legend”: {
“showHeader”: true,
“show”: false,
“position”: “right-top”,
“inside”: false
},
“medium”: 33,
“title”: {
“fontSize”: 14,
“subtitleFontSize”: 11,
“label”: “”,
“align”: “center”,
“subtitleLabel”: “”
},
“trellis”: {
“flipLabels”: false,
“showGridLines”: true,
“size”: [
100,
100
],
“enable”: false,
“type”: “x”,
“chartsPerLine”: 4
},
“bands”: {
“high”: {
“color”: “#008000”,
“label”: “High”
},
“low”: {
“color”: “#B22222”,
“label”: “Low”
},
“medium”: {
“color”: “#ffa500”,
“label”: “Medium”
}
},
“showRange”: true,
“showLabel”: true,
“columnMap”: {
“trellis”: [],
“plots”: [
“sum_CRM_RDSPotentialVolume__c”
]
},
“showValue”: true,
“high”: 66,
“showActionMenu”: true,
“min”: 0,
“angle”: 240,
“applyConditionalFormatting”: false
},
“type”: “chart”,
“options”: {}
},
“datasets”: [
{
“id”: “0Fb260000008awBCAQ”,
“label”: “Opportunities”,
“name”: “opportunity”,
“url”: “/services/data/v48.0/wave/datasets/0Fb260000008awBCAQ”
}
],
“useGlobal”: true,
“isGlobal”: false,
“label”: “Stage_StageName_2”,
“broadcastFacet”: true,
“receiveFacetSource”: {
“mode”: “all”,
“steps”: []
},
“selectMode”: “single”
}
Did you make sure to connect data sources if you are using 2 different datasets?
Hey Rikke,
Thanks so much for the article and all your support with the many articles.
I just wanted to find out one thing, once a chart widget and it’s query contains a binding, does the chart still receive facets?
I have created a gauge chart with the limit value being a binding, but when I choose a value from the same dataset from a dropdown selection, all other charts are faceted correctly except the gauge chart.
Sorry, pretty new to Analytics, please excuse any incorrect terms or let me know if I haven’t provided the correct information. Thanks
Hey! I’m going to piggyback off a couple of previous posters and say that my faceting doesn’t seem to work anymore once I make the max value dynamic. Do you know how to resolve this?
Make sure to connect data sources if you use multiple datasets
Hi Rikki! Thanks for posting this! I am looking at making the maximum value and reference lines of a bullet chart dynamic. For example, we are looking at account plan objectives. Each objective has a target (which would be the maximum value) and the sum of amount for opps linked to the objective is the measure. Do you have any examples for bullet charts?
Thanks!
This works great but when i apply this, the colors change just fine, but the filters will no longer change the chart’s numbers. Not sure why this breaks the filters. Any help would be amazing.
Hi,
sorry but I can not see any of these settings in my Gauge
anybody knows if it can handle a dynamic goal? I.e. change the goal based on a filter on the dashboard? We have some global region goals and would love to see the goal change based on the region filter we have on the dashboard.
I have followed the details very closely and im not having any luck…
“chart_1”: {
“parameters”: {
“legend”: {
“descOrder”: false,
“showHeader”: true,
“show”: true,
“customSize”: “auto”,
“position”: “right-top”,
“inside”: false
},
“axisMode”: “sync”,
“tooltip”: {
“content”: {
“legend”: {
“showBinLabel”: true,
“measures”: [],
“showNullValues”: true,
“customizeLegend”: false,
“showPercentage”: true,
“showDimensions”: true,
“showMeasures”: true,
“dimensions”: []
}
}
},
“visualizationType”: “gauge”,
“medium”: “{{cell(woof.result,0,\”B\”).asString()}}”,
“exploreLink”: true,
“title”: {
“fontSize”: 14,
“subtitleFontSize”: 11,
“label”: “”,
“align”: “center”,
“subtitleLabel”: “”
},
“binValues”: false,
“trellis”: {
“flipLabels”: false,
“showGridLines”: true,
“size”: [
100,
100
],
“enable”: false,
“type”: “x”,
“chartsPerLine”: 4
},
“bands”: {
“high”: {
“color”: “#008000”,
“label”: “High”
},
“low”: {
“color”: “#B22222”,
“label”: “Low”
},
“medium”: {
“color”: “#ffa500”,
“label”: “Medium”
}
},
“showRange”: true,
“showLabel”: true,
“high”: “{{cell(woof.result,0,\”High\”).asString()}}”,
“min”: 0,
“valueType”: “compactNumber”,
“angle”: 240,
“theme”: “wave”,
“dimensionAxis”: {
“showTitle”: true,
“customSize”: “auto”,
“showAxis”: true,
“title”: “”,
“icons”: {
“useIcons”: false,
“iconProps”: {
“fit”: “cover”,
“column”: “”,
“type”: “round”
}
}
},
“applyConditionalFormatting”: false,
“autoFitMode”: “keepLabels”,
“bins”: {
“woof”: {
“high”: “{{cell(woof.result,0,\”High\”).asString()}}”,
“low”: 0
},
“bands”: {
“high”: {
“color”: “#008000”,
“label”: “”
},
“low”: {
“color”: “#B22222”,
“label”: “”
},
“medium”: {
“color”: “#ffa500”,
“label”: “”
}
}
},
“max”: “{{cell(woof.result,0,\”Max\”).asString()}}”,
“showPercentage”: true,
“columnMap”: {
“trellis”: [],
“plots”: [
“A”
]
},
“showActionMenu”: true,
“measureAxis2”: {
“sqrtScale”: false,
“showTitle”: true,
“showAxis”: true,
“title”: “”,
“customDomain”: {
“showDomain”: false
}
},
“measureAxis1”: {
“sqrtScale”: false,
“showTitle”: true,
“showAxis”: true,
“title”: “”,
“customDomain”: {
“showDomain”: false
}