Calendar for "Gantt Chart"

Is there such a diagram (as a component) of the Calendar display (or how can this be done?) that allows:
1.
to set a dynamic list of user tasks in this “Calendar” on the left with the first and pinned column? and
2.
in the upper “header” fixed line, briefly and sequentially list the dates - in narrow columns?
For what?

  • to build a “Gantt Chart” with a color fill of certain (blocks) of horizontal cells and, thereby, display the time (quantity of days) the status of completion of each task?

I use it by combining spreadsheet and Glide. Tables from spreadsheets are displayed using the webview component. Task items can be added/subtracted from Glide. And some complex formulas are still solved in the spreadsheet.
I don’t know yet if quickchart.io has it @Robert_Petitto. But it’s also an image or embedded component

Gantt Charts are possible with Quickchart.

https://quickchart.io/gallery/#time-scale

3 Likes

Thanks Darren - I got it working and can add a parameter, e.g. to change the background color to white or pink, etc…

I thought it would then be obvious how to add more parameters. For example, I see it’s possible to move the legend to the bottom.

But I have tried every combination in my URL Construct without success. Can you explain what how to add this parameter to move the legend to the bottom please?


(doesn’t work)

That needs to be part of your chart definition that goes into the template column, which gets passed as the c parameter in your Construct URL column.

That first screenshot that you posted shows an example, eg:

options: {
  legend: {
    position: 'bottom',
  }
}

Add the above to your template column.

The available API parameters (that can be used with the Construct URL column) are listed here.

1 Like

Well it doesn’t like it if I literally cut and paste it and add it to the bottom of my template.

UPDATE:

Ok it worked when I finally tried this version:

Thank you.

Thank you so much, Darren, for the hint!
But I would be even more grateful if you could tell me
how
! exactly with Glide !
to manage (edit and add):
1.
the values of the column “Part 1, 2, 3, …”?
2.
the color fill of the blocks, and
3.
the location of these colored blocks?

The sandbox is really useful here. Fiddle with your chart settings in the sandbox, then just copy/paste.

Looks like in your first attempt you had the options section outside the main JSON body.

1 Like

If you open the Gantt Chart example in the Quickchart Sandbox, you will see the various options there.
You can play around with those until you get it how you want.
The resultant JSON gets used in a Glide template column.

Check the below thread to learn more about how to use quickchart with Glide:

Actually, another tip…

If you find yourself getting that dreaded “Chart error” when you add the chart to a screen, what you can do is go to the GDE, click in your template column:

… copy the whole contents, and then paste that into the quickchart sandbox.
You’ll get the same error, but it’s a lot easier to debug in the sandbox, and generally easier to spot something wrong.

Sorry to keep coming back to you on this - appreciate the tips!

I want to set the min and max axis for the chart to be 0 and 10, respectively. But the hint below seems to use the ‘let’ command. Does this imply it’s not going to be as simple as adding the text to my template or should I persevere?! If so, which fragment should I add?

That looks like an example of how you would do it programatically, eg with JavaScript.

You should be able to use everything you see there except the “let” keyword.

Scratch that, I didn’t look closely enough…

Take everything from the second ident… starting with scales: and ending with the curly brace on the second last line. And all of that needs to be within the options section of your chart definition.

Again… try it in the sandbox and you’ll soon see.

Here is an example from the docs that you should be able to copy and paste into the sandbox.

1 Like

Adding to this, except some certain functions (let’s say a for loop), I expect options and plugins to work normally with quickchart.