How To Create Charts In BackboneJS

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.jshttps://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.jshttps://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:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

varAppView=Backbone.View.extend({

// el - stands for element. Every view has a element associate in with HTML

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.jshttps://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.ocean.jshttps://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.carbon.jshttps://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.zune.js

Given below is the content for the chartData:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

chartData={

"chart":{

"caption":"Top 5 Companies Of 2017",

"subCaption":"Based on Market Value (In Millions)",

"yAxisName":"Market Value",

"numberPrefix":"$",

"theme":"ocean",

"bgcolor":"#DCEAFC",

"canvasbgcolor":"#DCEAFC",

"canvasbgalpha":"10",

"rotateValues":"1",

"exportEnabled":"1",

"transposeAnimation":"1",

"pieRadius":"70"

},

"data":[{

"label":"Apple",

"value":"752"

},{

"label":"Alphabet",

"value":"579.5"

},{

"label":"Microsoft",

"value":"507.5"

},{

"label":"Amazon",

"value":"427"

},{

"label":"Berkshire Hathaway",

"value":"409.9"

}]

}

Step 5

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

1

2

3

4

5

6

7

8

9

revenueChartColumn=newFusionCharts({

type:'column2d',

renderAt:'chart-container',

width:'420',

height:'350',

dataFormat:'json',

id:'revenue-chart-column',

dataSource:chartData

})

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: