search

lazzhadji / flot

Automatically exported from code.google.com/p/flot
MIT License
0 stars 0 forks source link

Enhancement request: Gauge #24

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago 
xml/swl charts have a companion product called gauge:

http://www.maani.us/gauge/

It would great if you guys could do that.

Original issue reported on code.google.com by clifford...@gmail.com on 27 Jan 2008 at 3:49

GoogleCodeExporter commented 8 years ago 
Flot has been acquiring plugin abilities lately, so this is probably one step 
closer.
Not that I'm aware of anyone working on it. It's probably a fun little project, 
but
alas, Flot is full of those.

Original comment by olau%iol...@gtempaccount.com on 4 Jul 2009 at 5:40

GoogleCodeExporter commented 8 years ago 
[deleted comment]
GoogleCodeExporter commented 8 years ago 
I think we can use a background image  and then draw a  triangle arrow on the
background image. 
Such as

    var img =new Image();
    img.onload=function(){
       ctx.drawImage(img,0,0, canvas.height, canvas.width);
    }
    img.src=options.gauge.bgImage;
    ctx.fillStyle = calcArrowColor
    ctx.beginPath(); 
    ctx.moveTo(centerTopAr1  , centerLeftAr1);
    ctx.lineTo(centerTopAr2, centerLeftAr2);
    ctx.lineTo(calcArrowTop, calcArrowLeft);
    ctx.fill();

Also the gauge should support update. But I think mouseHover can be ignored.

:). As pie plugin is mature and merged into the repository, let's make some 
effort on
Gauge.

Attached is a background image for Gauge.

Do you support  drawing with background image instead of drawing it from 
scratch?

Original comment by gbainao...@gmail.com on 21 Nov 2009 at 11:50

Attachments:

GoogleCodeExporter commented 8 years ago 
[deleted comment]
GoogleCodeExporter commented 8 years ago 
One html page with gauge.gif, I can get one gauge.
I will look into Flot design and look how to develop Flot Gauge plugin.

<html>
<head>
<script type="text/javascript">
var img = new Image();
img.src='./gauge.gif';
function drawShape() {
  var data = 33;
  var minData = 0;
  var maxData = 100;
  var angleSpan = 1.5;
  var startAngle = 0.75;
  var centerLeft = 100;
  var centerTop = 100;
  var tickWidth = 5;
  var tickLong = 50;
  var tickfill='rgb(255,51,0)';
  var tickstroke = 'rgb(255,255,255)';
  var canvas = document.getElementById('tutorial');
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0, 200, 200);
  ctx.save();

  ctx.translate(centerLeft, centerTop);
  ctx.beginPath();
  ctx.fillStyle = tickfill;
  ctx.strokeStyle= tickstroke;
  ctx.rotate(Math.PI*(startAngle + data * angleSpan / (maxData - minData)));
  ctx.lineTo(0, tickWidth);
  ctx.lineTo(tickLong, 0);
  ctx.lineTo(0, -tickWidth);
  ctx.stroke();
  ctx.fill();
  ctx.restore();
  ctx.translate(centerLeft, centerTop);
  ctx.beginPath();
  ctx.fillStyle = 'rgb(255,255,0)';
  ctx.rotate(Math.PI*(startAngle + data * angleSpan / (maxData - minData)+ 0.5));
  ctx.lineTo(0, 2);
  ctx.lineTo(30, 0);
  ctx.lineTo(0, -2);
  ctx.stroke();
  ctx.fill();
  ctx.restore();
}
 </script>
<style type="text/css">
      body { margin: 20px; font-family: arial,verdana,helvetica; background: #fff;}
      h1 { font-size: 140%; font-weight:normal; color: #036; border-bottom: 1px solid
#ccc; }
      pre { float:left; display:block; background: rgb(238,238,238); border: 1px
dashed #666; padding: 15px 20px; margin: 0 0 10px 0; }
    </style>

</head>
<body onload="drawShape();">
    <h1>A canvas <code>moveto</code> example</h1>
    <div>
      <canvas id="tutorial" width="200" height="200"></canvas>
    </div>
</body>
</html>

Original comment by gbainao...@gmail.com on 21 Nov 2009 at 6:17

GoogleCodeExporter commented 8 years ago 
Hi!

Any news on the project with gauge?
I'm running a weathersite at www.nordicweather.net with realtime weatherdata and
should be interested in gauges. I'm sure there should be a lots of other 
wxsites what
should be interested too.

Original comment by roblom.h...@gmail.com on 8 Jan 2010 at 1:38

GoogleCodeExporter commented 8 years ago 
Has anyone completed the plugin for this or know where I can find one to modify?

Thanks!

Original comment by jsm...@pihms.com on 3 May 2010 at 7:18

GoogleCodeExporter commented 8 years ago 
bump :D

Original comment by ayu...@gmail.com on 9 Aug 2010 at 6:53

GoogleCodeExporter commented 8 years ago 
secondary bump

Original comment by Auston.B...@gmail.com on 4 May 2011 at 10:51

GoogleCodeExporter commented 8 years ago 
bump.

Original comment by josephev...@gmail.com on 30 Nov 2011 at 9:02

GoogleCodeExporter commented 8 years ago 
I'd also be quite happy if this could be implemented in flot. My workaround 
currently involves using a rather messy commercial solution that I'd love to 
get out of my project!

Original comment by peter.be...@gmail.com on 2 May 2012 at 3:28

GoogleCodeExporter commented 8 years ago

Original comment by dnsch...@gmail.com on 7 May 2012 at 5:51