CODEWITHSUNDEEP
javascripthtmlcss
Varun
Varun

Reputation: 3735

Html, CSS - How to create a donut chart like this?

I want a Donut chart like this.

How to create it? I am not sure what's the correct process for this.

Thank you very much. I want a Donut chart like this

Upvotes: 0

Views: 15968

Answers (3)

Varun
Varun

Reputation: 3735

The above Donut chart can be done using Html 5 canvas.

Sample: https://jsfiddle.net/wm6szms3/

Html code:

<canvas id="canvas" width=325 height=325></canvas>

JavaScript code:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var colors=['skyblue','gray','orange'];
var values=[47,6,47];
var labels=['Voluntary','Robot','Mandatory'];

dmbChart(150,150,125,25,values,colors,labels,0);

function dmbChart(cx,cy,radius,arcwidth,values,colors,labels,selectedValue){
    var tot=0;
    var accum=0;
    var PI=Math.PI;
    var PI2=PI*2;
    var offset=-PI/2;
    ctx.lineWidth=arcwidth;
    for(var i=0;i<values.length;i++){tot+=values[i];}
    for(var i=0;i<values.length;i++){
        ctx.beginPath();
        ctx.arc(cx,cy,radius,
            offset+PI2*(accum/tot),
            offset+PI2*((accum+values[i])/tot)
        );
        ctx.strokeStyle=colors[i];
        ctx.stroke();
        accum+=values[i];
    }
    var innerRadius=radius-arcwidth-3;
    ctx.beginPath();
    ctx.arc(cx,cy,innerRadius,0,PI2);
    ctx.fillStyle=colors[selectedValue];
    ctx.fill();
    ctx.textAlign='center';
    ctx.textBaseline='bottom';
    ctx.fillStyle='white';
    ctx.font=(innerRadius)+'px verdana';
    ctx.fillText(values[selectedValue],cx,cy+innerRadius*.9);
    ctx.font=(innerRadius/4)+'px verdana';
    ctx.fillText(labels[selectedValue],cx,cy-innerRadius*.25);
}

Upvotes: 5

Ram Segev
Ram Segev

Reputation: 2571

Here is some code example from google charts using Javascript,

if you want more sophisticated chart you can use this

More charts with jsfiddle examples you can fine here

      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Effort', 'Amount given'],
          ['My all',     100],
        ]);

        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };

        var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
        chart.draw(data, options);
      }
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="donut_single" style="width: 900px; height: 500px;"></div>

Upvotes: 0

Krish
Krish

Reputation: 477

refer this link http://www.highcharts.com/demo/gauge-activity this has tons of free charts, and with little animation your site will look dynamic. And they provide a nice feature to edit it in jsfiddle and test it out before even your incorporate.

enter image description here

3D Donut Chart http://www.highcharts.com/demo/3d-pie-donut

enter image description here

Upvotes: 0

Related Questions