Quickchart Data Replacement (Template)

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 })

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 }

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

If you open your chart in the sandbox, you’ll see something like this:

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

{
  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:

(where tpChart is your template column)

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

2 Likes

Its work!! thanks Darren!

1 Like

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