Adding Interactive Charts in Backbone.js

While there is plenty of buzz about “hot new” JavaScript frameworks, Backbone.js. remains a solid option for web applications. Released in 2010, Backbone is one of the oldest modern (relatively speaking) front-end frameworks. It is also tiny in comparison to Angular, Ember, and React: only 7.3kb, minified and gzipped. It’s sole dependency, Underscore, is 5.7kb, minified and gzipped.

The age of the framework and minimal dependencies piqued the interest of the ZingChart team and the possibilities for including an interactive dataviz component within Backbone apps.

Backbone also provides a simple, minimalist structure to your app. We used that minimalist style with our Backbone extension. It is a simple, clean solution for integrating ZingChart’s interactive charts within a Backbone project.

Backbone and ZingChart

Below is a quick demo and brief explanation of how Backbone works with models, views, and templates. If are already familiar with these concepts, feel free to skip down to Step 3. If you read on, you’ll get a better understanding of how Backbone and the ZingChart extension work together.

Step 1: Models and Views in BackBone

Backbone can be broken down to two essential concepts: models and views. Models are where you structure your data. Here’s a simple example of using a model:

var UserModel = Backbone.Model.extend({  
	defaults: {  
		name: “Pablo”,  
		age: 32  
	}  
});  
  
var user_model = new UserModel({  
	name: “Gertrude”,  
	age: 57  
});

Based on this addition, our user_model’s name is now Gertrude and their age is now 57. However, there is no real value to this without being able to see it. Let’s make a View to render that Model. Backbone’s Views use Underscore’s templating functionality.

For ease of use, we’re going to load up jQuery to help with templating. Here’s an example of how to create a view:

var UserView = Backbone.View.extend({  
	// Set the element we attach our view to  
	el: “#userList”,  
	// Set up our template  
	template: _.template($(“#userTemplate”).html()),  
	// Initialize our view  
	initialize: function () {  
		// Listen for changes to the model and render the view  
		this.listenTo(this.model, “change”, this.render);  
		// Render the view to start  
		this.render();  
    },  
    // Render the view  
    render: function () {  
        // Append the rendered view to the view’s element  
        this.el.html(this.template(this.model.attributes));  
        // Return this (used for chaining)  
        return this;  
	}  
});  
  
var user_view = new UserView({  
	model: user_model  
});

What we’ve done here is:

Created a view
Attached it to an element
Set up a template, initializing function, and rendering function
Attached our original model from before to our view

The initialize function has some cool stuff going on:

We’re attaching a listener to the View’s model, listening for any changes to it. When our View’s model is changed, we render the view again. This ensures that what we see matches in the underlying data.
We’re rendering the view.

Step 2: Templates

At this point, our View’s render function is getting the element we set and appending some content to it. The content is determined by two things:

Model
Template

Since we have a model, now we need a template. Here is an example of one:

<script type=”text/template” id=”userTemplate”>  
 <li>  
   <p><%= name %> is <%= age %> years old</p>  
 </li>  
</script>

Now let’s tie everything up together. This is what the <body> of your HTML should look like:

Step 3: Chart Data and ZingChart

Now that we’ve covered the basics of Backbone, it’s time to introduce the ZingChart extension for Backbone. We took the same simple Model and View approach native to Backbone and applied it to charts. As expected, we have a Model that contains the chart data and a View that renders that data.

Make sure you’ve included both ZingChart and the ZingChart Backbone extension in your project. You can find both on our CDN, or you can install them with Bower using bower install zingchart and bower install backbone-zingchart, respectively.

Here’s an example of how to create a ZingChartModel:

var chartModel = new ZingChart.ZingChartModel({  
	data: [  
        [3,2,3,3,9],  
        [1,2,3,4,5]  
        ],  
    charttype: “bar”,  
    width: 500,  
    height: 400  
});

The next step is to attach the model to a view.

var chartView = new ZingChart.ZingChartView({  
	model: chartModel,  
	el: $(“#myChart”)  
});

And now it’s rendering time.
chartView.render();

That’s it! You’ve created a chart from our Backbone extension.

Step 4: JSON and ZingChart

Let’s say we wanted to pass through a full JSON chart object instead. The code would look similar to this:

var jsonModel = new ZingChart.ZingChartModel({  
	json: {  
		type: “bar”,  
		series: [  
			{  
			values: [3,2,3,3,9]  
   			},  
			{  
			values: [1,2,3,4,5]  
			}  
		]  
	},  
	width: 500,  
	height: 400  
});

Now let’s render our new model:

var chartView = new ZingChart.ZingChartView({  
	model: jsonModel,  
	el: $(“#myChart”)  
});

If you want to update the JSON to use a new chart object, you don’t need to rerender the chart or make a new Model. Instead, set the json attribute to our new chart JSON.

var newJson = {  
	type: ‘line’,  
	series: [  
		{  
			values: [1,1,2,3,5,8,13]  
        	}  
        ]  
	}  
  
chartModel.set(‘json’, newJson);

And just like that, your chart is updated. Here’s a full example:

Conclusion

These examples will likely cover many use cases for including ZingChart in a Backbone app. However, you can do much more with the native ZingChart API and this extension. If you’re interested, you can read more about it in our GitHub repo or in our ZingChart documentation on the API.

In the mean time, give this extension a shot with your own data. Let us know in the comments how it goes and don’t be afraid to ask us questions via our website chat, on StackOverflow with the ZingChart tag, or email us at support@zingchart.com. Until then, please clone, fork, or star our repo and happy charting!