JQuery Horizontal Bar Chart Plugin
March 24, 2012 Leave a comment
This is a very simple bar chart plugin using unordered lists and divs. You can populated the data either statically using data-dash attributes for the
Download: DOWNLOAD
Below is an example of what it might look like.
First add some css. Again you can change the css style names to your liking in the plugin.
.quickbar { padding: 0px; margin: 0px; list-style: none; } /* this is the actual ul */
.quickbar li { padding: 5px 0px 5px 0px;}
.quickbar-container { background-color: #F3F3F3; display: block; line-height: 20px; overflow: hidden; border: 1px solid #EAEAEA;
border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; } /* this is the wrapper around the bar. */
.quickbar-bar { background-color: #2E3192; width: 0px;} /* this is the bar itself you could use an image here if you wanted */
.quickbar-title { padding: 3px; } /* this is the element above, left or below the bar.*/
.quickbar-label { padding-left: 6px; float: left; position: relative; font-size: .9em; } /* this is the label that goes to the right or inside the bar */
For the HTML markup you have two options the first couldn’t get any easier.
The second utilizes data-dash attributes. If you are familiar with unobtrusive javascript these will make perfect sense. Hence if you rendered your markup and grabbed data from your database or something you can just add the attributes directly as opposed to supplying them in javascript. Just makes it handy.In this example you have to create the
data-quickbar-title=”title”
data-quickbar-value=”value”
data-quickbar-label=”label”
data-quickbar-width=”200″
For the Javascrpt. Reference the plugin as you normal would for any plugin in your header tag.
Wire up the plugin to your element.
$(document).ready(function () {
var chartData = [ { title: 'your_title', value: 'your_value', label: 'your_label', width: 200}, { title: 'your_title2', value: 'your_value2', label: 'your_label2', width: 200} ]
$(‘.quickbar’).quickbar({
styles: { container: ‘quickbar-container’, bar: ‘quickbar-bar’, title: ‘quickbar-title’, label: ‘quickbar-label’ },
title: { visible: true, width: 50, position: ‘left’ }, // position options are ‘top’, ‘left’, ‘bottom’. Defaults: true, 50, ‘left’.
label: { visible: true, width: 50, position: ‘right’ }, // position options are ‘inner’ or ‘right’. Defaults: true, 50, ‘right’.
refresh: { btn: ‘.quickbar-refresh’, method: ”}, // this is only need to call a function to repopulate and reinit the plugin with new data.
data: chartData, // this can be static, empty (if using data-dash attribute) or a function.
animate: true, // can be true or false. Default: true.
});
});
You could also use the built in destroy or reinit methods.
$(‘.quickbar’).quickbar(‘destroy’); // destroys the plugin and removes any auto generated elements. (manual data-dash elements will NOT be removed).
$(‘.quickbar’).quickbar(‘reinit’); // destroys and reinitializes the plugin.
You could populate the data using an ajax call.
function buildChart(){
$.post(‘/your_path/method’, { variable: ‘variable’, variable2: ‘variable2′ },
function (result){
// creates a new quickbar.
var opt = {
title: { width: 100, position: ‘top’ },
data: $.parseJSON(result)
}
var callback = function () { // some function. };
$(‘.quickbar’).quickbar(opt, callback);
}
}
. Check my blog for updated
* version(s) of this class (http://moazzam-khan.com)
*
* Usage Examples:
*
* Get Request
* --------------------------------
* HttpData data = HttpRequest.get("http://example.com/index.php?user=hello");
* System.out.println(data.content);
*
* Post Request
* --------------------------------
* HttpData data = HttpRequest.post("http://xyz.com", "var1=val&var2=val2");
* System.out.println(data.content);
* Enumeration<String> keys = dat.cookies.keys(); // cookies
* while (keys.hasMoreElements()) {
* System.out.println(keys.nextElement() + " = " +
* data.cookies.get(keys.nextElement() + "rn");
* }
* Enumeration<String> keys = dat.headers.keys(); // headers
* while (keys.hasMoreElements()) {
* System.out.println(keys.nextElement() + " = " +
* data.headers.get(keys.nextElement() + "rn");
* }
*
* Upload a file
* --------------------------------
* ArrayList<File> files = new ArrayList();
* files.add(new File("/etc/someFile"));
* files.add(new File("/home/user/anotherFile"));
*
* Hashtable<String, String> ht = new Hashtable<String, String>();
* ht.put("var1", "val1");
*
* HttpData data = HttpRequest.post("http://xyz.com", ht, files);
* System.out.println(data.content);
*
* @author Moazzam Khan
*/
public class HttpRequest {
/**
* HttpGet request
*
* @param sUrl
* @return
*/
public static HttpData get(String sUrl) {
HttpData ret = new HttpData();
String str;
StringBuffer buff = new StringBuffer();
try {
URL url = new URL(sUrl);
URLConnection con = url.openConnection();
BufferedReader in = new BufferedReader(new InputStreamReader(con.getInputStream()));
while ((str = in.readLine()) != null) {
buff.append(str);
}
ret.content = buff.toString();
//get headers
Map<String, List<String>> headers = con.getHeaderFields();
Set<Entry<String, List<String>>> hKeys = headers.entrySet();
for (Iterator<Entry<String, List<String>>> i = hKeys.iterator(); i.hasNext();) {
Entry<String, List<String>> m = i.next();
Log.w("HEADER_KEY", m.getKey() + "");
ret.headers.put(m.getKey(), m.getValue().toString());
if (m.getKey().equals("set-cookie"))
ret.cookies.put(m.getKey(), m.getValue().toString());
}
} catch (Exception e) {
Log.e("HttpRequest", e.toString());
}
return ret;
}
/**
* HTTP post request
*
* @param sUrl
* @param ht
* @return
* @throws Exception
*/
public static HttpData post(String sUrl, Hashtable<String, String> ht) throws Exception {
String key;
StringBuffer data = new StringBuffer();
Enumeration<String> keys = ht.keys();
while (keys.hasMoreElements()) {
key = keys.nextElement();
data.append(URLEncoder.encode(key, "UTF-8"));
data.append("=");
data.append(URLEncoder.encode(ht.get(key), "UTF-8"));
data.append("&");
}
return HttpRequest.post(sUrl, data.toString());
}
/**
* HTTP post request
*
* @param sUrl
* @param data
* @return
*/
public static HttpData post(String sUrl, String data) {
StringBuffer ret = new StringBuffer();
HttpData dat = new HttpData();
String header;
try {
// Send data
URL url = new URL(sUrl);
URLConnection conn = url.openConnection();
conn.setDoOutput(true);
OutputStreamWriter wr = new OutputStreamWriter(conn.getOutputStream());
wr.write(data);
wr.flush();
// Get the response
Map<String, List<String>> headers = conn.getHeaderFields();
Set<Entry<String, List<String>>> hKeys = headers.entrySet();
for (Iterator<Entry<String, List<String>>> i = hKeys.iterator(); i.hasNext();) {
Entry<String, List<String>> m = i.next();
Log.w("HEADER_KEY", m.getKey() + "");
dat.headers.put(m.getKey(), m.getValue().toString());
if (m.getKey().equals("set-cookie"))
dat.cookies.put(m.getKey(), m.getValue().toString());
}
BufferedReader rd = new BufferedReader(new InputStreamReader(conn.getInputStream()));
String line;
while ((line = rd.readLine()) != null) {
ret.append(line);
}
wr.close();
rd.close();
} catch (Exception e) {
Log.e("ERROR", "ERROR IN CODE:"+e.getMessage());
}
dat.content = ret.toString();
return dat;
}
/**
* Post request (upload files)
* @param sUrl
* @param files
* @return HttpData
*/
public static HttpData post(String sUrl, ArrayList<File> files)
{
Hashtable<String, String> ht = new Hashtable<String, String>();
return HttpRequest.post(sUrl, ht, files);
}
/**
* Post request (upload files)
* @param sUrl
* @param params Form data
* @param files
* @return
*/
public static HttpData post(String sUrl, Hashtable<String, String> params, ArrayList<File> files) {
HttpData ret = new HttpData();
try {
String boundary = "*****************************************";
String newLine = "rn";
int bytesAvailable;
int bufferSize;
int maxBufferSize = 4096;
int bytesRead;
URL url = new URL(sUrl);
HttpURLConnection con = (HttpURLConnection) url.openConnection();
con.setDoInput(true);
con.setDoOutput(true);
con.setUseCaches(false);
con.setRequestMethod("POST");
con.setRequestProperty("Connection", "Keep-Alive");
con.setRequestProperty("Content-Type", "multipart/form-data;boundary="+boundary);
DataOutputStream dos = new DataOutputStream(con.getOutputStream());
//dos.writeChars(params);
//upload files
for (int i=0; i<files.size(); i++) {
Log.i("HREQ", i+"");
FileInputStream fis = new FileInputStream(files.get(i));
dos.writeBytes("--" + boundary + newLine);
dos.writeBytes("Content-Disposition: form-data; "
+ "name=\"file_"+i+"\";filename=\""
+ files.get(i).getPath() +"\"" + newLine + newLine);
bytesAvailable = fis.available();
bufferSize = Math.min(bytesAvailable, maxBufferSize);
byte[] buffer = new byte[bufferSize];
bytesRead = fis.read(buffer, 0, bufferSize);
while (bytesRead > 0) {
dos.write(buffer, 0, bufferSize);
bytesAvailable = fis.available();
bufferSize = Math.min(bytesAvailable, maxBufferSize);
bytesRead = fis.read(buffer, 0, bufferSize);
}
dos.writeBytes(newLine);
dos.writeBytes("--" + boundary + "--" + newLine);
fis.close();
}
// Now write the data
Enumeration keys = params.keys();
String key, val;
while (keys.hasMoreElements()) {
key = keys.nextElement().toString();
val = params.get(key);
dos.writeBytes("--" + boundary + newLine);
dos.writeBytes("Content-Disposition: form-data;name=\""
+ key+"\"" + newLine + newLine + val);
dos.writeBytes(newLine);
dos.writeBytes("--" + boundary + "--" + newLine);
}
dos.flush();
BufferedReader rd = new BufferedReader(
new InputStreamReader(con.getInputStream()));
String line;
while ((line = rd.readLine()) != null) {
ret.content += line + "rn";
}
//get headers
Map<String, List<String>> headers = con.getHeaderFields();
Set<Entry<String, List<String>>> hKeys = headers.entrySet();
for (Iterator<Entry<String, List<String>>> i = hKeys.iterator(); i.hasNext();) {
Entry<String, List<String>> m = i.next();
Log.w("HEADER_KEY", m.getKey() + "");
ret.headers.put(m.getKey(), m.getValue().toString());
if (m.getKey().equals("set-cookie"))
ret.cookies.put(m.getKey(), m.getValue().toString());
}
dos.close();
rd.close();
} catch (MalformedURLException me) {
} catch (IOException ie) {
} catch (Exception e) {
Log.e("HREQ", "Exception: "+e.toString());
}
return ret;
}
}
