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

**URL:** <https://community.glideapps.com/t/how-to-construct-a-url-that-displays-a-gantt-chart-from-quickchart/71684>\
**Category:** Ask for Help\
**Created:** [March 14, 2024, 3:25pm UTC](https://community.glideapps.com/t/how-to-construct-a-url-that-displays-a-gantt-chart-from-quickchart/71684 "2024-03-14T15:25:34Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [March 14, 2024, 3:25pm UTC](https://community.glideapps.com/t/how-to-construct-a-url-that-displays-a-gantt-chart-from-quickchart/71684/1 "2024-03-14T15:25:34Z")

</div>

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 }](https://quickchart.io/sandbox#%7B%0A%20%20type%3A%20'horizontalBar'%2C%0A%20%20data%3A%20%7B%0A%20%20%20%20labels%3A%20%5B'Part%201'%2C%20'Part%202'%2C%20'Part%203'%2C%20'Part%204'%2C%20'Part%205'%2C%20'Part%206'%5D%2C%0A%20%20%20%20datasets%3A%20%5B%7B%0A%20%20%20%20%20%20data%3A%20%5B%0A%20%20%20%20%20%20%20%20%5Bnew%20Date('2021-02-01')%2C%20new%20Date('2021-05-01')%5D%2C%0A%20%20%20%20%20%20%20%20%5Bnew%20Date('2021-05-10')%2C%20new%20Date('2021-07-01')%5D%2C%0A%20%20%20%20%20%20%20%20%5Bnew%20Date('2021-04-20')%2C%20new%20Date('2021-11-31')%5D%2C%0A%20%20%20%20%20%20%20%20%5Bnew%20Date('2021-08-01')%2C%20new%20Date('2021-09-01')%5D%2C%0A%20%20%20%20%20%20%20%20%5Bnew%20Date('2021-02-10')%2C%20new%20Date('2021-07-01')%5D%2C%0A%20%20%20%20%20%20%20%20%5Bnew%20Date('2021-07-20')%2C%20new%20Date('2021-11-31')%5D%2C%0A%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20backgroundColor%3A%20%5B'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%5D%2C%0A%20%20%20%20%7D%2C%20%5D%2C%0A%20%20%7D%2C%0A%20%20options%3A%20%7B%0A%20%20%20%20legend%3A%20%7B%0A%20%20%20%20%20%20display%3A%20false%0A%20%20%20%20%7D%2C%0A%20%20%20%20annotation%3A%20%7B%0A%20%20%20%20%20%20annotations%3A%20%5B%7B%0A%20%20%20%20%20%20%20%20type%3A%20'line'%2C%0A%20%20%20%20%20%20%20%20mode%3A%20'vertical'%2C%0A%20%20%20%20%20%20%20%20scaleID%3A%20'x-axis-0'%2C%0A%20%20%20%20%20%20%20%20value%3A%20new%20Date('2021-10-30')%2C%0A%20%20%20%20%20%20%20%20borderColor%3A%20'red'%2C%0A%20%20%20%20%20%20%20%20borderWidth%3A%201%2C%0A%20%20%20%20%20%20%20%20label%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20enabled%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20content%3A%20'Deadline'%2C%0A%20%20%20%20%20%20%20%20%20%20position%3A%20'top'%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%5D%0A%20%20%20%20%7D%2C%0A%20%20%20%20scales%3A%20%7B%0A%20%20%20%20%20%20xAxes%3A%20%5B%7B%0A%20%20%20%20%20%20%20%20position%3A%20'top'%2C%0A%20%20%20%20%20%20%20%20type%3A%20'time'%2C%0A%20%20%20%20%20%20%20%20time%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20unit%3A%20'month'%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20ticks%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20min%3A%20new%20Date('2021-01-01')%2C%0A%20%20%20%20%20%20%20%20%20%20max%3A%20new%20Date('2022-01-01')%2C%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%5D%2C%0A%20%20%20%20%7D%2C%0A%20%20%7D%2C%0A%7D)

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.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [March 14, 2024, 3:35pm UTC](https://community.glideapps.com/t/how-to-construct-a-url-that-displays-a-gantt-chart-from-quickchart/71684/2 "2024-03-14T15:35:03Z")

</div>

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.

```auto
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'),
        }
      }],
    },
  },
}

```

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [March 14, 2024, 3:52pm UTC](https://community.glideapps.com/t/how-to-construct-a-url-that-displays-a-gantt-chart-from-quickchart/71684/3 "2024-03-14T15:52:18Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [March 14, 2024, 4:03pm UTC](https://community.glideapps.com/t/how-to-construct-a-url-that-displays-a-gantt-chart-from-quickchart/71684/4 "2024-03-14T16:03:20Z")

</div>

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.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/7/8745f1615d6ebb1a72287bf3c9e912bc44b294df.png)

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [March 14, 2024, 4:10pm UTC](https://community.glideapps.com/t/how-to-construct-a-url-that-displays-a-gantt-chart-from-quickchart/71684/5 "2024-03-14T16:10:11Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [March 14, 2024, 6:38pm UTC](https://community.glideapps.com/t/how-to-construct-a-url-that-displays-a-gantt-chart-from-quickchart/71684/6 "2024-03-14T18:38:42Z")

</div>

Yay - it works well. Thank you!

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/b/8b94f49dd7e44c3751cf5b23513e29e2cc20d0c6.jpeg)

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [March 21, 2024, 6:38pm UTC](https://community.glideapps.com/t/how-to-construct-a-url-that-displays-a-gantt-chart-from-quickchart/71684/7 "2024-03-21T18:38:43Z")

</div>

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