[New plugin] Fully Customizable Gantt / Timeline Chart

Hi everyone,

I have published a plugin that provides a fully customizable Gantt / Timeline Chart for your application. This Gantt / Timeline chart uses the data from your database or another dynamic data source. The plugin offers extensive customization options.

Demo page (the editor is public!): https://pluginpreview.bubbleapps.io/version-test/gantt
Plugin page: Gantt / Timeline Chart Plugin | Bubble

Gantt : Timeline chart preview

You can always reach out to me for questions, bug reports or feature request!

Updates:
1.1.0
1.2.0
1.3.0
1.4.0
1.5.0
1.6.0
1.8.0

21 Likes

Wicked. I’m adding this to my soon to be released Project Management CRM.

I love the mobile view!

@wegetdesign might be interesting!

1 Like

Congrats, @Thimo. :slightly_smiling_face:

I’m hoping you can clarify a few points…

  • Is there some place that lists all of the events, states, and actions implemented by the plugin to help discern its overall capabilities?
  • Can the view mode be changed dynamically, or is it fixed per instance?
  • It’s clear that the chart will update when the data changes, but can the data be updated when the chart is manipulated, like in the official project? I can’t seem to manipulate the chart on your demo page, but it’s unclear if that’s a limitation of the demo or the plugin itself.

Thanks for the clarification.

2 Likes

Hi @sudsy

Thank you for your questions. I have answered them below.

1 - I think you can see those in the editor, but maybe they are a little hard to find:
Event: ‘Bar is clicked’.
States (these are set when a bar is clicked): ‘Name’, ‘id’, ‘Current progress’, ‘Starting date (text)’ and Ending date (text).

2 - I just published an update (1.1.0) that let you change the view mode dynamically! I also updated the demo page:

Viewmode change preview

3 - The bars on the chart can’t be manipulated. Initially it was the intention to include these features, but they let to a lot of bugs and unexpected behaviour and that’s why they are not included in this version.

Hopefully I answered all your questions. :slight_smile:

1 Like

Thanks for the info!
:slightly_smiling_face:

1 Like

Really cool.

Looks like it breaks if you swap between day/week etc when you have a pop up open. The chart goes blank at the point.

This is on Safari 13.1.1

1 Like

@casheets123 I will look into it :+1:

sorry, not the big white pop up, the black little pop up :slight_smile:

looks like it splits the graph in two down the middle and the graph scroll gets wonky, not showing the graph unless you scroll way way left.

1 Like

@casheets123 It is now working as expected (1.2.0) :slight_smile:

Confirmed, works great.

Nice job!

1 Like

Thank you! Love how modern the charts look.

I’m receiving this error when the page loads:

    The plugin Gantt / Timeline Chart / element Gantt chart threw the following error: UnexpectedError Invalid fieldName: null
    at Object.get (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/d2fb316acb459c38acc539f348c80c7026dd1ef68a82cf158b69af4ffff9c487/xfalse/x7:18:458946)
    at eval (PLUGIN_Gantt---Timeline-Chart-update--Gantt-chart-.js:7:97) (please report this to the plugin author)

Hi @mattblake! This is probably caused because the chart doesn’t have any data to show (or in this case an empty ‘Name’). Once you add the data to your database it will show up on the chart.

I will at the end of the day try if I can push an update to get rid of this error and just show no chart or an empty chart when there is no data. I think that a lot of people will find that useful :slight_smile:

1 Like

Update 1.3.0

1 - Charts with no data will not trigger errors anymore. If there is no data the chart element will stay empty.

2 - Missing ‘id’, ‘name’ or ‘progress’ values in your data will also not trigger errors anymore. The starting date and ending date properties are still mandatory. @mattblake

3 - The tooltip will not get smaller on click anymore.

2 Likes

Thanks for looking into it so quick. I’ve updated to the most recent version. I’m still seeing nothing and an error in the debug.

The Data Source is generating results but the top section is still showing as empty. I’ve tried a repeating group with the same search to check if it’s to do with privacy settings, however, the repeating group do show Task results.

I will send you a PM!

Massive thanks to @Thimo! Found how I’d miss-configured the plugin and had it working in less than 10 minutes.

1 Like

Update 1.4.0

The amount of hours of the data entries are now taken into account for the ‘Quarter day’ and ‘Half day’ view modes!

Hi @Thimo,

Great work on this.

Is it possible to include point and drag? In the demo is looks like I can only use the scroll wheel after clicking my mouse wheel button.

Thanks!

2 Likes

+1 for point and drag.

1 Like

@lantzgould @nocodeventure

I just published version 1.5.0 containing a custom drag to scroll feature! You can turn this off inside the property settings. Also, you can specify a specific multiplier to speed up the scroll and you can enable/disable the ‘grab’ cursor style :slight_smile:

I have updated the demo page so you can take a look.

ezgif-6-8024d54968b9

3 Likes