This time I will share jQuery Plugin and tutorial about Create Horizontal Stacked Bar Charts In jQuery – horbar, hope it will help you in programming stack.
| File Size: | 10.7 KB |
|---|---|
| Views Total: | 5080 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
horbar is a lightweight jQuery plugin used to visualize your dynamic JavaScript data in a responsive, animated, horizontal, Stacked Bar Chart using pure JavaScript and CSS.
How to use it:
1. Link to the necessary JavaScript and CSS files as follows:
1 |
<link href="horbar.css" rel="stylesheet"> |
2 |
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script> |
3 |
<script src="horbar.js"></script> |
2. Create an empty container for your bar chart.
1 |
<div id="my-chart"></div> |
3. Initialize the plugin and define your own dataset presenting in the bar chart.
01 |
$('#my-chart').horbar({ |
02 |
namespace: 'horbar', |
03 |
labels: ["Python", "PHP", "C"], |
04 |
data: { |
05 |
segments: [{ |
06 |
'name': '#Fans', |
07 |
'color': '#FF0000' |
08 |
}, |
09 |
{ |
10 |
'name': '#Apps', |
11 |
'color': '#00FF00' |
12 |
}, |
13 |
{ |
14 |
'name': '#Packages', |
15 |
'color': '#0000FF' |
16 |
} |
17 |
], |
18 |
dataSets: [ |
19 |
// Some random sample data |
20 |
[r(), r(), r()], |
21 |
[r(), r(), r()], |
22 |
[r(), r(), r()], |
23 |
[r(), r(), r()], |
24 |
[r(), r(), r()], |
25 |
[r(), r(), r()], |
26 |
[r(), r(), r()] |
27 |
] |
28 |
} |
29 |
}); |
4. Config the bar chart in the ‘OPTION’ object during init.
01 |
$('#my-chart').horbar({ |
02 |
bars: { |
03 |
animate: true, |
04 |
animationSpeed: 'slow', |
05 |
height: '50px' |
06 |
}, |
07 |
legend: { |
08 |
position: "se", |
09 |
fontSize: '1em' |
10 |
}, |
11 |
segment: { |
12 |
drawCallBack: function(segment, config) { |
13 |
defaultSegmentCallBack(segment, config); |
14 |
} |
15 |
}, |
16 |
segmentEvents: { |
17 |
mouseenter: function(segment) { |
18 |
showPopover(segment); |
19 |
}, |
20 |
mouseleave: function(segment) { |
21 |
removePopover(segment); |
22 |
} |
23 |
}, |
24 |
segmentStyle: { |
25 |
borderAlpha: 0.9, |
26 |
backgroundAlpha: 0.6 |
27 |
}, |
28 |
yLabels: { |
29 |
drawCallBack: function(v) { |
30 |
return v; |
31 |
}, |
32 |
events: {} |
33 |
}, |
34 |
xLabels: { |
35 |
drawCallBack: function(v) { |
36 |
return v; |
37 |
}, |
38 |
events: {} |
39 |
}, |
40 |
xAxis: { |
41 |
width: '80%' |
42 |
}, |
43 |
yAxis: { |
44 |
width: '20%' |
45 |
}, |
46 |
tickLength: 10 |
47 |
}); |
Change log:
2017-05-08
- Set font-size as plain parameter for legends
This awesome jQuery plugin is developed by sonirico. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
