The 1.1 version fixes some bugs while adding the following features:
1. Can customize the color of the coordinates
2. Can be customized x,y axis coordinate name
Automatic establishment of 3.Y axis dynamic coordinate
Automatic calculation of 4.Y axis dynamic coordinate value
5. Plug-in style upgrade
JQUBAR1.1 Use Method:
1. javascript files and CSS files are introduced:
(In html
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/utility.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"/> "
2. Add the following JavaScript code to html
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 ({
Whether to scale
Zoom: $ ("#cbZoom"). attr ("checked"),
Whether you can drag
Drag: $ ("#cbDragable"). attr ("checked"),
X axis Title, default to X axis
Xaxis: "Personnel",
Y-axis title, default to Y-axis
YAxis: "Amount",
Coordinates color, the default is "BLACK"
Axiscolor: "#0476BB",
Provides JSON data to facilitate. NET, Java, and PHP calls. This example is demonstrated under ASP.net MVC2.0
URL: ' <%=url.action (' loaddata ')%>/?name= ' + $ (' #txtName '). Val ()
}). reload ();
});
});
</script>
3. Add HTML code:
Copy Code code as follows:
<div id= "Con" style= "position:relative" >
<%--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" >
Drag </label>
<br/>
Name fuzzy query: <input type= "text" id= "Txtname"/>
<br/>
<input type= "button" id= "Btnreloadbar" value= "Reload"/>
4.mvc2.0 C # code:
Copy Code code as follows:
Private NorthwindDataContext _context = new NorthwindDataContext ();
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);
}
Program screenshot
Figure 1:
Figure 2:
Attention matters
To display the HTML standard for the Jqubar plug-in page, use the <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >, MVC2.0 C # code uses the Northwind database. The JQUBar1.1 plugin is here to download.
