Launched: A whole new timeline chart (fka, Gantt)

[alden]

Since introducing charts to Coda a few years ago, we’ve received a lot of feedback on one chart in particular: Gantt charts. Your feedback has covered everything from challenges with the left panel, sizing the charts overall, and requests to incorporate dependencies.

One of my favorite things about working at Coda is the candid and open feedback loop between our maker community and the teams that build new products and features at Coda. That’s why I’m pleased to share some updates on all of the above, and an updated name to more accurately reflect this chart type.

Meet the new timeline chart!

We’ll be retiring the Gantt naming in the product, but never fearーyou can still access all of the old Gantt chart functionality plus some new features via the Timeline chart type under your chart display options, or by typing /timeline on any Coda page.

Custom width for the left panel

You may’ve already noticed this one, but instead of being stuck with truncated row labels, you can adjust the width of the left panel by dragging it so you can see all of your text.

Fit or Full width for timeline charts on your page

Historically, we’ve confined timeline charts to the general shape of your docs’ pages, and required you to scroll within your charts. Now, you can select “Full” in your timeline display options in order to have the gantt chart expand beyond typical page borders. This is especially helpful for things like long term projects where individual tasks only last for one or two days.

Dependencies

You may have noticed some new visual elements in the images aboveーwe’ve added dependencies as an option for your timeline charts! If added in your timeline display options, you’ll see tasks that depend on each other connected by a gray line if they follow sequentially, or by a red line if a task starts before a task it depends on is scheduled to be complete.

There are two ways to set up dependencies for your timeline charts.

Option 1: Enable from your timeline display settings

1. From your timeline display settings, click on the select list under “Dependency” (beneath the start and end date select lists)
2. Select “+ Add a New Column”
3. You can add dependencies to any task by clicking on them in your timeline view or by reverting to a table view, where you’ll see the new dependency column and can select dependencies from there

Option 2: Enable via lookup column in your table

1. Before converting your table to a timeline chart, make sure the column with your tasks is set as the display column
2. Add a Lookup column, and select the table you’re working in as the referenced table; in other words, if you are making a timeline chart for “Table A” add a lookup column that references “Table A”
3. Give this column a memorable and accurate name, such as “Dependencies”
4. For rows that have dependencies, select the dependency in your new column
5. When you’re done, open the table options menu by hovering over your table and clicking “Options”
6. Click the 3 dot ellipsis menu, and then Timeline
7. Enter the Timeline set-up wizard, or select Timeline display
8. After selecting your Start and End dates, choose your dependency column

Tip: In both scenarios, the default behavior will allow a task to rely on a maximum of one other task. If you have a task with multiple dependencies, configure your lookup column settings to “Allow Multiple Sections”

Tip 2: Don’t forget that you can have multiple, synced views of a table! It may be helpful to have one table for tasks, and then to copy that table and set-up your timeline chart so that you can easily toggle between the two views to set-up dependencies quickly.

Thanks for challenging us to make our original Gantt charts better, and for your clear and actionable feedback. We hope the new timeline chart features help you manage projects and collaborate with your teams even more seamlessly!

[Eustachio_Di_Paola]

Looks good. Can you see days instead of weeks?

[Andrew_Stinger]

Yes you can! Under your “Timeline Display” you can set the “Customize Time Axis” drop-down to “Day” (among other values)

[Pieter_Lesage]

is it possible to have multiple blocks on 1 Line?
for example to show exact time spent on a task?
or to collapse multiple tasks?

[Andrew_Stinger]

Hi Pieter! If you use Left Grouping in your source table, you can collapse multiple tasks into one. For example, if “Mega Task A” is composed of Tasks 1, 2 and 3, you could have a column for “Mega Task” and a separate column for “Task.” For Tasks 1, 2 and 3, you’d put “A” in the Mega Task column. Then, you could group by A, this will collapse Tasks 1, 2 and 3 into the one Mega Task in your timeline view.

Another way to visualize this is in “Step 3” in this FAQ, where tasks are collapsed/grouped by task owner: How to build a timeline chart | Coda Help Center

[MrChrisRodriguez]

