-4

What library should I use to create a chart like the one in the image? Sorry that I posted this here but I don't know where to post this. enter image description here

Nodos
  • 85
  • 1
  • 10
  • Why not navigate to the charts tag you added or the related tags, or [search on SO](http://stackoverflow.com/search?q=charts+library) – yezzz May 07 '17 at 13:32
  • Possible duplicate of [JavaScript Chart Library](http://stackoverflow.com/questions/119969/javascript-chart-library) – yezzz May 07 '17 at 13:33

3 Answers3

1

Checkout angular chart.js. I think "Doughnut Chart" is close to the above chart. http://jtblin.github.io/angular-chart.js/

Gyunesh Shefkedov
  • 181
  • 4
  • 18
1

For a simple chart (only the donut) you can use chartjs.

If you want to recreate exactly the image you posted (donut, text, %...), you should go with d3js, it's a little bit more tricky but you can do absolutely everything you want.

Romain
  • 44
  • 1
  • 5
1

I think that´s not necessary to include and learn a big lib.

i show you a little prototyp with canvas, build a function from this:

var arcPos = degree => Math.PI*2/360*degree, 
calcLength = percent => 300 * (percent / 100),
percent =75, 
color = '#00f', 
oldValue = 73, 
vz='',
canvas = document.getElementById('myCanvas'),
context = canvas.getContext('2d'),
radius = 70;
with (context){
    beginPath();
    arc(canvas.width / 2, canvas.height / 2, radius, 
        arcPos(120),arcPos(60), false);
    lineWidth = 15;
    strokeStyle = '#ddd';
    lineCap = "round"
    stroke();
    beginPath();
    arc(canvas.width / 2, canvas.height / 2, radius, arcPos(120),
        arcPos(calcLength(percent) + 120), false);
    strokeStyle = color;
    stroke();
    font = "normal bold 50px sans-serif";
    textAlign = 'center';
    fillText(percent, 100, 100);
    font = "normal bold 16px sans-serif";
    textAlign = 'center';
    vz=((percent - oldValue) > 0)?'+':'';
    fillText(oldValue + ' (' + vz + (percent - oldValue) + '%)', 100, 130);
    if ((percent - oldValue) > 0) {
        beginPath();
        lineWidth = 3;
        strokeStyle = '#f00';
        moveTo(100, 165);lineTo(100, 145);stroke();
        beginPath();moveTo(100, 145);lineTo(105, 150);stroke();
        moveTo(100, 145);lineTo(95, 150);stroke();
    }
    if ((percent - oldValue) < 0) {
        beginPath();
        lineWidth = 3;
        strokeStyle = '#f00';
        moveTo(100, 165);lineTo(100, 145);stroke();
        beginPath();moveTo(100, 165);lineTo(105, 160);context.stroke();
        moveTo(100, 165);lineTo(95, 160);stroke();
    }
}

a liddle fiddle

play with this set oldValue to 73...

Frank Wisniewski
  • 1,182
  • 8
  • 7