This is a very generic question, but I have a graph that will be plotting attendance data for the public schools in my district. The users would like to see this data grouped by district, High Schools, Middle Schools, and Elementary Schools. I would like to have the graph initially display the district data, and somehow let the users select if they want to see one or more of the other data series as well.

I guess perhaps check boxes would be an easy way to do it, but was just wondering if anybody has come up with any other creative ways that has a more natural feel to it? I'm currently developing in HTML5 using a combination of Bootstrap, ASP.NET, jQuery and HighCharts, but I am open to other ways/suggestions.

  • Have you considered using d3's chart tools for your development? – BDD Feb 2 '15 at 14:39
  • Do you mean all elementary/middle/high schools? (i.e. 4 top-level options) or do you mean that once you've selected a district, further breaking it down by school in those districts? (and then potentially each individual school?) – J. Dimeo Feb 2 '15 at 14:48
  • Take a look at this: designsalaries2013.aiga.org – nightning Feb 2 '15 at 20:21
  • The concept is called "drill-down/drill-up" and is critical to reporting platforms in all industries. It's useful to allow users to somehow drill into those sub-hierarchies directly within the visualization. It doesn't fit your case exactly, but HighCharts does have a page on it. – plainclothes Feb 4 '15 at 23:30

Offering a legend that can toggle a data set on and off would work. If you used an area chart for your time series data, you could have the total data set to display first. An example of how this might look shows how the area chart would work when all series are "turned on."

Alternatively, you could show an initial view of the categories, and then allow users to drill down for more detail. An example of how this might work would show the initial numbers for each school level, and then you could drill down into line charts with time series data for each individual level (instead of the bars shown). This example also shows the natural language prompt that Mayo suggests.

  • 1
    Thanks to everybody who took the time to answer, and especially to @Merrily and @nightning!! I appreciate you all asking questions and trying to understand what I was asking about to better answer it. Fortunately for me the two individuals above understood and gave me a great idea. I like the idea of having an interactive legend that could be used as a toggle. To my surprise, my HighCharts was already doing this! With a little init work, I have it looking pretty good (at least I think). – Jimmy Genslinger Feb 20 '15 at 18:59
  • If anybody is interested in seeing exactly what I was talking about and how it turned out, this portion of my website is actually public facing and can be viewed at: assessment.jefferson.kyschools.us/DMC/SPV/Default Go down to the green section at the bottom, choose Goal 2 --> Strategy 4.2.3 --> #1 - Increase in Student Attendance Rate to see the finished product... – Jimmy Genslinger Feb 20 '15 at 19:00

If I understand the problem correctly you have a graph with a particular grouping and now you want to allow users to change the grouping; add / remove data series; and, I suppose, change chart types.

This is done all the time. Take a look at just about any financial page.

You can use natural language to allow users to select attendance type:

Show attendance by

  • district
  • High School
  • Middle School ...

Your users can select one or more as desired by clicking on the them. The names could function as a toggle. (Highlight when activated and remove the highlight when deselecting.)

The users can then select among chart types (show a picture of the chart) and finally there are a multitude of ways to display date ranges.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.