This time I will share jQuery Plugin and tutorial about Horizontal Bar Chart Plugin – jQuery Devstratum JQP Graph, hope it will help you in programming stack.
| File Size: | 14.5 KB |
|---|---|
| Views Total: | 1524 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Devstratum JQP Graph is a tiny jQuery plugin for plotting your numeric values in horizontal bar charts with titles, descriptions, labels, legends, x-axis/y-axis grids support.
How to use it:
1. To use the plugin, include the following JavaScript and CSS files on the HTML page.
1 |
<link href="/path/to/jquery.dvstr_jqp_graph.min.css" rel="stylesheet" /> |
2 |
<script src="/path/to/cdn/jquery.min.js"></script> |
3 |
<script src="/path/to/jquery.dvstr_jqp_graph.min.js"></script> |
2. Create an element to hold the horizontal bar chart.
1 |
<div class="graph__block" id="example"></div> |
3. Define the data to be visualized in the bar chart.
01 |
var myData = [ |
02 |
{ |
03 |
label: 'Phenom II X6 1055T', |
04 |
value: [ |
05 |
336 |
06 |
] |
07 |
}, |
08 |
{ |
09 |
label: 'Xeon E5450', |
10 |
value: [ |
11 |
470 |
12 |
] |
13 |
}, |
14 |
{ |
15 |
label: 'Core i5-3470', |
16 |
value: [ |
17 |
337 |
18 |
] |
19 |
} |
20 |
] |
4. It also allows you to visualize large chunks of data in a stacked bar chart.
01 |
var myData = [ |
02 |
{ |
03 |
label: 'Phenom II X6 1055T', |
04 |
color: [ |
05 |
'blue', |
06 |
'green', |
07 |
'orange' |
08 |
], |
09 |
value: [ |
10 |
3069, |
11 |
5999, |
12 |
8252, |
13 |
] |
14 |
}, |
15 |
{ |
16 |
label: 'Xeon E5450', |
17 |
color: [ |
18 |
'blue', |
19 |
'green', |
20 |
'orange' |
21 |
], |
22 |
value: [ |
23 |
2863, |
24 |
5120, |
25 |
7927, |
26 |
] |
27 |
}, |
28 |
{ |
29 |
label: 'Core i5-3470', |
30 |
color: [ |
31 |
'blue', |
32 |
'green', |
33 |
'orange' |
34 |
], |
35 |
value: [ |
36 |
4047, |
37 |
6489, |
38 |
9143, |
39 |
] |
40 |
} |
41 |
] |
5. Plot the data into the bar chart and done.
1 |
$('#example').dvstr_graph({ |
2 |
title: 'Chart Title', |
3 |
unit: 'Seconds', // sub title |
4 |
better: 'Lower is better', // description |
5 |
graphs: myData |
6 |
}); |
6. Full plugin options to customize the bar chart.
01 |
$('#example').dvstr_graph({ |
02 |
title: '', |
03 |
description: '', |
04 |
unit: '', |
05 |
better: '', |
06 |
type: 'number', // or 'time' |
07 |
separate: false, |
08 |
grid_wmax: 0, |
09 |
grid_part: 5, |
10 |
points: [], |
11 |
graphs: [] |
12 |
}); |
Changelog:
2020-09-22
- v1.1
This awesome jQuery plugin is developed by devstratum. For more Advanced Usages, please check the demo page or visit the official website.
