Adjust table filters based on chart segment selection

  • 1
  • Question
  • Updated 3 years ago
  • Answered
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. 
Photo of Ryan Paddy

Ryan Paddy

  • 112 Points 100 badge 2x thumb

Posted 4 years ago

  • 1
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 44,006 Points 20k badge 2x thumb
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.
Photo of Ryan Paddy

Ryan Paddy

  • 112 Points 100 badge 2x thumb
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? 
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 44,006 Points 20k badge 2x thumb
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.skuidify.com/skuid/topics/-chart
Photo of Ryan Paddy

Ryan Paddy

  • 112 Points 100 badge 2x thumb
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;
(Edited)
Photo of Henry Goddard

Henry Goddard

  • 112 Points 100 badge 2x thumb
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?

Photo of Ryan Paddy

Ryan Paddy

  • 578 Points 500 badge 2x thumb
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],
  $ = skuid.$; var selectedSegment = params.$Chart.point.name;
var model = skuid.model.getModel('ModelName'); var condition = model.getConditionByName('ConditionName'); model.setCondition(condition, selectedSegment); var dfd = model.updateData();
return dfd.promise();
(Edited)
Photo of Ryan Paddy

Ryan Paddy

  • 578 Points 500 badge 2x thumb
My code example formatting was a bit broken, fixed now. 
Photo of Henry Goddard

Henry Goddard

  • 112 Points 100 badge 2x thumb
Ryan,

What a delightfully quick, and extremely helpful response. 

That's precisely what I needed. 

Good karma is certainly coming your way.

-H
Photo of Jack Sanford

Jack Sanford, Champion

  • 9,624 Points 5k badge 2x thumb
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!
Photo of Ryan Paddy

Ryan Paddy

  • 578 Points 500 badge 2x thumb
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. 
Photo of Jack Sanford

Jack Sanford, Champion

  • 9,624 Points 5k badge 2x thumb
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. 
Photo of Amy Dewaal

Amy Dewaal, Official Rep

  • 8,320 Points 5k badge 2x thumb
Are you referring to this post