@Andrew_Stinger, Coda’s prior Gantt implementation used a non-standard representation of days. Is this addressed in Timelines or are we going to run into the same issues?

Regardless, thanks for the progress in the right direction!

[Piet_Strydom]

Wow, this looks good!!

[Oleg_Ovsyannikov]

Wow! This is what we’ve been waiting so much! Thank you, Coda you’re the best!

ps: eager to see two-way cross-doc sync

[Stephane]

It’s better (it was easy…) and many thanks for that.
But the time axis labels are too poor.
Example :

I have to count the lines between FEB 4 and FEB 15 to know what day is ending the third task .

I need something like this :

[Marko_Petrovic]

Some nice updates there!

As @Stephane mentioned, some more precise time markings would make life much easier

[Pieter_Lesage]

@Andrew_Stinger
For my use case it would be better that the mega task is not 1 solid block, but seperate blocks so you can see the gaps in time if 2 tasks are not sequential.

[Pierre_Lefrancois]

Thanks for this better version, I hope you will continue to upgrade this chart type. To be usable in our docs, we would need :

• a better look and feel (closer to Tom’s planner)
• a standard representation of days
• a hide option for week-end days
• an option to choose which column(s) to display in the left panel (more than the title)
• a quick add function in the chart

But I believe in Coda, my every day tool for my project management and in the Coda team <3

[Sonny_S]

Is there anyway of:

1. Setting a single start date for the first task
2. Setting durations for each task
3. Based on the start date and the durations, all start dates for all tasks get filled.

Would be very helpful!

Thank you.

[Jami_Haavisto]

This is a fantastic improvement! There is still ways to go, already a solid big step forward.

These might have been done already earlier, but here is a few additions that I noticed now:

• If your date fields are not created via formula, the task item edges can be dragged to be resized
• Timeline seems to work work more like a table:
  • From the name column you can expand the row to modify things (like in the animation above just by clicking the task)
  • You can add a new row from name’s left bottom corner
  • Right clicking the task allows “Delete this row from everywhere”

[khanh]

Thank you for all the great feedback & excitement for timeline, folks! We’ll keep all of these in mind for future iterations.

[Ian_Villa]

Could you make it easier to color rows? Feels like I need to add a new column with conditional statements every time to make my timeline tasks more visually distinct

[Josh_Roseman]

First impressions: I’m a little unclear on the size restrictions for this data visualization, and the the way margins are managed in general on the canvas.

Even when content alignment is set to “wide” under page options, the dimensions for the “fit” or non-scrolling view are constricted in a way that places the right margin in the middle of a higher-resolution screen, making it very difficult to manage the entries. which might make sense, I believe, if you’re needing to ensure your work fits on an A4 page- but tables already break this rule. and as with tables, I think fitting into printed page in portrait mode is rarely the point of a gantt.

the left menu column then needs to be extended to see the full title for the entry- which takes up around 1/3 of the view, really making the timeline body of the interface hard to use. if there were a proper full-width view that scaled out the desired timeframe to the right side of the window (rather than the right side edge of this artificial margin) the title bar might not even be necessary in many cases, b/c the text might fit more easily into the bar.

the fullsize view is also confusing, in that the timeline doesn’t even expand to the right side of its own border in the nonscrolling “fit” view- the component is basically the same size, with a lot of negative space and no way to adjust the scale of the view without tweaking the resolution.

[nate_hurst]

same… This is a step in the right direction, but still is not practically that useful. I find the crazy squiggly lines to actually be really distracting and messy looking.

A good Gantt chart representation is the only thing competitors have over Coda, but with how frequently they release updates, I’m sure Coda will lead the pack later.

[Howard_Jong]

Appreciate the update! Not sure if this was addressed earlier, but I’d love to be able to have the text to the right of the bars when it’s too long to fit inside. Also, easer ways to select how to apply colors to the timeline bars [besides using conditional formatting] would be helpful. For example, an option to select color themes “Grouped by” within the Timeline Display options would be much appreciated.

[nathan_burley]

Is there a way to scale the size of the timeline ‘task’ marker so that the task name is legible on the marker itself? Even if this means wrapping the text and making the marker taller?