Making Charts Interactive

So far, we have a beautiful server-side rendered dashboard, but we haven’t done anything yet that is LiveView specific. In this section, we’ll change that. We’ll give our users the ability to filter the survey results chart by demographic, and we’ll see how we can re-use the reducers we wrote earlier to support this functionality.

In this lesson, we’ll walk through building out a “filter by age group” feature, and leave it up to you to review the code for the “filter by gender” feature.

How to filter by age group

It’s time to make the component smarter. When it’s done, it will let users filter the survey results chart by demographic data. Along the way, we’ll get another chance to implement event handlers on a stateful component. All we need to do is build a form for various age groups, and then capture a LiveView event to refresh the survey data with a query.

We’ll support age filters for all, under 18, 18 to 25, 25 to 35, and over 35. Here’s what it will look like when we’re done: