Skip to content

Commit 78eeb2f

Browse files
haruncpiharuncpi
committed
released 1.0
1 parent 498e21c commit 78eeb2f

4 files changed

Lines changed: 385 additions & 0 deletions

File tree

‎hBarChart.js‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
/*
2+
* hBarChart
3+
* version: 1.0
4+
* Copyright (c) 2017 Md.Harun-Ur-Rashid
5+
* Git: https://github.com/haruncpi/hBarChart.github.io
6+
* licensed under the MIT
7+
* Website: www.learn24bd.com
8+
* Country: Bangladesh
9+
*/
10+
11+
(function($) {
12+
"use strict";
13+
$.fn.hBarChart = function(customConfig) {
14+
var config = $.extend({
15+
bgColor: 'green',
16+
textColor: '#fff',
17+
show: 'label',
18+
sorting: true,
19+
maxStyle: {
20+
bg: 'orange',
21+
text: 'white'
22+
}
23+
}, customConfig);
24+
var chartObj = $(this);
25+
var data = [];
26+
var max = null;
27+
var bgColor = config.bgColor;
28+
var lightenDarkenColor = function(col, amt) {
29+
var usePound = false;
30+
if (col[0] == "#") {
31+
col = col.slice(1);
32+
usePound = true;
33+
}
34+
var num = parseInt(col, 16);
35+
var r = (num >> 16) + amt;
36+
if (r > 255) r = 255;
37+
else if (r < 0) r = 0;
38+
var b = ((num >> 8) & 0x00FF) + amt;
39+
if (b > 255) b = 255;
40+
else if (b < 0) b = 0;
41+
var g = (num & 0x0000FF) + amt;
42+
if (g > 255) g = 255;
43+
else if (g < 0) g = 0;
44+
return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16);
45+
}
46+
//end sorting operation
47+
if (config.sorting) {
48+
var sort_li = function(a, b) {
49+
return ($(b).data('data')) > ($(a).data('data')) ? 1 : -1;
50+
}
51+
chartObj.find("li").sort(sort_li) // sort elements
52+
.appendTo(chartObj); // append again to the list
53+
}
54+
//end sorting operation
55+
//global style
56+
chartObj.find("li").css({
57+
listStyleType: 'none',
58+
padding: '5px',
59+
boxSizing: 'border-box',
60+
marginTop: '3px',
61+
width: '100%',
62+
background: config.bgColor,
63+
color: config.textColor,
64+
whiteSpace: 'nowrap',
65+
borderRadius: '4px',
66+
fontSize: '13px',
67+
fontFamily: 'Tahoma, Geneva, sans-serif'
68+
})
69+
//global style
70+
//find max
71+
chartObj.find("li").each(function() {
72+
var val = $(this).data('data');
73+
data.push(val);
74+
});
75+
max = Math.max.apply(Math, data);
76+
// find max
77+
chartObj.find("li").each(function() {
78+
var lbl = $(this).text();
79+
var val = $(this).data('data');
80+
var percentage = (100 / max) * val;
81+
bgColor = lightenDarkenColor(bgColor, 10);
82+
// bar animation
83+
$(this).css({
84+
width: 0,
85+
background: bgColor
86+
});
87+
$(this).animate({
88+
width: percentage + '%'
89+
}, 1000)
90+
// bar animation
91+
//show label
92+
switch (config.show) {
93+
case 'label':
94+
$(this).text(lbl);
95+
break;
96+
case 'data':
97+
$(this).text(val);
98+
break;
99+
case 'both':
100+
$(this).text(lbl).append(' (' + val + ')');
101+
break;
102+
default:
103+
break;
104+
}
105+
// end show label
106+
// max style
107+
if (val == max) {
108+
$(this).css({
109+
background: config.maxStyle.bg,
110+
color: config.maxStyle.text
111+
})
112+
}
113+
// max style
114+
});
115+
}
116+
//end plugin function
117+
}(jQuery));

