How to make a Dynamic Diagrams? (Specifically Timeline Diagrams)

1

I need help finding a way to dynamically build a timeline diagram in Coda.

Timeline Diagram Example: enter image description here

I could not find anything out there that does Timeline Diagram. However I have been working with a really cool software I found and would welcome introductions to similar softwares.

QuickChart’s GraphViz API has allowed me to create diagrams using parameters in the URL. For Example the following URL:

https://quickchart.io/graphviz?graph=digraph{Breakfast->Lunch->Dinner;Breakfast->Dinner}

Try replacing 'Breakfast->Lunch->Dinner;Breakfast->Dinner' part of the URL with any connections you like to dynamically create your own diagram.

This URL creates this Diagram:

enter image description here

This idea pairs great with softwares like Coda where you can embed calculated URLs based on data in your database.

While QuickChart is great, it cant do timelines. Does anyone have any software I should take a look at?

2

Hi !

Have a look there to svg implementation.
That’s not very fluid but allow to cretae great gantt/timeline, but requires a certain amount of work !

Cheers

3

Thanks! It was a monster effort and still looks a little basic but I am very happy with the first draft!

image
image1444×524 13.8 KB

2 Likes
4

Congrats !

When you’ve understood how it works, I can assure you this is not that complicated and you can really achieve awesome stuff !

5

Any tricks for making it look good? :joy:

6

I made it into a pack!
For anyone who comes looking for it later:

Have you ever wanted to create a Multiyear Timeline Diagram in Coda?

This pack makes it easy to create these Timeline Diagrams with 1 formula and just 2 inputs:

  • List of Dates
  • List of Event Titles

Features include

  • Live updating
  • Auto sizing
  • Auto placement
  • Can be used in tables to give each row its own timeline
  • Can be put on a button to further increase efficiency

Enjoy!

2 Likes
7

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