JQUBar Histogram plug-in based on JQUERY_jquery

1. Introduction to JQUBAR (V1.0) JQUERY plug-in
1. Supports .net, java, php and other platforms.
2. Users can change the height of each column by dragging the histogram with the mouse, and ultimately achieve the purpose of modifying server data by dragging the graphical interface with the mouse.
3. Support histogram scaling.
4. Currently supports browsers: IE7, IE8, Firefox, Chrome.

2. HTML

Copy code The code is as follows:

<%--JQUBAR container--%>

zoom

Drag


Name fuzzy query:

The screenshot is as follows:

3. Introduction of javascript and CSS files

Copy code The code is as follows:

" rel="stylesheet" type ="text/css" />

Note: Please import the above files into html .

4. Add Javascript code

Copy the code The code is as follows:

Note: Please add the above js script to html .

5. ASP.NET MVC2.0 server 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 ease of reading.

6. Screenshots of program running

Zoom:

Mobile:

Finally: Due to lack of time, we were unable to test the JQUBAR1.0 plug-in system. If you are interested, you can download the JQUBAR1.0 plug-in here.

I sincerely thank all garden friends for your valuable opinions on this plug-in. Based on your opinions, I will take the time to upgrade the JQUBAR1.0 plug-in.

At the same time, I hope this article can help you solve the problems you encounter during development.
Author: RyanDing
Source: http://www.cnblogs.com/ryanding/