Is this graph possible using chart.js?

Question

I don't know what this graph is called, but is it possible to do it using Chart.js?

you can ask these things in forum http://www.jscharts.com/forum/list.php?2 — shv22, May 31 '17 at 05:48

Frank Wisniewski · Accepted Answer · 2017-05-31T07:46:34.547

I think that´s not in the standard of chart.js

I have made an short snippet for an other circled chart. You can take this as basis for resolving your problem. The routines are from follwing link.

How to calculate the SVG Path for an arc (of a circle)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>svgPercent</title>
</head>
<body>
  <svg width="200" height="200" viewBox="0 0 200 200">
    <path id="arc1" fill="none" stroke="#ddd" stroke-width="20" stroke-linecap="round"/>
        <path id="arc2" fill="none" stroke="#00f" stroke-width="20" stroke-linecap="round"/>
    <text x="50%" y="40%"
        font-family="Arial"
        font-weight="bold"
        font-size="50"
        alignment-baseline="middle" text-anchor="middle">75</text> 
    <text x="50%" y="60%"
        font-family="Arial"
        font-weight="bold"
        font-size="16"
        alignment-baseline="middle" text-anchor="middle">73 (+2%)</text> 
    <line x1="100" y1="150" x2="100" y2="180" style="stroke:rgb(255,0,0);
              stroke-width:5" stroke-linecap="round"/>  
        <line x1="100" y1="150" x2="105" y2="155" style="stroke:rgb(255,0,0);
              stroke-width:5" stroke-linecap="round"/> 
       <line x1="100" y1="150" x2="95" y2="155" style="stroke:rgb(255,0,0);
              stroke-width:5" stroke-linecap="round"/> 
  </svg>
  <script>
  function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function describeArc(x, y, radius, startAngle, endAngle){

    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);

    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

    var d = [
        "M", start.x, start.y, 
        "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
    ].join(" ");

    return d;       
}
document.getElementById("arc1").setAttribute("d", describeArc(100, 100, 90, 210, 510));
document.getElementById("arc2").setAttribute("d", describeArc(100, 100, 90, 210, 360));
  </script>
</body>
</html>

Yes, I think for now it's not really possible using ChartJS. But thanks for your implementation. — JJ Adonis, Jun 02 '17 at 10:09

Is this graph possible using chart.js?

1 Answers1