# Quickchart Data Replacement (Template)

**URL:** <https://community.glideapps.com/t/quickchart-data-replacement-template/58227>\
**Category:** Ask for Help\
**Created:** [February 21, 2023, 7:42am UTC](https://community.glideapps.com/t/quickchart-data-replacement-template/58227 "2023-02-21T07:42:06Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![biha](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/biha/32/84110_2.png) [@biha](https://community.glideapps.com/u/biha)\
**Post date:** [February 21, 2023, 7:42am UTC](https://community.glideapps.com/t/quickchart-data-replacement-template/58227/1 "2023-02-21T07:42:06Z")

</div>

Hi i have created the chart from Quickchart and have this link but which word should i replace to my own DATA?

> **Summary**
>
> ([https://quickchart.io/chart?c={ %20%20type%3A%20'radialGauge'%2C %20%20data%3A%20{ %20%20%20%20datasets%3A%20[%20%20%20%20%20%20{ %20%20%20%20%20%20%20%20data%3A%20[80]%2C %20%20%20%20%20%20%20%20backgroundColor%3A%20getGradientFillHelper('horizontal'%2C%20['%233bc37b'%2C%20'%23c0ebd4'])%2C %20%20%20%20%20%20%20%20 %20%20%20%20%20%20}%2C %20%20%20%20]%2C %20%20}%2C %20%20options%3A%20{ %20%20%20%20%2F%2F%20See%20https%3A%2F%2Fgithub.com%2Fpandameister%2Fchartjs-chart-radial-gauge%23options %20%20%20%20domain%3A%20[0%2C%20100]%2C %20%20%20%20trackColor%3A%20'%23f0f8ff'%2C %20%20%20%20centerPercentage%3A%2080%2C %20%20%20%20centerArea%3A%20{ %20%20%20%20%20%20text%3A%20(val)%20%3D\>%20val%20%2B%20'%25'%2C %20%20%20%20%20%20fontFamily%3A%20'Calibri' %20%20%20%20}%2C %20%20%20%20 %20%20%20%20 %20%20%20%20 %20%20 %20%20 %20%20}%2C }](https://quickchart.io/chart?c=%7B%0A%20%20type%3A%20%27radialGauge%27%2C%0A%20%20data%3A%20%7B%0A%20%20%20%20datasets%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20data%3A%20%5B80%5D%2C%0A%20%20%20%20%20%20%20%20backgroundColor%3A%20getGradientFillHelper(%27horizontal%27%2C%20%5B%27%233bc37b%27%2C%20%27%23c0ebd4%27%5D)%2C%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%5D%2C%0A%20%20%7D%2C%0A%20%20options%3A%20%7B%0A%20%20%20%20%2F%2F%20See%20https%3A%2F%2Fgithub.com%2Fpandameister%2Fchartjs-chart-radial-gauge%23options%0A%20%20%20%20domain%3A%20%5B0%2C%20100%5D%2C%0A%20%20%20%20trackColor%3A%20%27%23f0f8ff%27%2C%0A%20%20%20%20centerPercentage%3A%2080%2C%0A%20%20%20%20centerArea%3A%20%7B%0A%20%20%20%20%20%20text%3A%20(val)%20%3D%3E%20val%20%2B%20%27%25%27%2C%0A%20%20%20%20%20%20fontFamily%3A%20%27Calibri%27%0A%20%20%20%20%7D%2C%0A%20%20%20%20%0A%20%20%20%20%0A%20%20%20%20%0A%20%20%0A%20%20%0A%20%20%7D%2C%0A%0A%0A%7D))

---

<div class="post-metadata">

**Author:** ![biha](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/biha/32/84110_2.png) [@biha](https://community.glideapps.com/u/biha)\
**Post date:** [February 21, 2023, 7:59am UTC](https://community.glideapps.com/t/quickchart-data-replacement-template/58227/2 "2023-02-21T07:59:29Z")

</div>

Ok guys! i am sorry ! i found already !

So, i replaced using template Column the {-#-} part

> **Summary**
>
> [https://quickchart.io/chart?c={ %20%20type%3A%20'radialGauge'%2C %20%20data%3A%20{ %20%20%20%20datasets%3A%20[%20%20%20%20%20%20{ %20%20%20%20%20%20%20%20data%3A%20[{\_#\_}]%2C %20%20%20%20%20%20%20%20backgroundColor%3A%20getGradientFillHelper('horizontal'%2C%20['%233bc37b'%2C%20'%23c0ebd4'])%2C %20%20%20%20%20%20%20%20 %20%20%20%20%20%20}%2C %20%20%20%20]%2C %20%20}%2C %20%20options%3A%20{ %20%20%20%20%2F%2F%20See%20https%3A%2F%2Fgithub.com%2Fpandameister%2Fchartjs-chart-radial-gauge%23options %20%20%20%20domain%3A%20[0%2C%20100]%2C %20%20%20%20trackColor%3A%20'%23f0f8ff'%2C %20%20%20%20centerPercentage%3A%2080%2C %20%20%20%20centerArea%3A%20{ %20%20%20%20%20%20text%3A%20(val)%20%3D\>%20val%20%2B%20'%25'%2C %20%20%20%20%20%20fontFamily%3A%20'Calibri' %20%20%20%20}%2C %20%20%20%20 %20%20%20%20 %20%20%20%20 %20%20 %20%20 %20%20}%2C }](https://quickchart.io/chart?c=%7B%0A%20%20type%3A%20%27radialGauge%27%2C%0A%20%20data%3A%20%7B%0A%20%20%20%20datasets%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20data%3A%20%5B%7B_#_%7D%5D%2C%0A%20%20%20%20%20%20%20%20backgroundColor%3A%20getGradientFillHelper(%27horizontal%27%2C%20%5B%27%233bc37b%27%2C%20%27%23c0ebd4%27%5D)%2C%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%5D%2C%0A%20%20%7D%2C%0A%20%20options%3A%20%7B%0A%20%20%20%20%2F%2F%20See%20https%3A%2F%2Fgithub.com%2Fpandameister%2Fchartjs-chart-radial-gauge%23options%0A%20%20%20%20domain%3A%20%5B0%2C%20100%5D%2C%0A%20%20%20%20trackColor%3A%20%27%23f0f8ff%27%2C%0A%20%20%20%20centerPercentage%3A%2080%2C%0A%20%20%20%20centerArea%3A%20%7B%0A%20%20%20%20%20%20text%3A%20(val)%20%3D%3E%20val%20%2B%20%27%25%27%2C%0A%20%20%20%20%20%20fontFamily%3A%20%27Calibri%27%0A%20%20%20%20%7D%2C%0A%20%20%20%20%0A%20%20%20%20%0A%20%20%20%20%0A%20%20%0A%20%20%0A%20%20%7D%2C%0A%0A%0A%7D)

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [February 21, 2023, 8:00am UTC](https://community.glideapps.com/t/quickchart-data-replacement-template/58227/3 "2023-02-21T08:00:51Z")

</div>

The easiest way to work with quickcharts is in the sandbox editor.

If you [open your chart in the sandbox](https://quickchart.io/sandbox#%7B%22chart%22%3A%22%7B%5Cn%20%20type%3A%20'doughnut'%2C%5Cn%20%20data%3A%20%7B%5Cn%20%20%20%20datasets%3A%20%5B%5Cn%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20data%3A%20%5B24%2C%2025%2C%2026%5D%2C%5Cn%20%20%20%20%20%20%20%20backgroundColor%3A%20%5B'green'%2C%20'yellow'%2C%20'red'%5D%2C%5Cn%20%20%20%20%20%20%20%20label%3A%20'Dataset%201'%2C%5Cn%20%20%20%20%20%20%20%20borderWidth%3A%2010%2C%5Cn%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%5D%2C%5Cn%20%20%20%20labels%3A%20%5B'A'%2C%20'B'%2C%20'C'%5D%2C%5Cn%20%20%7D%2C%5Cn%20%20options%3A%20%7B%5Cn%20%20%20%20circumference%3A%20Math.PI%2C%5Cn%20%20%20%20rotation%3A%20Math.PI%2C%5Cn%20%20%20%20cutoutPercentage%3A%2075%2C%5Cn%20%20%20%20layout%3A%20%7B%5Cn%20%20%20%20%20%20padding%3A%2040%2C%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20legend%3A%20%7B%5Cn%20%20%20%20%20%20display%3A%20false%2C%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20plugins%3A%20%7B%5Cn%20%20%20%20%20%20datalabels%3A%20%7B%5Cn%20%20%20%20%20%20%20%20color%3A%20'%23000'%2C%5Cn%20%20%20%20%20%20%20%20anchor%3A%20'end'%2C%5Cn%20%20%20%20%20%20%20%20align%3A%20'end'%2C%5Cn%20%20%20%20%20%20%20%20formatter%3A%20(val)%20%3D%3E%20val%20%2B%20'%25'%2C%5Cn%20%20%20%20%20%20%20%20font%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20size%3A%2025%2C%5Cn%20%20%20%20%20%20%20%20%20%20weight%3A%20'bold'%2C%5Cn%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20doughnutlabel%3A%20%7B%5Cn%20%20%20%20%20%20%20%20labels%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20text%3A%20'%5C%5CnYou%20are%20at'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20font%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20size%3A%2020%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20text%3A%20'%5C%5Cn24%25'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20'%23000'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20font%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20size%3A%2040%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20weight%3A%20'bold'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%5D%2C%5Cn%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%7D%2C%5Cn%20%20%7D%2C%5Cn%7D%22%2C%22width%22%3A500%2C%22height%22%3A300%2C%22version%22%3A%222%22%2C%22backgroundColor%22%3A%22%23fff%22%7D), you’ll see something like this:

 ![CleanShot 2023-02-21 at 15.51.39@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/7/f7f40b4ef735a436c942ff9a77c14400ff8b22ec.jpeg)

Presumably, the bit you want to customise is the data value. So to do that, paste the following into a template column:

```auto
{
  type: 'radialGauge',
  data: {
    datasets: [
      {
        data: [{data}],
        backgroundColor: getGradientFillHelper('horizontal', ['#3bc37b', '#c0ebd4']),
        
      },
    ],
  },
  options: {
    // See https://github.com/pandameister/chartjs-chart-radial-gauge#options
    domain: [0, 100],
    trackColor: '#f0f8ff',
    centerPercentage: 80,
    centerArea: {
      text: (val) => val + '%',
      fontFamily: 'Calibri'
    },
  },
}

```

…and replace `{data}` with your own value.

Then create a Construct URL column as follows:

 ![CleanShot 2023-02-21 at 15.59.12@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/f/1f872cb8f0a64f9da886cef43dcc5977b3dcb33a.png)

(where tpChart is your template column)

And then use the Construct URL column in an Image Component:

 ![CleanShot 2023-02-21 at 15.59.28@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/c/1ceac1881905e98aaba17325630fd0793a5bbbdb.png)

---

<div class="post-metadata">

**Author:** ![biha](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/biha/32/84110_2.png) [@biha](https://community.glideapps.com/u/biha)\
**Post date:** [February 21, 2023, 8:05am UTC](https://community.glideapps.com/t/quickchart-data-replacement-template/58227/4 "2023-02-21T08:05:38Z")

</div>

Its work!! thanks Darren!

---

<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:** [February 22, 2023, 8:06am UTC](https://community.glideapps.com/t/quickchart-data-replacement-template/58227/5 "2023-02-22T08:06:25Z")

</div>

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