Donut Chart Customization

[k3441]

I’m trying to approximate two specific donut charts that I’m currently representing with static graphics. I’m trying to figure out if there is and obvious way to have the data display in the center of statistic. I’m also trying to work out if I can write conditions for the Chart color to change based on the number in steps (100-90, 90-80, 80-70) Any insight would be great.

[mark_sheldon]

PS I posted this from the wrong account

[charlie]

See the template I made. I think for your first one I would use the doughnut as a background. Your datasets would each have two values. If that’s out of 100, 72 would be the first value styled. Then the second value would be 28 to complete the pie, but set to transparent. Then style to your liking based on that.

You would follow the same design for the others. However I’m not sure how we are going to handle the circle at the end of the arc. Part of me thinks you are looking for a gauge chart for that. However I haven’t seen many examples similar to that. I’ll look more into that.

We don’t currently have controls for the cutout, but see the script for that ability. I will try to add those controls next week.

If the conditions become unmanageable I can get you a dynamic content filter. I believe a color ranges feature was asked before.

Hope this helps!

// Preprocess chart config
window.csGlobal.csHooks.filter("cs_charts_config", function(config) {
  // Change cutout value of doughnut
  config.options.cutout = "90%";
  
  // Return with our changes
  return config;
});

https://theme.co/app/uploads/sites/11/charts/div-with-chart-background.tco

[mark_sheldon]

Thanks. The circle cap is a element I can live without.

How do I apply that .tco file? Sorry if that’s a noob question.

[mark_sheldon]

So the number cant be pulled from the data set? Can the text from the header/subheader be floated to the center using JS? It would keep the text in the same module as the chart.

[charlie]

If you drag and drop that file into Cornerstone it’ll import that template. Then look for “Div with Chart Background” in your element list. So the template demonstrates placing some text over the Pie. I set the Pie’s wrapper as “absolute” so it appeared in the background. I’m not sure where the data is coming from, but to use dynamic content you’ll need to also pass in another value as (100 - value). Let me know if this helps!