I have a chart that drills down into another chart. After the drilldown, I would like selection of a segment to cause a table to be filtered.
I currently have this working using a snippet in the drilldown actions, which filters the table to the specific Ids in the segment.
However, what I want to do is determine which segments have been selected (both in the first chart and the drilldown chart) and use that to set the filters on the table, so it’s clearer to the user how the table has been filtered and they can further adjust it.
The table filters should update based on the related conditions their setup to interact with. So, if you setup chart actions that interact with these conditions, then the filters will update accordingly.
Thanks, that answers the second half of the question I believe, that is setting the table filters. I can do that in a snippet or using the “Activate & Set value of Model Condition” action, but most likely a snippet as it will probably need some conditional logic.
However, I’m still not clear on how can I determine which segments have been selected on the graph, in order to decide what conditions to set and what values to give them.
For example, if the segments on a donut chart are each a value from a picklist, and the user clicks one of them, how do I determine the picklist value that has been clicked? The parameter received by the snippet seems to just be the IDs of the records associated with the segment.
Similarly, in a drilldown chart how do I determine which segment was selected in the first chart?
This post will lists the merge syntax for you. I believe {{$Chart.point.x}} is what you’ll to use in setting the value of a condition.
https://community.skuid.com/t/chart
Thanks Pat. Turns out I underestimated how much info is available in the Javascript parameter, so I’ve ended up doing it in a snippet. Here’s the code I’ve used determine the selected segment label, you set me on the right path:
var params = arguments[0]; var selectedSegment = params.$Chart.point.name;
Hey Ryan,
I don’t suppose you’d be nice enough to provide the entirety of your snippet here?
Also are you declaring these snippets in the Advanced Tab of the chart?
Hi Henry, sure thing.
I’m not using the Advanced Tab.
Go to the Series tab for the chart. Select a series, then click the + button for the series. This will add actions to the series, that occur when a segment is clicked. You can add a “Run Snippet” action and specify the name of the snippet.
Here’s the content of the snippet I call, in generalised form. The snippet will find the label of the selected segment, and then filter a model by setting a condition’s value to the content of the label.
As I recall the return value isn’t too important for this so the last 2 lines may not be needed.
var params = arguments[0],<br /> $ = skuid.$; var selectedSegment = params.$Chart.point.name; <br />var model = skuid.model.getModel('ModelName'); var condition = model.getConditionByName('ConditionName'); model.setCondition(condition, selectedSegment); var dfd = model.updateData();<br />return dfd.promise();
My code example formatting was a bit broken, fixed now.
Ryan,
What a delightfully quick, and extremely helpful response.
That’s precisely what I needed.
Good karma is certainly coming your way.
-H
Have you done anything to where the table re-filters after you click the Back button? Does your snippet do that? Or are you just filtering the table with your on-click and not also drilling down to a new chart?
Thanks for sharing!
I’m only filtering a table based on a chart click, not drilling down to another chart.
I’m not aware of a way to attach actions to the drilldown back button.
I saw a post on here about being able to use the Before Render Snippet on the first chart to essentially tie actions into the Back button, but I can’t find it now. I can’t figure out if this post will work or not.
