Plugin Description
What is jrGraph?
jrGraph is a simple jQuery graphing plugin that allows you to build bar graphs to aid in displaying data visually. The end result from your data will display a bar graph with alternating row colors. The graph can be sorted alphabetically or by value, ascending or descending. Each row has the option of having a tooltip description that will display when the user hovers over it. You can easily customize the look of this plugin by modifing the CSS file that accompanies it.
jrGraph Example
-
Alpha
44
Alpha: This is a description of this particular graph section. It can include text, images, or video.
-
Echo
98
Echo: This is a description of this particular graph section. It can include text, images, or video.
-
Lima
150
Lima: This is a description of this particular graph section. It can include text, images, or video.
-
Bravo
50
Bravo: This is a description of this particular graph section. It can include text, images, or video.
-
Juliet
123
Juliet: This is a description of this particular graph section. It can include text, images, or video.
-
Kilo
75
Kilo: This is a description of this particular graph section. It can include text, images, or video.
-
India
41
India: This is a description of this particular graph section. It can include text, images, or video.
-
Delta
90
Delta: This is a description of this particular graph section. It can include text, images, or video.
-
Charlie
5
Charlie: This is a description of this particular graph section. It can include text, images, or video.
-
Golf
130
Golf: This is a description of this particular graph section. It can include text, images, or video.
-
Hotel
8
Hotel: This is a description of this particular graph section. It can include text, images, or video.
-
Foxtrot
70
Foxtrot: This is a description of this particular graph section. It can include text, images, or video.
Usage
Include this code in the head of your document or in an external Javascript file:
$(document).ready(function(){
$('.jrGraph').jrGraph({
initAnimate : true
});
});
Add the class .jrGraph to an unordered list to trigger the plugin. The parameter, initAnimate will set the animation on load. The default is on/true. Define each data row using the following code within your unordered list:
<li>
<span class="label">Alpha</span>
<span class="value">44</span>
<span class="tip"><strong>Alpha:</strong> This is a description of this particular graph section. It can include text,
images, or video.</span>
</li>
The tooltip can hold text and/or images. As of now, only one instance of jrGraph can be used per page. Check back soon for updates.