TechiWarehouse.Com


Top 3 Products & Services

1.
2.
3.

Dated: Feb. 14, 2013

Related Categories

JavaScript Programming

JustGage is a useful JavaScript plugin for generating and animating simple and effective dashboard gauges. It is based on the for vector drawing, so it is completely independent and self-adjusting.

Considering that it is a clean SVG, it works in almost any browser: Chrome, Safari, Opera, Android, etc.

How do you use JustGage?

Turn on JustGage and Raphael scripts on the page

1 |

2 |

 <script src="/raphael.2.1.0.min.js" type="text/javascript"></script>

 <script src="/justgage1.0.min.js" type="text/javascript">><script>

Create a div with id, width and height parameters

1 | 

<div class="200x160px" id="gauge"></div>

Call "justGage({id, value})"

1 | 
2 | 
3 | 
4 | 
5 | 
6 | 
7 | 
8 | 
9 | 
<script>
var g = new JustGage({
id: "gauge",
value: 67,
min: 0,
max: 100,
title: "Visitors"
});
</script>

JustGageThis is the most simple setup. But if you want to do some extra work, look at the on the site to see all the things you can do with combining different parameters.

Auto Tuning

JustGage will automatically tune itself to the size of the elements it contains. It will also tune to the page zoom and the PPI. That means that you will get clean, sharp and beautiful gages on every type of display and in every resolution.

Intervals

If you want to measure an interval between 350 and 980 – no problem, JustGage supports that option. The value and colors are shown based on the percentage they take in the defined interval, with optionally shown min and max values. Also, if the value is outside the interval, don’t worry – JustGage covers that situation too.

JustGage Intervals

Gradients or Solid Colors

You have too much gages on your page, so everything looks to colorful with all those different values and colors? No problem, you can chose that colors are shown by sector. That means that the color will stay green for all values from 0% to 33%, yellow for all values that range from 33% to 66%, and red for all values that go over 66%. These are the basic colors, but you can adjust any color or sector you want.

JustGage color

Style Customization

If you don’t like the basic style, you can create your own – JustGage has a lot of parameters that control the looks of a gage including width, coloring, shading. The colors of the given values, the colors of the labels...

JustGage custom

Licensing and Compatibility

JustGage is released under the MIT license, which means that you can use it and modify it anyway you like it. In theory, it should work under any browser that supports SVG. In practice, it was tested on Chrome 20, Android 4.0, Firefox 12, Opera 12, Safari 5.1.2, and IE6, 7, 8, 9.

Downloading the Script

You can find this useful script on , and the author can be followed on if you want to ask him some questions or you wish just to say hello.

Now that you've gotten free know-how on this topic, try to grow your skills even faster with online video training. Then finally, put these skills to the test and make a name for yourself by offering these skills to others by becoming a freelancer. There are literally 2000+ new projects that are posted every single freakin' day, no lie!


Previous Article

Next Article