Web charts built with JavaScript are a great way to add interactivity to your apps and sites, but if you prefer working in jQuery, your options can be limited. Developers are often left to choose between convenience or features. All the bells and whistles in 100 lines of code or a simpler version in 30? In order to address this, the team at ZingChart have developed a wrapper to use their API with jQuery syntax, allowing devs to quickly build charts with the rich interactivity they want.
Common Use Cases
There is a jQuery call for every function in the ZingChart API–all 169 of them. In this tutorial we’ll be covering a handful of them in three of the most common use cases:
- DOM manipulation
- Chart manipulation
- Using AJAX data
You can view the full reference on the ZingChart jQuery wrapper Github page.
Scripts and Files
If you don’t have a copy of the ZingChart library or jQuery wrapper, there are a few options:
- Grab it directly from the CDN Link – http://cdn.zingchart.com/
- Download it from GitHub – https://github.com/zingchart/ZingChart-jQuery
- Download it through Bower (
bower install zingchart-jquery)
Setting Up
Set up your HTML file by including the ZingChart library and any additional modules you need. You’ll also need to include jQuery and, finally, the ZingChart jQuery wrapper. The wrapper is compatible with jQuery versions 1.x and 2.x.
<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZingChart jQuery Wrapper Demo</title><script src="http://cdn.zingchart.com/zingchart.min.js"></script><script src="https://code.jquery.com/jquery-2.1.3.min.js"></script><script src="http://cdn.zingchart.com/zingchart.jquery.min.js"></script>
Initializing charts is now straight forward with the .zingchart() call. This method (and all others which take an object as a parameter) can take chart data directly or by reference (in this case where the data is stored in a variable data1).
Init by reference
$("#demo-1").zingchart({
data: data1
});Init with data
//Init chart with data directly
$("#demo-2").zingchart({
data: {
type: "line",
"background-color":"#eff0f0",
"tooltip":{
"padding":"20 20 20 20",
"font-family":"arial",
"font-color":"#666666",
"border-radius":5,
"shadow":0
},
"scale-x":{
"line-color":"#666666",
"tick":{
"line-color":"#666666"
},
"item":{
"font-color":"#666666",
"font-family":"arial"
}
},
"scale-y":{
"line-color":"#666666",
"tick":{
"line-color":"#666666"
},
"item":{
"font-color":"#666666",
"font-family":"arial"
}
},
plot:{
aspect:"spline",
"hover-state":{
"shadow":0
},
"marker":{
"size":8,
"border-width":0,
"background-color":"#00ccff",
"shadow":0
}
},
series: [
{
values: [3,4,10,2,6,5],
"line-color":"#00ccff",
"shadow":0
}
]
}
});1. DOM Manipulation
The first demo is an example of DOM manipulation using one of the listeners from the wrapper, .nodeHover(). Hovering over a node updates the table below it–particularly useful in situations where you need to provide additional information about chart data outside of the chart itself. There are listeners for all chart objects as well as certain events, such as .feedStart(), .historyBack(), and many more.
// Bind an event listener to node hover
$("#demo-1").nodeHover(
// plotMouseOver function
function(){
// Get all values for the hovered plot
var plotVals = $(this).getPlotValues({
plotindex:this.event.plotindex
});
// Get hover node index
var idx = this.event.nodeindex;
for (var i = 0; i<plotVals.length; i++) {
// Set each table elem equal to the cooresponding node
$("#table-1 td").eq(i).text(plotVals[i])
// Highlight the corresponding hovered node in the table
$("#table-1 td").eq(idx).addClass("hover");
}
},
// plotMouseOut function
function(){
// Reset the table text
$("#table-1 td").each(function(){
$(this).text("--").removeClass("hover");
});
});Take a look at the demo to see what that gives us.
2. Chart Manipulation
The second chart demonstrates the reverse–chart manipulation via the DOM. Using normal jQuery, we place input listeners on a set of sliders. Slider input is cast to an int and passed to a .setNodeValue() call for the corresponding node.
$("input[type='range']").each(function(idx){
// Bind input events to each slider
$(this).on("input",function(){
// Get the value of each slider on input events
var newVal = parseInt($(this).val());
// Set the value of the corresponding node to the slider's new value
$("#demo-2").setNodeValue({
plotindex:0,
nodeindex:idx,
value: newVal
})
});
});Take a look at the demo on Codepen to see what that gives us.
3. Loading AJAX Data
Loading new data is a snap. Upon a successful .get request, pass your results in with one of the many setter methods such as .appendSeriesData(), .setSeriesValues(), .modify(), .setData(), etc. In the example below, we use .setSeriesValues() to pass in a new array of values returned from our AJAX call.
// Bind a click event to the button
$("button").click(function(){
// Issue a get request
$.get( 'https://api.myjson.com/bins/530az', function() {})
// Upon a successful get request...
// (notice we haven't even touched the ZingChart API yet)
.done(function(res){
// Store the new data in a variable (totally optional)
var newData = res.data;
// Set the series values equal to the newData
$("#demo-3").setSeriesValues({
"values": [newData]
});
// Tada! Your chart just used AJAX data. Begin the disco.
});
});Again, take a look at the demo on Codepen to see what we now have.
Chaining
Method chaining is one of the most popular features of jQuery. This wrapper supports chaining for any methods or events that return a jQuery object. Instead of calling chart manipulation functions separately, you can now chain your calls in one line:
$("#myChart").set3dView({"y-angle":10}).resizeChart({"width":600,"height":400});The full demo file is available to download.
Conclusion
That was a very quick run through, demonstrating how to use jQuery for ZingChart. With these basics under your belt you should be able to take your own charts much further! Show us your examples and feel free to ask for feedback in the comments.
Resources
- http://www.zingchart.com
- @ZingChart on Twitter
- zingchart on Facebook
- zingchart on LinkedIn
- zingchart on Google+
