Jqubar Histogram plug-in _jquery based on jquery

Introduction of Jqubar (V1.0) jquery Plugin
1. Support. NET, Java, PHP and other platforms.
2. The user can drag and drop the bar chart to change the height of each column, and finally achieve the purpose of modifying the server data by dragging and dropping the graphical interface through the mouse.
3. Supports histogram scaling.
4. Current Support browser: IE7, IE8, Firefox, Chrome.

Second, HTML

Copy Code code as follows:

<div id= "con" ><%--jqubar container--%>
</div>
<input type= "checkbox" id= "Cbzoom" checked= "checked"/>
<label for= "Cbzoom" > Zoom </label>
<input type= "checkbox" id= "cbdragable" checked= "checked"/>
<label for= "cbdragable" > Dragging </label>
<br/>
Name fuzzy query: <input type= "text" id= "Txtname"/>
<br/>
<input type= "button" id= "Btnreloadbar" value= "Reload"/>

Screenshot below:

third, JavaScript and CSS file introduction

Copy Code code as follows:

<script src= "<%=url.content (" ~/scripts/jquery-1.4.1.js ")%>" type= "Text/javascript" charset= "Utf-8" > </script>
<script src= "<%=url.content (" ~/scripts/jqubar/wz_jsgraphics.js ")%>" type= "Text/javascript" ></" Script>
<script src= "<%=url.content (" ~/scripts/jqubar/jquery-ui.min.js ")%>" type= "Text/javascript" ></" Script>
<script src= "<%=url.content (" ~/scripts/jqubar/jqubar.js ")%>" type= "Text/javascript" ></script>
<link href= "<%=url.content (" ~/scripts/jqubar/jqubar.css ")%>" rel= "stylesheet" type= "Text/css"/> "

Note: Please include the above documents in HTML
Four, add JavaScript code

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
$ ("#con"). Jqubar ({
Zoom:true,
Drag:true,
URL: ' <%=url.action ("LoadData")%> '
});
$ ("#btnReloadBar"). Click (function () {
$ ("#con"). Setbarparam ({
Zoom: $ ("#cbZoom"). attr ("checked"),
Drag: $ ("#cbDragable"). attr ("checked"),
Provides JSON data to facilitate. NET Java PHP invocation. This example is demonstrated under ASP.net MVC2.0
URL: ' <%=url.action (' loaddata ')%>/?name= ' + $ (' #txtName '). Val ()
}). reload ();
});
});
</script>

Note: The above JS script also please add HTML
v. asp.net MVC2.0 service-side code

Copy Code code as follows:

Private decimal[] Getpricesbyemployeeid (int employeeId)
{
decimal[] result = NULL;
result = _context.orders.where (o => o.employeeid = = EmployeeID)
. Take (5)
. Select (oo => (decimal) oo. ShipVia). ToArray ();
return result;
}
Public Jsonresult LoadData (string name)
{
var data = (from E in _context.employees.take (10). ToList ()
Select New
{
EmployeeID = E.employeeid,
Orders = Getpricesbyemployeeid (E.employeeid),
Name = E.firstname,
}). Distinct ();
if (!string. IsNullOrEmpty (name))
{
data = data. Where (d => d.name.indexof (Name) >= 0);
}
Return Json (New {Success = true, MSG = data}, Jsonrequestbehavior.allowget);
}

Note: Use the Northwind database for easy reading.

Six, the program runs the screenshot

Scaling:

Move:

Finally: Due to time haste failed to test the JQUBAR1.0 plug-in system, if you are interested you can download the JQUBAR1.0 plugin here.

Heartfelt thanks to the friends of the park to put forward your valuable comments, according to the views of everyone I will spare time to upgrade the JQUBAR1.0 Plug-ins.

Also hope this article can help you solve the problems encountered in development.
Author: ryanding
Source: http://www.cnblogs.com/ryanding/