jQuery Timeline of mobiscroll.com

App Building
1

Hi Guys, we are working on a customer service application in which we would like to show any and all events on a timeline showing a customer lifecycle. We found this sample mockup:

Event timeline

And also found a library which seems to come close to displaying these events on such a timeline: https://demo.mobiscroll.com/jquery/timeline/custom-range-view#

We also would love to show our projects and workload on a yearly calendar like this:

12 months overview

Any suggestions how to get this kind of magic in Retool ?

Thanks, Teele

2

I believe you can do this with a custom compomponent, utilising a library such as this gantt-task-reack.

3

How do install this library?

4

Hey @mullinsjo!

I'm not sure that gantt-task-react has a UMD build, which is required for Retool (docs). Instead, you might try using something like frappe-gantt which has a script on CDNJS (link). Here's an example script you can try putting into a custom component:

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/frappe-gantt/0.6.1/frappe-gantt.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/frappe-gantt/0.6.1/frappe-gantt.css">
<svg id="gantt"></svg>

<script>
const tasks = [
  {
  id: 'website',
  name: 'Redesign website',
  start: '2016-12-10',
  end: '2016-12-31',
  progress: 20,
  },  
  {
  id: 'content',
  name: 'Write new content',
  start: '2016-12-12',
  end: '2016-12-20',
  progress: 20,
  dependencies: 'website'
  }, 
  {
  id: 'styles',
  name: 'Apply new styles',
  start: '2016-12-22',
  end: '2016-12-29',
  progress: 20,
  dependencies: 'content'
  },
  
  {
  id: 'review',
  name: 'Review',
  start: '2017-1-1',
  end: '2017-1-3',
  progress: 20,
  dependencies: 'styles'
  },
]
const gantt = new Gantt("#gantt", tasks, {
    header_height: 50,
    column_width: 30,
    step: 24,
    view_modes: ['Quarter Day', 'Half Day', 'Day', 'Week', 'Month'],
    bar_height: 20,
    bar_corner_radius: 3,
    arrow_curve: 5,
    padding: 18,
    view_mode: 'Day',
    date_format: 'YYYY-MM-DD',
    custom_popup_html: null
});
</script>

Which should give you something like this:

1544×360 69.5 KB

I've attached an example app where you can see it working.

Gantt charts are also something on the dev team's radar and we can let you know here when they're included :slightly_smiling_face:

frappe_gantt (2).json (22.6 KB)

2 Likes