Rapid Charting with ZingChart’s Angular Directive

This article was sponsored by ZingChart. Thank you for supporting the sponsors who make SitePoint possible.

Let’s say that, as a front-end developer, you come across a chart or dashboard you’d like to visually include in your project, but you don’t have the time to do a lot of heavy lifting and roll your own charting solution.

This hypothetical situation is a great case for a front-end JavaScript framework like Angular, because it allows you to build a quick “production-ready” demo with a very minimum amount of coding required. You still might be at a loss though, especially if you’re not an Angular expert. Even with a prototyping tool like Angular, building an interactive chart or dashboard can be a time-consuming challenge. Thankfully there’s the ZingChart Angular directive, which makes building complex Data Vizzes with HTML5 and JavaScript a simple and easy task.

Getting Started

To demonstrate how easy it is to use Angular and ZingChart, we’re going to create an interactive data-set using some information from the Best PHP Framework for 2015 SitePoint Survey.

But before we do that, let’s take a quick look at a basic demo showing how to set up a line-graph with Angular and the ZingChart directive.

See the Pen Angular + ZingChart by SitePoint (@SitePoint) on CodePen.

In the demo above, we’re adding the Angular, ZingChart, and ZingChart-angularJS libraries to the page. These three scripts are all necessary to ensure that the chart is rendered. Our HTML is very simple. All we’re doing is labeling a container and controller for the application, inside of which lies our element.

We have four lines of JavaScript to do the actual data-rendering. The first bootstraps the Angular application and declares the ZingChart directive as a dependency, while the second injects the data into the application model. In this case our data is the following array: [1,4,5,5,10].

Building the Survey Data-Set

In order to build the chart for the PHP survey, we’ve forked the original demo. Then, since our data will be in the form of a bar graph, we’re going to add the zc-json attribute to our element, while removing the zc-data attribute. This is so we can feed in our data as a JSON object.

<zingchart id="chart-1" zc-json="spData"></zingchart>

In our JavaScript, were going to remove the $scope.myData = ... line, and replace it with data that looks like this:

$scope.spData = {
 type : 'bar3d',
 series:[{
 text: 'foo',
 backgroundColor : "#FAEE00",
 values: [1,4,5,5,10]
 },
 {
 text: 'bar',
 backgroundColor : "#A0FFEE",
 values : [9,3,4,5,6]
 } ]
 };

Here we are updating the scope to include the spData object, where it can then be injected into the DOM. That object is our main data and configuration source. There are plenty of attributes we can add to the graph, including legends, X and Y axis titles, subtitles, and more. Take a look at the code used to generate the finished Angular ZingChart SitePoint Graph. I found it pretty easy to insert a quick animation, which was as simple as copying a quick example from a tutorial in the documentation. Overall, once you have the element and the initial Angular JavaScript in place, building a chart is as simple as adding JSON attributes to your zc-json object. There’s really nothing else to go over. I really like that it’s such a simple product.

See the Pen Angular + ZingChart by SitePoint (@SitePoint) on CodePen.

I’m not a big Angular user, and this is my first time using ZingChart. Still, I was able to build a complex graph in a matter of minutes. I used their docs and interactive demo to help me along the way, and I didn’t need to look for much. Everything is well-documented and I didn’t have to do any guess work. If you’re interested in creating your own ZingChart example, you can get started here.

Conclusion

As you can see, building an interactive data-set with Angular and ZingChart can be a simple and easy task. Not only can you create a simple graph in a manner of minutes, but you can also customize it to your liking, all with a minimal amount of code. Next time you need to build a quick prototype or demo that features an interactive data-set, go ahead and reach for the Angular + ZingChart combo.