Creating interactive Gantt chart

[sitite3826]

Hi,

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

[huban]

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:

Set size + position on drag

Hi! Yes. You can use this “function” trick I mentioned so that each bar checks itself to see if it should light up or not. You’d add code like the code below to each bar. The code will be exactly the same for each bar, so once you get the Moved event it working for one bar, you can just copy/paste the whole Moved event (containing both conditions) to all bars. Or, you can just delete all of the other bars, and then copy/paste the working bar over and over… Note that this assumes that you are …

Dual Slide control to display text according to slider settings

Stumbled across this as I was cleaning up a bunch of old Axure files from my computer: Dual_Range_Slider.rp (76.2 KB) I’d like to clearly state this is not my solution. They are obviously better at planar math… (If anyone does know whose it is, please let me know and I will give them credit.)

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”

[huban]

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?

[sitite3826]

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.

[huban]

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

[huban]

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)

[system]

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