Drawing a shape, inserting data

Question

Working on a project and have been provided this as part of the design. As you can see it's a fairly straight forward shape, however the requirement is that the data you see (the numbers) should display their corresponding value, this value will drive what colour the slice in the chart is.

I've tried a number of different things and I'm sure there HAS to be something easier than what I'm doing.

Manually drawing the image using CanvasJS
Recreating the image using CSS and rotating each element
Using ChartJS/Google Charts and attempting to customise

Both methods have been frustrating and time consuming. Aside from doing it in Flash, are there any suggestions or things I've completely missed that I could try?

Looks to me like a job for SVG and maybe the *Different Background for each Segment* section in this answer would give you some ideas - http://stackoverflow.com/questions/27943053/how-to-create-a-circle-with-links-on-border-side/34902989#34902989 — Harry, Feb 01 '17 at 13:41

score 1 · Answer 1 · answered Feb 02 '17 at 04:59

By positioning one doughnut chart on top of another doughnut chart, you can achieve this.

var chart1 = new CanvasJS.Chart("chartContainer1",
{ 
 legend: {
  verticalAlign: "center",
  horizontalAlign: "left"
 },
 data: [
 {
  type: "doughnut",
  showInLegend: true,
  indexLabel: "{y}",
  indexLabelPlacement: "inside",
  dataPoints: [
   { y: 71 },
   { y: 55 },
   { y: 50 },
   { y: 65 },
   { y: 95 },
   { y: 68 },
   { y: 28 },
   { y: 34 },
   { y: 14 }
  ]
 },
  
 ]
});
var chart2 = new CanvasJS.Chart("chartContainer2",
{        
 backgroundColor: "transparent",
 title: {
  text: "Your Score is 10",
  verticalAlign: "center",
  horizontalAlign: "center",
  dockInsidePlotArea: true,
  maxWidth: 60
 },
 data: [
 {
  type: "doughnut",
  indexLabel: "{y}",
  indexLabelPlacement: "inside",
  dataPoints: [
   { y: 71 },
   { y: 55 },
   { y: 50 },
   { y: 65 },
   { y: 95 },
   { y: 68 },
   { y: 28 },
   { y: 34 },
   { y: 14 }
  ]
 }
  ]
});

chart1.render();
chart2.render();

#parent {
  position: relative;
}

#chartContainer1, #chartContainer2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}
#chartContainer1 {
  width:800px;
  height:250px;
}
#chartContainer2 {
  transform: translate(-28%, 24%);
  width:200px; 
  height:170px;
}

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="parent">
  <div id="chartContainer1"></div>
  <div id="chartContainer2"></div>
</div>

I previously attempted something like the above but found I was spending too much effort customising an existing library and wasn't able to get it close enough to my requirement. Thanks though. — hylian, Feb 05 '17 at 12:55

score 0 · Accepted Answer · answered Feb 05 '17 at 12:58

0

If anyone else comes across this question, I ended up finding and using Method Draw which isn't at all a perfect solution and I lost my work a number of times. The ability to draw and generate SVG on the fly was very useful, though.

answered Feb 05 '17 at 12:58

hylian

550
1
4
19

Drawing a shape, inserting data

2 Answers2