Gauge chart in Javascript or jQuery Flot

Question

I'm trying to get a graph that looks like a gauge.

I am already using jQuery Flot for my other charts, so is it possible using Flot or plain Javascript? Can someone help me getting started coding this?

Answer 1

Here it is only using base flot and a background image:

// consts
var minCord = {x: -60, y: -57};
var maxCord = {x: 60, y: -60};
var radius = 90;

$(function() { 
    
    // some calculations
    var startAngle = (6.2831 + Math.atan2(minCord.y, minCord.x));
    var endAngle = Math.atan2(maxCord.y, maxCord.x);
    var degreesSweep = (-endAngle) + startAngle;
        
    var positionOnArc = function(magnitude){
        var numDegrees = degreesSweep * (magnitude/100.0);
        var angle = (startAngle - numDegrees);
        var posX = radius * Math.cos(angle);
        var posY = radius * Math.sin(angle);
        return [posX, posY];
    }  
       
    var options = {
      xaxis: {
          min: -100,
          max: 100,
          show: false
      },
      yaxis: {
          min: -100,
          max: 100,
          show: false
      },
      grid: {
          show: false
      }
    };

    updatePlot = function(){        
        var data = [[0,0],positionOnArc(Math.random() * 100)];
        $('#placeholder').plot([data], options);
        setTimeout(updatePlot, 1000);
    }
    
    updatePlot();
});

#placeholder
{
    background-image:url('http://www.clker.com/cliparts/6/Z/q/9/9/D/gauge-md.png');
    width: 300px;
    height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.1/jquery.flot.min.js"></script>
<div id="placeholder"></div>

Fiddle here.