ZingChart & Ember.js

We want to make ZingChart easy to implement in a variety of web applications. One way we’ve made it easier is by creating a component for use in Ember.js applications. Read on to see how easy it is to include ZingChart’s JavaScript charts in your next Ember project.

Ember.js + ZingChart: An Overview

Ember.js is one of many client-side JavaScript frameworks based on the MVC (Model-View-Controller) architectural pattern. It is in the same vein as Angular, Knockout, and Backbone.

It is touted for its ability to easily create ambitious single-page web applications. ZingChart, a JavaScript charting library designed for use with big data, is known for:

Wide array of features
Easy-to-use CSS-like styling attributes
Flexible API

Sounds like a match made in heaven! And since we had such a great response to our jQuery wrapper, we set out to make it easy for Ember users to include ZingChart in their Ember applications by creating a ZingChart component.

Author’s note: This post covers the ins and the outs of building a simple Ember application with the Ember CLI (Command Line Interface) and how you can use our component to include ZingChart.

I am not an Ember expert yet, but I really enjoyed playing with the framework and experimenting to find the best way to include ZingChart.

That being said, I am open to any questions or recommendations from Ember aficionados. Feel free to:

Leave a comment below
Make a pull request
File an issue on the ember-zingchart repo on GitHub

I’ll be happy to make the proper adjustments.

Hello Ember.js World

A “Hello World” exercise is always a good place to start. Starting out with the Ember CLI, I followed this fantastic tutorial from TheTechCofounder.com. It runs through the creation of a to-do list application, just as the getting started tutorial does on Ember’s official site.

However, this tutorial relies on the aid of the Ember CLI, which makes it easy to generate templates, components and you-name-its. It also comes bundled with Livereload. This allows you to see changes in your browser as soon as you make them in your application.

To install Ember CLI, begin by downloading Node if you don’t already have it installed. Bower is also required for managing packages:

npm install -g bower

With Node and Bower successfully installed, you can now install Ember CLI globally:

npm install -g ember-cli

Navigate to your working directory, and create a new Ember application using this command:

ember new hello-world

This command creates a directory called hello-world, generates an application structure, and initializes a git repository if you have git available.

Change dir to the hello-world directory and run this command to start a Livereload server for app testing:

ember server

You should see something like this:

ember server setting up zingchart

Ignoring the message regarding watchman, you can see that the Livereload server is serving on localhost:4200. Type this into your browser of choice and you’ll be greeted with your Ember application:

welcome to ember.js message

It’s not quite a “Hello World” app without the inclusion of the words “Hello” and “World”, in that order. To include them, change the <h2> element in hello-world/app/templates/application.hbs (a Handlebars template, more about that shortly) file to include everyone’s favorite two word phrase:

hello-world/app/templates/application.hbs:

<h2 id="title"Hello World</h2>  
  
{{outlet}}

Save the file and change to your browser to see your app update automatically:

hello world ember result

At this point, you’ve surely noticed the {{outlet}} element in our application template. This is used by our Handlebars template as a placeholder for other template content that the router fills in based on the current URL.

The application template should contain your header, footer, and other decorative content that will be used by your app. By default, the application template’s outlet will look for an index.hbs template. Just for shiggles, generate an index template using Ember CLI:

ember generate template index

And modify the newly generated file to contain some content:

hello-world/app/templates/index.hbs:  
  
<p>Foo Bar</p>

Check your app now and you’ll see that Handlebars pulls the content from index.hbs and places it where the {{outlet}} element is in the application template.

adding foo bar ember

For more information on templating and routing, trot on over to the Ember Guides.

Installing the ZingChart Ember Addon

To install the ember-zingchart addon:

ember g ember-zingchart

Using the ZingChart Ember Component

The ember-zingchart element accepts three parameters:

renderOptions (optional): An object that contains additional options that will be used by the zingchart.render() method
chartData (required): An object used to configure your chart objects and data
themeData (optional): An object that contains styling options for your chart

Place the ember-zingchart element in your Handlebars template:

{{ember-zingchart renderOptions=myRenderOptions chartData=myChartData  
    themeData=myThemeData}}

Set the values for renderOptions, chartData, and themeData in the associated controller. A sample controller can be found below:

Once you've properly configured your Handlebars template and its associated controller, you should have your first chart.

Under the hood, the component has a didInsertElement event, which calls renderLater() when fired, in turn calling the zingchart.render({}); method once in the afterRender queue, making sure the DOM elements are rendered before we attempt to render our chart with ZingChart.

The willDestroyElement event fires when the element of a view is about to be destroyed (e.g., when you switch tabs on a dashboard application). This calls the ZingChart destroy() method, which deletes the chart and its associated DOM elements to keep things tidy.

ZingChart Ember Component on Github

Our simple Ember application can be found on GitHub, and npm. Feel free to file an issue on GitHub if you have any questions, problems, or suggestions.

Conclusion

I would like to give a shout-out to Ember.js expert Lauren Elizabeth Tan, whose articles have inspired us to make the Ember component for ZingChart.

We’ll have more content regarding our Ember component in the coming weeks, so stay tuned! We are also looking to create similar components and wrappers for a number of other MVC frameworks that are currently available, in addition to this and our jQuery wrapper.

If you have a favorite, tell us in the comments section below. We can try and make your fave our next priority.