Javascript or jQuery Flot calibration chart

Question

I am trying to get a graph that looks like a manometer.

I already use jQuery Flot for my other charts, so can I use Flot or plain Javascript? Can someone help me start coding this?

Answer 1

Only base flot and background image are used here:

 // 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 .

Answer 2

This is similar to Visualize the level of energy efficiency , except that it is not possible to do this using the Flot database options.

As suggested in my answer to this question, you will need to create a plugin that overrides drawBackground, drawSeries and possibly draws.

Answer 3

You can try jqChart radial calibration. It has the necessary functionality: http://www.jqchart.com/jquery/gauges/RadialGauge/Scale

Disclaimer: I work for jqChart.