https://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);
};
}
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:
Imagine you’re comparing the sales performance of your top product lines across different regions, or…
Have you ever spent hours buried in documentation, hunting for a specific piece of code?…
Do you feel like your data is a cryptic puzzle, locked away from revealing its…
In web development, mastering JavaScript charting libraries is crucial for keeping up with the fast-paced…
Ever spend an afternoon neck-deep in documentation, searching for that one elusive code snippet? Or…
In the dynamic world of data visualization, the need for precision and innovation has never…