Gantt time line chart on appsheet

1

in the Gantt graphic, i have tried to figure out how to config the code for the dates of each start and finish date i mean this line of the code.

labels: ['Part 1', 'Part 2', 'Part 3', 'Part 4', 'Part 5', 'Part 6','Part 7','Part 8'],
    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')],
        [new Date('2021-09-20'),new Date('2021-10-31')],
        [new Date('2021-08-20'),new Date('2021-08-31')],

i already create the VC columns to do like the code is on appsheet and my VC generate this:

["2024-05-22","2024-05-22"] , ["2024-05-23","2024-06-08"] , ["2024-05-31","2024-06-28"] , ["2024-06-27","2024-07-05"] , ["2024-07-02","2024-07-08"] , ["2024-07-08","2024-07-24"] , ["2024-07-25","2024-07-27"] , ["2024-07-29","2024-08-12"] , ["2024-08-13","2024-08-20"] , ["2024-08-21","2024-09-03"] , ["2024-09-04","2024-09-14"] , ["2024-06-12","2024-07-12"]

this is my main code on appsheet:

"https://quickchart.io/chart?c=" & ENCODEURL(
  CONCATENATE(
    '{
      "type":"horizontalBar",
      "data":{
        "labels":["',
     substitute([LISTADO DE ACTIVIDADES SS],",",'","'),'"],
        "datasets":[{
          "data":[',[prueba de fechas]
          ,'],
          "backgroundColor":["red", "purple", "orange", "blue", "green"],
    },],
        },
      "options":{
        "legend":false,
        "annotation":{
          "annotations":[{
            "type":"line",
            "mode":"vertical",
            "scaleID":"x-axis-0",
            "value":',
              concatenate('"',TEXT([PLAZO], "YYYY-MM-DD"),'"'),
            ',
            "borderColor":"red",
            "borderWidth":1,
            "label":{
              "enabled":true,
              "content":"plazo",
              "position":"top"
            }
          },
          {
            "type":"line",
            "mode":"vertical",
            "scaleID":"x-axis-0",
            "value":"',
             TEXT(today(), "YYYY-MM-DD"),
            '",
            "borderColor":"blue",
            "borderWidth":1,
            "label":{
              "enabled":true,
              "content":"hoy",
              "position":"top"
            }
          }]
        },
        "scales":{
          "xAxes":[{
            "position":"top",
            "type":"time",
            "time":{
              "unit":"month"
            },
            "ticks":{
              "min":"',
                "2024-01-01",
              '",
              "max":"',"2024-12-31"
              ,'"
            }
          }]
        }
      }
    }'
  )
)

I’ve even played around with the Quickchart code so much that I added an additional vertical line to compare the end goal with “today’s” date, but I still haven’t been able to figure out how to reflect the start and end dates of each activity, I feel like I’m 95% of completing the code, but please I need your support.

Here I leave you how the graph looks with one of the projects that is underway.

imagen ejemplo

at the end, i just want to know whats its the proper way to put the string?

Attentive to your valuable comments.

sincerelly,

2

Hi @ingjeanpe sorry for the delay. If you still have the problem, can you share the final generated image URL that you’re sending to QuickChart? That will help me troubleshoot. If you haven’t already, take a look at the Gantt example.

1 Like
3

hi ian,
dont worry i just start to play with the graph and i figure out how to configure it, i put addititonals changues and plugins to it, let me show U.

gantt final
gantt final1495Ă—444 90.3 KB

this is my final code:

"https://quickchart.io/chart?width=1000&height=300&c=" & ENCODEURL(
  CONCATENATE(
    "{
  type: 'horizontalBar',
  data: {
    labels: ["," ' ", SUBSTITUTE( [LISTADO DE ACTIVIDADES SS] , "," ," ' , ' " )," ' "
    
    					,"],
    datasets: [{
      data: [",[inicio y fin],"
        
      ],
      backgroundColor: [",[ACTIVIDADES RELACIONADAS][Color de actividades],"]
    }, ],
  },
  options: {
    legend: {
      display: false
    },
    annotation: {
      annotations: [{
        type: 'line',
        mode: 'vertical',
        scaleID: 'x-axis-0',
        value:"," ' ",text([PLAZO],"YYYY-MM-DD")," ' ", ",
        borderColor: 'red',
        borderWidth: 1,
        label: {
          enabled: true,
          content: 'Plazo',
          position: 'top'
        }
          },
          {
         type: 'line',
        mode: 'vertical',
        scaleID: 'x-axis-0',
        value:"," ' ",if([ESTADO]<>"completado",text(today(),"YYYY-MM-DD"),"[]")," ' ", ",
        borderColor: 'blue',
        borderWidth: 1,
        label: {
          enabled: true,
          content: 'Hoy',
          position: 'top'
     }
          }
          ,
          {
         type: 'line',
        mode: 'vertical',
        scaleID: 'x-axis-0',
        value:"," ' ",text([FIN],"YYYY-MM-DD")," ' ", ",
        borderColor: 'green',
        borderWidth: 1,
        label: {
          enabled: true,
          content: 'Fin',
          position: 'top'
     }
          }]
        },
    scales: {
      xAxes: [{
        position: 'top',
        type: 'time',
        time: {
          unit: 'month'
        },
        ticks: {
          min: "," ' ",TEXT([INICIO]-30,"YYYY-MM-DD")," ' ", ",
          max: "," ' ",TEXT([FIN]+30,"YYYY-MM-DD")," ' ", ",
        }
      }],
    },
     plugins: {
      datalabels: {
        display: true,
        color: 'gray', // Color del texto
        align: 'end', // AlineaciĂłn al final de la barra
        anchor: 'end', // PosiciĂłn al lado de la barra
        font: {
          size: 9, // Tamaño del texto
          weight: 'normal' // Grosor del texto
        },
        formatter: function(value, context) {
          // Progress percentages example data
          const progressData = [",[Progreso de actividades],"];
          return progressData[context.dataIndex] + '%';
        }
      }
    }
  },
}"
)
)

and yeah the most dificult thing for me it was to find out the correct string for the dates enclosed with []
and it was this:

VC column config on appsheet:

CONCATENATE("[","new Date", " ( ", " ' " ,[inicio_format]," ' ", ")",",","new Date","("," ' ",[fin_planeado_format]," ' ", " ) ","]")

thanks for create this amazing platform!

Sincerely,

JesĂşs.

1 Like