😍 Quickchart.io: the Cloudinary of Charts —on the fly charts!

Resources & Templates
#102

Their support is truly amazing.

1 Like
#103

Wow. Just wow. Thank you ^6

#104

Anyone figure out how to put an image inside of a radial chart? I want to achieve this:

816×411 105 KB

4 Likes
#105

No, but I have a potential use case for this, so if you figure it out I’d love to know :grin:

#106

I’m getting close!

Just that it’s tiling and not centering/filling:

https://quickchart.io/chart?bkg=white&c={ type: ‘radialGauge’, data: { datasets: [{ data: [50], backgroundColor: ‘rgb(0,13,30)’ }] }, options: { trackColor: ‘rgb(207,207,207)’, centerPercentage: 70, centerArea: { fontSize: 25, backgroundColor: getImageFill(‘https://pyxis.nymag.com/v1/imgs/1be/59b/387489f1b8413ff360c3eead07c710621c-polar-bears.rsquare.w100.jpg’), }, },}

image
image1000×600 49.9 KB

4 Likes
Quickchart plugin
#107

I GOT IT!

image
image1000×600 45.9 KB

9 Likes
Progress bar!
#108

:boom:

#109

I was trying, but I guess I didn’t realize how the ‘options’ part worked. Nice work!

1 Like
#110

I’m really close! Just issues with scaling:

4 Likes
#111

Bring Cloudinary in to help with the scaling perhaps?

#112

I’d looove to

#113

Wouldn’t this be 100%?

#114

Nope. That parameter determines how much center there is ( which impacts how thick the radial progress bar appears).

#115

Yep. That’s what I’m going to have to do. I’ll need to add a c_pad parameter to give it padding and then it should work.

1 Like
#116

Got it

#117

OMG it’s BEAUTIFUL:

14 Likes
#118

Man, you are a genius!

1 Like
#119

That’s really nice. I wonder if you could put a radial gauge inside another radial gauge to get an Apple Fitness Rings effect?

Also, could you share the URL construct?

4 Likes
#120

:clap: :heart_eyes:

#121

Tutorial:

Quickcharts Raw Code 
  type: 'radialGauge',
  data: { datasets: [{ data: [_P_], borderWidth:0,backgroundColor: '#COLOR' }] },
  options: { 
trackColor: '#eee',
    roundedCorners:true,
    centerPercentage: 85,
    centerArea: {
      fontSize: 1,
    },
    plugins: {
      backgroundImageUrl: '_$_', 
    }
  },
}
Quickcharts % Encoded

https://quickchart.io/chart?bkg=transparent&c=%7B%0A%20%20type%3A%20%27radialGauge%27%2C%0A%20%20data%3A%20%7B%20datasets%3A%20%5B%7B%20data%3A%20%5B_P_%5D%2C%20borderWidth%3A0%2CbackgroundColor%3A%20%27%23COLOR%27%20%7D%5D%20%7D%2C%0A%20%20options%3A%20%7B%0A%20%20%20%20trackColor%3A%20%27%23eee%27%2C%0A%20%20%20%20roundedCorners%3Atrue%2C%0A%20%20%20%20centerPercentage%3A%2085%2C%0A%20%20%20%20centerArea%3A%20%7B%0A%20%20%20%20%20%20fontSize%3A%201%2C%0A%20%20%20%20%7D%2C%0A%20%20%20%20plugins%3A%20%7B%0A%20%20%20%20%20%20backgroundImageUrl%3A%20%27_$_%27%2C%20%0A%20%20%20%20%7D%0A%20%20%7D%2C%0A%7D

Cloudinary Template 
https://res.cloudinary.com/glide/image/fetch/c_pad,w_500,h_300/@
18 Likes