Gantt Charts based on query results

App Building
,
1

I'm trying to use retool to generate Gantt Charts. I'm tring to do this with a custom component (if anyone knows how to do this without, I'm all ears), and I'm having trouble getting the data from the model into the HTML. Currently I'm trying this:

min: window.Retool.subscribe(function(model) {model.min}),
max: window.Retool.subscribe(function(model) {model.max})

Min and max are currently:

SELECT 
  MIN(date_experiment_started)
from 
  inventory_management.experiments
where 
  project = {{table1.selectedRow.data.project_name}}

with a return data[0] transformer applied.

I have a feeling that this might have something to do with escape characters, but I'm not sure. Does anyone have any ideas?

2

Hey @jstaniforth, welcome to the fam :hugs:

The min and max values should be defined in your components 'value` field so you can access them.

I would change the query to include min and max and also formatDataAsArray in the query transformer.

Define your component value like so:

{
  min: queryName.min,
  max: queryName.max
}

and you can access it in your component via:

window.Retool.subscribe(function(model) {
  var min = model.min
  var max = model.max
})

Hope that helps (read more):v:

2 Likes
3

Thank you! This worked perfectly

4

@jstaniforth Were you able to successfully create a gantt chart using a custom component? Need one for my site as well and haven't had any luck.

5

Hi @paul.narup

Is this community post helpful? I put together an app export based on the example discussed there if you want to import it & check it out.
gantt-20example.json

6

Thanks, @Tess, the app export was very helpful. Was able to get something basic up and running. It would be nice if there was a built-in component for this though, just for ease of use.

7

Agreed! I don't think this is on our near-term roadmap yet, but it is a feature request that we are tracking internally. I'll post here when we're able to ship something :slightly_smiling_face:

9

Wanted to share our new Timeline component that might be a fit for this use case too: Introducing the new Timeline component

2 Likes