How To Create Charts In BackboneJS

charts in backbone js

Released in 2010 Backbone.js is a javascript library which gives structure to web applications. Being one of the frameworks, it provides models with key-value binding and custom events. Backbone.js is used in many places for the development purpose. Some of the big names are listed below:

  • Trello
  • USA Today
  • DocumentCloud
  • Quartz
  • Vox
  • Gawker Media
  • NewsBlur, etc

Backbone.js also allows structuring of Javascript code in MVC format. It allows you to save the state of your Javascript application via URL. In Backbone.js Models and Collections are not linked to the databases. They are linked to the REST interfaces from the backend. Backbone.js adopts an imperative programming style when it handles the DOM.

Backbone.js is designed to develop single-page web applications and also for keeping various parts of web applications synchronized. Backbone.js is one of the lightweight libraries, and that is why it is mostly used to structure client-side applications.

When to use Backbone.js

Backbone.js is useful when you want to represent your data as models. These models can be created, validated, destroyed and saved to the server. This whole process is also known as CRUD.
Backbone.js provides a better design with less code as its functionalities are well organized and are structured to develop your application.

In this tutorial, we’ll go through a step by step process of how to render charts using FusionCharts with backbone.js.

Integrating FusionCharts with Backbone.js

Algorithm

Step 1
Create the Backbone view which holds an HTML template with the model object.

Note: Before that make sure you have included all the CDN links to render a backbone sample.

List of the CDN links to be added are as follows:
http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js
https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js

Note: To create a project using Backbone framework, the framework is dependent on the above CDN links. The major dependencies are on jquery plugin and underscore js. Jquery plugin is used to handle the internal DOM elements whereas underscore js takes care of mapping and invoking methods. To know more about the CDN dependencies click here.

Step 2

The view object takes a parameter el which is the container, as every view has an element associated in with HTML where the content will be rendered. Next, declare the initialize method which is the first function to be called when the view is instantiated. Once the declaration is done, create the render method on which we will be writing the FusionCharts object. Write the implementation code to render the chart. As the primary architecture is ready, let’s create the UI of the page. The brief code snippet of the above steps are shown below:

Step 3

Create all the HTML elements based on the requirements.

Step 4

Now, the FusionCharts.ready method is called which contains an object chartData. chartData holds the dataSource of all the charts.

Some more CDN links should be added in order to render FusionCharts, those are as follows:
https://static.fusioncharts.com/code/latest/fusioncharts.js
https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.ocean.js
https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.carbon.js
https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.zune.js

Given below is the content for the chartData:

Step 5

Create all the chart instance required to draw the charts. Example:

Step 6

Create a method createThumbNail for the thumbnails of our chart. The chart will be rendered when we click on the thumbnails, using the method created. The code snippet is shown below:

To know more about FusionCharts Thumbnail feature please check here.

Step 7

It’s time to render the chart. Let’s choose the most basic chart i.e., column 2D chart. When you load the page, the 1st chart gets rendered in the view container.

Step 8

Create a mechanism for the group of radio buttons which will help in displaying and hiding the data values. Refer to the code given below:

Step 9

Create the mechanism for the group of radio buttons by the help of which we will set the value of animation to true or false. Setting it to true will animate the chart. Refer to the code given below:

Step 10

Next, create the mechanism for the group of radio buttons which by the help of which we will change the theme of the chart at runtime. Refer to the code given below:

Step 11

Create the new appView instance to load our Backbone view object and to load the view on its lifecycle. Refer to the code given below:

If you’ve followed the above steps correctly, your output should look like this:

If you have trouble running the code, feel free to reach out to us. And, if you’ve any suggestions for us do let us know in the comments section below.

Leave a Comment