I am working on a system where users have different capacities. At the moment, these values are just a fixed number. Each user has 4-5 different capacities to set.

In the near future, users must be able to vary these capacities for different time periods in the future.

I am looking for input on how to do this.

My initial idea revolves around a graph, having time along the x-axis and capacities along the y-axis. The difficult part here is the interaction. I've been thinking about having the user drag a point of a line on the graph to a certain capacity and then set that value through time until another point is dragged.

However, I am still looking for simpler options. Maybe I am overthinking this?

Any input is appreciated..

Initial idea

  • Does each user enter like one data point for every capacity once a day? Or will they be able to edit data points from the past?
    – CodeManX
    Commented Jul 16, 2015 at 14:21
  • @CoDEmanX They would want to set these data points for future dates.
    – Stromgren
    Commented Jul 16, 2015 at 14:27
  • Will all 4-5 capacities for a future date be typically on the same date? If so, it might be easier to let them set all capacities in some sort of dialog for that particular date. The data points over time can be visualized in a chart, with time being on X axis (always put the periodic variable on that axis, left to right). Otherwise, you might wanna let them edit the entire graph instead. Not sure if d3.js supports this kind of manipulation.
    – CodeManX
    Commented Jul 16, 2015 at 14:36
  • @CoDEmanX Thanks for your answer. The values will usually differ. Basically, for each capacity, they would have a value. That value would be the value for all future dates up until a date where another point is set for that capacity.
    – Stromgren
    Commented Jul 16, 2015 at 14:39
  • +1 for a sketch that intuitively shows an intended interaction.
    – David
    Commented Jul 17, 2015 at 1:30

1 Answer 1


Your sketch makes sense and its one of the many ways to solve the puzzle. And believe it or not, its as simple as it gets.

It is possible with D3.js; if you look deeper into timeseries type of visualizations you might find an open source code or modules that would help you build it.

Here's some resources for you to get started

  1. For your step line graph see a demo. Here's the source code for it. You need to click on the table to see the graph.

  2. For filtering time between point A and B and to change the step line graph you might be interested in this nifty little plugin called Crossfilter

And if you are feeling lazy and want a out of the box solution, then try highcharts. It ships with what you have drawn above.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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