Gantt Chart with quickchart.io

[Gustavo_Eduardo]

Hello, good afternoon, has anyone tried to make a gantt with an API of this platform?

IF someone has an idea of ​​how to do it, it would be of great help, any information, video, whatever, thanks in advance

[TeeSee1]

You can set the value of an image col to something like this.

"https://quickchart.io/chart?c=" & ENCODEURL("{
  type: 'horizontalBar',
  data: {
    labels: ['Part 1', 'Part 2', 'Part 3', 'Part 4', 'Part 5', 'Part 6'],
    datasets: [{
      data: [
        [new Date('2021-02-01'), new Date('2021-05-01')],
        [new Date('2021-05-10'), new Date('2021-07-01')],
        [new Date('2021-04-20'), new Date('2021-11-31')],
        [new Date('2021-08-01'), new Date('2021-09-01')],
        [new Date('2021-02-10'), new Date('2021-07-01')],
        [new Date('2021-07-20'), new Date('2021-11-31')],
      ],
      backgroundColor: ['rgb(255, 99, 132, 1.0)', 'rgba(255, 99, 132, 1.0)', 'rgba(255, 206, 86, 1.0)', 'rgba(255, 206, 86, 1.0)', 'rgba(255, 206, 86, 0.2)', undefined],
    }, ],
  }
  }")

I took only the required part of this tutorial  (no option).

Building the string that represents your JSON is the difficult part depending on how dynamic your data is...

[Gustavo_Eduardo]

Hola @TeeSee1 Buen día!!! Ahí logré un avance! Pude poner el gráfico, todavía no entiendo cómo hacerlo interactivo, es decir, que se modifique con los datos de la app, pero es un buen comienzo. Muchas gracias por tu tiempo.

[Martin_Hurtado]

Buen día @Gustavo_Eduardo ¿Como le fue?

[YagoLuiz]

"https://quickchart.io/chart?c=" & ENCODEURL(CONCATENATE(
  "{",
  "\"type\":\"horizontalBar\",",
  "\"data\":{",
    "\"labels\":[\"",
    SUBSTITUTE([AllFormattedDescriptions], "\",\"", "\",\""),
    "\"],",
    "\"datasets\":[{",
      "\"data\":[",
      SUBSTITUTE([AllFormattedDates], "\",\"", "\",\""),
      "],",
      "\"backgroundColor\":\"rgb(255, 99, 132, 1.0)\"",
    "}]",
  "}",
"}")

Hello everyone, I would really appreciate your help, I'm trying to apply this Gantt chart in my app, it will be a work management app, so the chart is to give a schedule based on the work's tasks, with the start and end date of each, represented by: Allformatteddates, and the Allformatteddescription is the nomenclature of each task, but I am not able to finalize this formula, both columns mentioned above give the correct result, but the final formula does not. Help me please? 

[YagoLuiz]

@TeeSee1 @Gustavo_Eduardo @Martin_Hurtado if you can help me

[TeeSee1]

Here is another option you may want to consider using yet another external rendering service.

https://www.appsheet.com/templates/An-app-for-creating-and-managing-the-attributes-of-Gantt-charts-c...

I myself have zero experience creating an AppSheet app containing Gantt charts. You have to find a suitable external service and supply data to have your charts drawn. AppSheet has no native capability for Gantt charts AFIK.

[YagoLuiz]

Good morning @TeeSee1  , thank you very much for the reply, I will follow your steps and check if I can find the correct one, thank you very much again for your time!

[Rifad]

Anyone did it with https://frappe.io/gantt or https://www.chartjs.org/ and deployed it ? When a user clicks then opens a dynamic browser window ? Thanks.

[KON_TROLL]

We tried, but it was not good enough. So we went to dev extreeme. That works good, but needs some JS coding. As an alternative, you can make it in excel and download through a BOT. But then it is not "live".