Advertisement
  1. Web Design
  2. jQuery
Webdesign

How to Use jQuery with ZingChart

by
Difficulty:IntermediateLength:ShortLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

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:

  1. DOM manipulation
  2. Chart manipulation
  3. 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:

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.

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

Init with data

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.

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.

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.

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:

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.