‎index.html‎

Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta content="My Chart" name="description"/>
5+
<meta charset="utf-8"/>
6+
<meta content="width=device-width" name="viewport"/>
7+
<title>
8+
hBarChart.github.io
9+
</title>
10+
<script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
11+
<link data-require="bootstrap@3.3.6" data-semver="3.3.6" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
12+
<script data-require="bootstrap@3.3.6" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
13+
</script>
14+
<script src="hBarChart.js">
15+
</script>
16+
<script src="script.js">
17+
</script>
18+
</head>
19+
<body>
20+
<section>
21+
<div class="container">
22+
<div class="row">
23+
<div class="col-md-12">
24+
<div class="navbar">
25+
<div class="container-fluid">
26+
<a class="navbar-brand" href="#">
27+
hBarChart
28+
</a>
29+
<ul class="nav navbar-nav">
30+
<li class="active">
31+
<a target="_blank" href="https://github.com/haruncpi/hBarChart.github.io">
32+
Repository
33+
</a>
34+
</li>
35+
<li>
36+
<a target="_blank" href="http://learn24bd.com">
37+
Website
38+
</a>
39+
</li>
40+
</ul>
41+
</div>
42+
</div>
43+
</div>
44+
</div>
45+
</div>
46+
</section>
47+
48+
<section>
49+
<div class="container">
50+
<div class="row">
51+
<div class="col-md-12">
52+
53+
<p>
54+
Version: 1.0 <br>
55+
Add jQuery first and then add hBarChart.js</p>
56+
57+
58+
</div>
59+
</div>
60+
</div>
61+
</section>
62+
63+
<section>
64+
<div class="container">
65+
<div class="row">
66+
<div class="col-md-6">
67+
<div class="panel panel-default">
68+
<div class="panel-heading">
69+
<h3 class="panel-title">
70+
Default Settings
71+
</h3>
72+
</div>
73+
<div class="panel-body">
74+
<div>
75+
<ul class="chart">
76+
<li data-data="1330">
77+
ABC
78+
</li>
79+
<li data-data="1600">
80+
CDE
81+
</li>
82+
<li data-data="550">
83+
MMC
84+
</li>
85+
<li data-data="420">
86+
IJK
87+
</li>
88+
<li data-data="780">
89+
IJK
90+
</li>
91+
<li data-data="250">
92+
IJK
93+
</li>
94+
<li data-data="1800">
95+
IJK
96+
</li>
97+
<li data-data="300">
98+
IJK
99+
</li>
100+
<li data-data="900">
101+
IJK
102+
</li>
103+
</ul>
104+
</div>
105+
</div>
106+
</div>
107+
</div>
108+
<!--6 end -->
109+
<div class="col-md-6">
110+
<pre>
111+
<xmp>
112+
<ul class="chart1">
113+
<li data-data="1330">ABC</li>
114+
<li data-data="1600">CDE</li>
115+
<li data-data="550">MMC</li>
116+
<li data-data="420">IJK</li>
117+
<li data-data="780">IJK</li>
118+
<li data-data="250">IJK</li>
119+
<li data-data="1800">IJK</li>
120+
<li data-data="300">IJK</li>
121+
<li data-data="900">IJK</li>
122+
</ul>
123+
</xmp>
124+
$("ul.chart").hBarChart();
125+
</pre>
126+
</div>
127+
</div>
128+
</div>
129+
</section>
130+
131+
<!-- chart1 -->
132+
<section>
133+
<div class="container">
134+
<div class="row">
135+
<div class="col-md-6">
136+
<div class="panel panel-default">
137+
<div class="panel-heading">
138+
<h3 class="panel-title">
139+
Customize 1
140+
</h3>
141+
</div>
142+
<div class="panel-body">
143+
<div>
144+
<ul class="chart1">
145+
<li data-data="1330">ABC</li>
146+
<li data-data="1600">CDE</li>
147+
<li data-data="550">MMC</li>
148+
<li data-data="420">IJK</li>
149+
<li data-data="780">IJK</li>
150+
<li data-data="250">IJK</li>
151+
<li data-data="1800">IJK</li>
152+
<li data-data="300">IJK</li>
153+
<li data-data="900">IJK</li>
154+
</ul>
155+
</div>
156+
</div>
157+
</div>
158+
</div>
159+
<!--6 end -->
160+
<div class="col-md-6">
161+
<pre>
162+
<xmp>
163+
<ul class="chart1">
164+
<li data-data="1330">ABC</li>
165+
<li data-data="1600">CDE</li>
166+
<li data-data="550">MMC</li>
167+
<li data-data="420">IJK</li>
168+
<li data-data="780">IJK</li>
169+
<li data-data="250">IJK</li>
170+
<li data-data="1800">IJK</li>
171+
<li data-data="300">IJK</li>
172+
<li data-data="900">IJK</li>
173+
</ul>
174+
</xmp>
175+
$("ul.chart1").hBarChart({
176+
bgColor: '#C000',
177+
textColor: '#fff',
178+
show: 'data',
179+
sorting: true,
180+
maxStyle: {
181+
bg: 'orange',
182+
text: 'white'
183+
}
184+
});
185+
</pre>
186+
</div>
187+
</div>
188+
</div>
189+
</section>
190+
<!-- chart1 -->
191+
192+
<section>
193+
<div class="container">
194+
<div class="row">
195+
<div class="col-md-12">
196+
<h3>Available Options</h3>
197+
<table class="table table-bordered table-condensed table-striped">
198+
<thead>
199+
<tr>
200+
<th>Option</th>
201+
<th>Type</th>
202+
<th>Default</th>
203+
<th>Remarks</th>
204+
</tr>
205+
</thead>
206+
<tbody>
207+
<tr>
208+
<td>bgColor</td>
209+
<td>string</td>
210+
<td>green</td>
211+
<td>For set background color of each bar. Here you can use color name or hex value of color</td>
212+
</tr>
213+
<tr>
214+
<td>textColor</td>
215+
<td>string</td>
216+
<td>white</td>
217+
<td>For set text color of each bar. Here you can use color name or hex value of color</td>
218+
</tr>
219+
<tr>
220+
<td>show</td>
221+
<td>string</td>
222+
<td>label</td>
223+
<td>Set label or data or both. Available: <strong>label</strong>,<strong>data</strong>,<strong>both</strong></td>
224+
</tr>
225+
<tr>
226+
<td>sorting</td>
227+
<td>boolean</td>
228+
<td>true</td>
229+
<td>Set your chart will be sorted or not according to your data</td>
230+
</tr>
231+
<tr>
232+
<td>maxStyle</td>
233+
<td>object</td>
234+
<td>
235+
{
236+
bg: 'orange',
237+
text: 'white'
238+
}
239+
</td>
240+
<td>You can style your maximum value bar.</td>
241+
</tr>
242+
</tbody>
243+
</table>
244+
</div>
245+
</div>
246+
</div>
247+
</section>
248+
</body>
249+
</html>

‎script.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
$(function() {
2+
$("ul.chart").hBarChart();
3+
$("ul.chart1").hBarChart({
4+
bgColor: '#C000',
5+
textColor: '#fff',
6+
show: 'data',
7+
sorting: true,
8+
maxStyle: {
9+
bg: 'orange',
10+
text: 'white'
11+
}
12+
});
13+
})

‎style.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/* Styles go here */
2+
3+
ul{
4+
margin:0;
5+
padding:0;
6+
}

0 commit comments

Comments
 (0)