Creating interactive Gantt chart


How can I create an interactive Gantt chart which is draggable please? The bar itself needs to be draggable.

You weren’t too specific on want in particular was supposed to be “draggable” so I included an example of changing the bar’s width as well as moving bars around the grid:
Gantt_Chart.rp (86.5 KB)
Resizing the bar is just like a slider. There’s several posts on how to make them:

Moving the bar around the grid is just using Axure’s built-in “Dragged” interaction (it’s only available on dynamic panels) and the condition “Is Over Area of Widget”


There’s no logic around defining the width of a bar, so you can just add more columns and rename them to the times you want. However, if you’re wanting to do something like restrict the position/size to 30 minute increments, for example, that’s a bit trickier.

It depends on what you mean by “types of bars”.

For the sake of example, let’s assume the bars represent the object, “task,” and is defined by a set of properties. Currently, the bars in the sample project can represent the properties:

  • “Start Time” = position of the left side of the bar (horizontal position/x coordinate)
  • “End Time” = position of the right side of the bar
  • “Total Time” = width of the bar
  • “Person Assigned to the Task” = row the bar is in (vertical position of the bar/y coordinate)
  • Undefined = color of the bar

According to the “Person C” bar, it looks like you want tasks to have “types” of time, like “completed,” “available,” and “blocked,” represented by color/texture.

So it comes down to what you want to have happen when the bar is resized? Are all the colors scaled accordingly? Does only the width of the middle color change and the other two maintain their positions at the beginning/end of the bar?

For example in Person C if the middle bar is extended to the right, the right most bar (the darkest one) should scale and move accordingly. And the width of any bar can change.

“…width of any bar can change” meaning can be edited by user input?

Ok. So, basically, you’re saying is, “When the total width of the overall bar changes, change the width of the other two bars inside it.”

If that’s the case, what you can do is add two more rectangles inside the “Timeline” dynamic panel. Then, on the “main rectangle” (the one that spans the full width), set its “Resized” event to do two things:

  • Resize the two, smaller rectangles
    ** you’ll need to do some percentage math to figure out exactly how much

  • Move the rectangle on the right to stay “at-the-end” of the whole bar
    ** The easiest way to do this is:

Move rightBarWidget to x = [[This.right - Target.width]]

“This” meaning the main rectangle and “Target” meaning the rectangle on the right.

Gantt_Chart.rp (90.3 KB)

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.