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
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:
var AppView = Backbone.View.extend({
// el - stands for element. Every view has a element associate in with HTML
// content will be rendered.
el: '#container',
// It's the first function called when this view it's instantiated.
initialize: function() {
this.render();
},
render: function() {
…..// FusionCharts code here
}
}
});
var appView = new AppView();
Step 3
Create all the HTML elements based on the requirements.
<div class="wrapper">
<div class="header">
<a href="https://www.fusioncharts.com" class="logo-wrapper"><img src="https://www.fusioncharts.com/apple-touch-icon-114x114.png" alt=""></a>
<ul class="thumbnails">
<li>
<div id="thumbnail-column" class="thumbnail"></div>
</li>
<li>
<div id="thumbnail-pie" class="thumbnail"></div>
</li>
<li>
<div id="thumbnail-bar" class="thumbnail"></div>
</li>
<li>
<div id="thumbnail-line" class="thumbnail"></div>
</li>
</ul>
</div>
<div class="container">
<div class="left-column">
<ul class="properties">
<li>
<h2>Data Value</h2>
<div class="property">
<label>
<input name='dv' id='show' type='radio' value='1' checked="true" /> Show</label>
<label>
<br>
<input name='dv' id='hide' type='radio' value='0' /> Hide
</label>
</div>
</li>
<li>
<br>
<h2>Animation</h2>
<div class="property">
<label>
<input name='anim' id='show' type='radio' value='1' /> On </label>
<label>
<br>
<input name='anim' id='hide' type='radio' value='0' /> Off
</label>
</div>
</li>
<li>
<br>
<h2>Theme Manager</h2>
<div class="property">
<label>
<input name='dh' id='c-theme' type='radio' value='carbontheme'/> Carbon</label>
<label>
<br>
<input name='dh' id='z-theme' type='radio' value='zunetheme'/> Zune
</label>
</div>
</li>
</ul>
</div>
<div class="right-column">
<div id="chart-container" class="chart-container">
</div>
</div>
</div>
</div>
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:
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:
revenueChartColumn = new FusionCharts({
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:
createThumbNail = function(chartId, width, height, divId) {
chartRef = FusionCharts(chartId),
clonedChart = chartRef.clone({
"width": width,
"height": height
});
clonedChart.setChartAttribute({
"showValues": "0",
"showLabels": "0",
"animation": "0",
"exportEnabled": "0",
"showTooltip": "0",
"showHoverEffect": "0",
"showYAxisValues": "0",
"caption": "",
"subCaption": "",
"xAxisName": "",
"pieRadius": "30",
"yAxisName": "",
"showXAxisLine": "0",
"showYAxisLine": "0",
"numDivLines": "0",
"enableSlicing": "0",
"enableRotation": "0"
});
clonedChart.addEventListener('chartClick', function() {
var tmpData = chartinfo.getJSONData();
FusionCharts(chartId).setJSONData(tmpData);
FusionCharts(chartId).render('chart-container');
chartinfo = FusionCharts(chartId);
});
clonedChart.render(divId, 'append');
},
// create thumbnails for all the three charts
createThumbNail('revenue-chart-column', 95, 90, 'thumbnail-column');
createThumbNail('revenue-chart-pie', 95, 90, 'thumbnail-pie');
createThumbNail('revenue-chart-bar', 95, 90, 'thumbnail-bar');
createThumbNail('revenue-chart-line', 95, 90, 'thumbnail-line');
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.
revenueChartColumn.render();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:
radio = document.getElementsByTagName('input');
for (i = 0; i < radio.length; i++) {
radElem = radio[i];
if (radElem.name === 'dv') {
radElem.onclick = function() {
val = this.getAttribute('value');
val && chartinfo.setChartAttribute("showValues", val);
};
}
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:else if (radElem.name === 'anim') {
radElem.onclick = function() {
val = this.getAttribute('value');
val && chartinfo.setChartAttribute("animation", val);
chartinfo.render();
};
}
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:
else {
radElem.onclick = function() {
val = this.getAttribute('value');
if (val === 'carbontheme') {
chartinfo.setChartAttribute("theme", "carbon");
} else if (val === 'zunetheme') {
chartinfo.setChartAttribute("theme", "zune");
}
};
}
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:
var appView = new AppView();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.
