4 ms·

Simple SVG gauge built with Raphael

33 points by tristanoneil 15y ago

crjn 15y ago
Here is one example built for html5 but extremely configurable https://www.wireframes.org/ui/data/admin/wireframes_demo_4ee7aabd2573b/dashboard_charts_4ee7ab070f0af.png https://www.wireframes.org/ui/data/admin/wireframes_demo_4ee...
euroclydon 15y ago
Raphael is nice. So is the SVG namespace in D3. I work on a web-based instrumentation and visualization system that uses SVGs. Here's a paper on it, if your interested: http://www.svgopen.org/2011/papers/72-Integrated_Power_Analytics_Visualizations/index.html http://www.svgopen.org/2011/papers/72-Integrated_Power_Analy...
iambot 15y ago
Is it really necessary to have Raphael as a dependency for such a simple widget? Just seems like overkill to me. I recently did a similar widget for a project of mine, using canvas (I understand SVG has better compatibility than canvas) but either way would be nice if I wanted this widget that I wouldn't have to include Raphael as well.
- darklajid 15y ago
  It's totally possible to create a simple svg file in different ways. I'd think of this posts headline as 'Showing the power of svg by giving you a nice albeit simple graph element (in this case, generated with Raphael)'.
- ken 15y ago
  Raphael isn't just SVG; it's a vector library that can use SVG as a backend. It also works on IE back to IE6, using VML. So if your goal is "SVG" and/or you only need to support modern browsers, then use SVG, it's great. If your goal is "vector graphics" and you need to support every browser made in the past 10 years, use Raphael.
rorrr 15y ago
I can't believe this dumb and trivial thing was upvoted so much. HN, you're better than that.
wulczer 15y ago
Wow, looks just like the one we made for Ducksboard :) https://ducksboard.jira.com/wiki/download/thumbnails/262169/gauge2.png https://ducksboard.jira.com/wiki/download/thumbnails/262169/... Props for open-sourcing it!
baconner 15y ago
Nice minimalism, but friends don't let friends use gauges! http://mbostock.github.com/d3/ex/bullet.html http://mbostock.github.com/d3/ex/bullet.html

33 points by tristanoneil 15y ago

crjn 15y ago

Here is one example built for html5 but extremely configurable https://www.wireframes.org/ui/data/admin/wireframes_demo_4ee7aabd2573b/dashboard_charts_4ee7ab070f0af.png https://www.wireframes.org/ui/data/admin/wireframes_demo_4ee...

euroclydon 15y ago

Raphael is nice. So is the SVG namespace in D3. I work on a web-based instrumentation and visualization system that uses SVGs. Here's a paper on it, if your interested: http://www.svgopen.org/2011/papers/72-Integrated_Power_Analytics_Visualizations/index.html http://www.svgopen.org/2011/papers/72-Integrated_Power_Analy...

iambot 15y ago

Is it really necessary to have Raphael as a dependency for such a simple widget? Just seems like overkill to me. I recently did a similar widget for a project of mine, using canvas (I understand SVG has better compatibility than canvas) but either way would be nice if I wanted this widget that I wouldn't have to include Raphael as well.

darklajid 15y ago
It's totally possible to create a simple svg file in different ways. I'd think of this posts headline as 'Showing the power of svg by giving you a nice albeit simple graph element (in this case, generated with Raphael)'.
ken 15y ago
Raphael isn't just SVG; it's a vector library that can use SVG as a backend. It also works on IE back to IE6, using VML. So if your goal is "SVG" and/or you only need to support modern browsers, then use SVG, it's great. If your goal is "vector graphics" and you need to support every browser made in the past 10 years, use Raphael.

rorrr 15y ago

I can't believe this dumb and trivial thing was upvoted so much. HN, you're better than that.

wulczer 15y ago

Wow, looks just like the one we made for Ducksboard :) https://ducksboard.jira.com/wiki/download/thumbnails/262169/gauge2.png https://ducksboard.jira.com/wiki/download/thumbnails/262169/... Props for open-sourcing it!

baconner 15y ago

Nice minimalism, but friends don't let friends use gauges! http://mbostock.github.com/d3/ex/bullet.html http://mbostock.github.com/d3/ex/bullet.html