How to construct a URL that displays a Gantt chart from Quickchart

Any tips on how to construct a URL for a Gantt chart shown on this web page?

https://quickchart.io/sandbox#{ %20%20type%3A%20’horizontalBar’%2C %20%20data%3A%20{ %20%20%20%20labels%3A%20[‘Part%201’%2C%20’Part%202’%2C%20’Part%203’%2C%20’Part%204’%2C%20’Part%205’%2C%20’Part%206’]%2C %20%20%20%20datasets%3A%20[{ %20%20%20%20%20%20data%3A%20[ %20%20%20%20%20%20%20%20[new%20Date(‘2021-02-01’)%2C%20new%20Date(‘2021-05-01’)]%2C %20%20%20%20%20%20%20%20[new%20Date(‘2021-05-10’)%2C%20new%20Date(‘2021-07-01’)]%2C %20%20%20%20%20%20%20%20[new%20Date(‘2021-04-20’)%2C%20new%20Date(‘2021-11-31’)]%2C %20%20%20%20%20%20%20%20[new%20Date(‘2021-08-01’)%2C%20new%20Date(‘2021-09-01’)]%2C %20%20%20%20%20%20%20%20[new%20Date(‘2021-02-10’)%2C%20new%20Date(‘2021-07-01’)]%2C %20%20%20%20%20%20%20%20[new%20Date(‘2021-07-20’)%2C%20new%20Date(‘2021-11-31’)]%2C %20%20%20%20%20%20]%2C %20%20%20%20%20%20backgroundColor%3A%20[‘rgb(255%2C%2099%2C%20132%2C%201.0)’%2C%20’rgba(255%2C%2099%2C%20132%2C%201.0)‘%2C%20’rgba(255%2C%20206%2C%2086%2C%201.0)’%2C%20’rgba(255%2C%20206%2C%2086%2C%201.0)‘%2C%20’rgba(255%2C%20206%2C%2086%2C%200.2)’%2C%20undefined]%2C %20%20%20%20}%2C%20]%2C %20%20}%2C %20%20options%3A%20{ %20%20%20%20legend%3A%20{ %20%20%20%20%20%20display%3A%20false %20%20%20%20}%2C %20%20%20%20annotation%3A%20{ %20%20%20%20%20%20annotations%3A%20[{ %20%20%20%20%20%20%20%20type%3A%20’line’%2C %20%20%20%20%20%20%20%20mode%3A%20’vertical’%2C %20%20%20%20%20%20%20%20scaleID%3A%20’x-axis-0’%2C %20%20%20%20%20%20%20%20value%3A%20new%20Date(‘2021-10-30’)%2C %20%20%20%20%20%20%20%20borderColor%3A%20’red’%2C %20%20%20%20%20%20%20%20borderWidth%3A%201%2C %20%20%20%20%20%20%20%20label%3A%20{ %20%20%20%20%20%20%20%20%20%20enabled%3A%20true%2C %20%20%20%20%20%20%20%20%20%20content%3A%20’Deadline’%2C %20%20%20%20%20%20%20%20%20%20position%3A%20’top’ %20%20%20%20%20%20%20%20} %20%20%20%20%20%20}] %20%20%20%20}%2C %20%20%20%20scales%3A%20{ %20%20%20%20%20%20xAxes%3A%20[{ %20%20%20%20%20%20%20%20position%3A%20’top’%2C %20%20%20%20%20%20%20%20type%3A%20’time’%2C %20%20%20%20%20%20%20%20time%3A%20{ %20%20%20%20%20%20%20%20%20%20unit%3A%20’month’ %20%20%20%20%20%20%20%20}%2C %20%20%20%20%20%20%20%20ticks%3A%20{ %20%20%20%20%20%20%20%20%20%20min%3A%20new%20Date(‘2021-01-01’)%2C %20%20%20%20%20%20%20%20%20%20max%3A%20new%20Date(‘2022-01-01’)%2C %20%20%20%20%20%20%20%20} %20%20%20%20%20%20}]%2C %20%20%20%20}%2C %20%20}%2C }

I expect I need to create a JSON Object with all the values. That’s OK, but how do I go from the JSON object to the short URL that points to an image I can display in Glide?

Thanks for any tips,

Simon.

The url is not going to be short. With quickchart your formulate the entire url, including the JSON structure, and that url is the image. Your link above is a shortcut to the sandbox, but when you build the url, it would be something like this.

https://quickchart.io/chart?c={
  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],
    }, ],
  },
  options: {
    legend: {
      display: false
    },
    annotation: {
      annotations: [{
        type: 'line',
        mode: 'vertical',
        scaleID: 'x-axis-0',
        value: new Date('2021-10-30'),
        borderColor: 'red',
        borderWidth: 1,
        label: {
          enabled: true,
          content: 'Deadline',
          position: 'top'
        }
      }]
    },
    scales: {
      xAxes: [{
        position: 'top',
        type: 'time',
        time: {
          unit: 'month'
        },
        ticks: {
          min: new Date('2021-01-01'),
          max: new Date('2022-01-01'),
        }
      }],
    },
  },
}

2 Likes

Thanks Jeff…

Is there any chance you can screen record the columns needed to:

  1. Build the JSON Object with some dummy data
  2. Use template column to stitch the JSON Object together with the start QuickChart URL fragments?

I’m not sure how to go from the JSON object to being able to stitch it together. Do I need to use a JSON Template to convert it into a text like column first?

Personally I’ve just used template columns, which would be easier in this case. Take the url above, replace any dynamic data with template replacement values, such a {{labels}}, {{dates}}, {{colors}}, etc. Then you can usually feed other templates, joined lists, etc into that template column.

I’m sure you could probably do the same with the JSON columns, but I feel there are too many intricacies in the JSON data structure, meaning it’s probably just as easy to use a template column. I haven’t done anything real extravagant, but this is a simple chart that I have in one of my apps. In my case I feed the template with a few joined list columns. Mine is simple, but your joined lists might require joining values from another template column to get the formatting right, especially for the gantt dates.

1 Like

Thanks that helps. I was tripping over the need to work with a JSON Object. I will take your advice and workaround…

Thanks so much!

1 Like

Yay - it works well. Thank you!

2 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.