Comments (12)
GoogleCodeExporter
commented on September 25, 2024
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%[email protected] on 4 Jul 2009 at 5:40
- Added labels: Type-Enhancement
- Removed labels: Type-Defect
from flot.
GoogleCodeExporter
commented on September 25, 2024
[deleted comment]
from flot.
GoogleCodeExporter
commented on September 25, 2024
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 [email protected] on 21 Nov 2009 at 11:50
Attachments:
from flot.
GoogleCodeExporter
commented on September 25, 2024
[deleted comment]
from flot.
GoogleCodeExporter
commented on September 25, 2024
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 [email protected] on 21 Nov 2009 at 6:17
from flot.
GoogleCodeExporter
commented on September 25, 2024
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 [email protected] on 8 Jan 2010 at 1:38
from flot.
GoogleCodeExporter
commented on September 25, 2024
Has anyone completed the plugin for this or know where I can find one to modify?
Thanks!
Original comment by [email protected] on 3 May 2010 at 7:18
from flot.
GoogleCodeExporter
commented on September 25, 2024
bump :D
Original comment by [email protected] on 9 Aug 2010 at 6:53
from flot.
GoogleCodeExporter
commented on September 25, 2024
secondary bump
Original comment by [email protected] on 4 May 2011 at 10:51
from flot.
GoogleCodeExporter
commented on September 25, 2024
bump.
Original comment by [email protected] on 30 Nov 2011 at 9:02
from flot.
GoogleCodeExporter
commented on September 25, 2024
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 [email protected] on 2 May 2012 at 3:28
from flot.
GoogleCodeExporter
commented on September 25, 2024
Original comment by [email protected] on 7 May 2012 at 5:51
- Changed state: Accepted
from flot.
Related Issues (20)
- Non-time axis tick-generation broken when reusing plots HOT 1
- $.plot.formatDate() no longer accessible HOT 1
- flot inside a tab
- Not Plotting In Safari
- Standardize fill and fillColor across bar and pie charts
- "steps" without extra points HOT 1
- there is a error in the file jquery.flot.pie.js!
- threshold function and tooltips not working together HOT 1
- xaxis tick marks for time series isshe when over 24 hours. v0.8.
- In case of long number transferred to x axis, its overlaps. HOT 1
- Invalid Bar Alignment
- Check if a point is already highlighted
- Error Bars not playing nicely with time plugin (x-axis auto scales to origin 1970)
- Showing data pionts in stacked chart
- plot hover
- "offset" parameter for bar charts
- Duplicate plot rendering of Flot graph HOT 1
- Flot doesn't handle summertime (BST) correctly. HOT 1
- Can I change the tickColor for only one tick
- Legend label is not displayed if label is empty string
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flot.