terminator terminator - 4 months ago 19
CSS Question

Add a outer circular strip to donut pie chart

I have been trying to built a donut pie chart that looks like this

main issue is the outer strip ..

how do i get this outer strip ..

Please point me in the right direction

enter image description here

I am trying to use flotchart but i am open to use any other suggestion if you can guide

this is what i have rid so far

<div id="report_score_summary" class="chart" style="height:303px;width:100%">
<script>
data_score_summary = [
{ label: "Description Score", data: 20, color: '#BA2B6B' },
{ label: "Image Score", data: 30, color: '#375EAB' },
{ label: "Header Score", data: 50, color: '#4BB748' },
{ label: "Content Score", data: 10, color: '#F6871E' },
{ label: "Title Score", data: 18, color: '#E1DC3A' },
{ label: "Free", data: 16, color: '#E6E5E3' }
];


$.plot(report_score_summary, data_score_summary, {
series: {
pie: {
innerRadius: 0.5,
show: true
}
}
});

setCode([
"$.plot('#report_score_summary', data_score_summary, {",
" series: {",
" pie: {",
" innerRadius: 0.5,",
" show: true",
" }",
" }",
"});"
]);
</script>
</div>


Here is jsfiddle

Answer

You could plot another donut, bigger with a larger inner hole and position it behind your plot, not more elegant but working without move to SVG (that I think could be a better choice)

HTML

 <div id="report_score_summary" class="chart" style="height:303px;width:100%;z-index:2;margin-top:75px;margin-left: 62px;">

</div>

 <div id="report_score_summary_outer" class="chart" style="height:453px;width:100%;position: absolute; top: 0; left: 0;z-index: 1;">

</div>

JS

 $.plot(report_score_summary_outer, data_score_summary, {
    series: {
        pie: { 
            innerRadius: 0.8,
      width: 0.1,
            show: true,
      label: {
                show: false
            }
        }
    },
  legend: {
        show: false
    }
});

I updated your jsfiddle

Comments