https://static.fusioncharts.com/code/latest/fusioncharts.js https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js https://csm.fusioncharts.com/projects/themes/hulk-light.js (optional)Step 2: Creating the HTML elements Corresponding to the requirements for the sample, create the HTML elements using the code snippet given below:
<h3><font face="Roboto"> FusionCharts using UnderScore JS </font> </h3> <div id="chart-container"> FusionCharts will render here... </div>Step 3: Calling the
FusionCharts ready()
method Call the FusionCharts ready()
method that will be the entry point for the chart framework using the structure given below: FusionCharts.ready(function() { ... …. ….. //your code here });Step 4: Creating the chart instance To create the chart instance, add the code snippet given below within the
ready()
method: var scoreCard = new FusionCharts({ type: bar2d, renderAt: 'chart-container', width: '100%', height: '350', dataFormat: 'json', dataSource: …. //to be created later });Step 5: Preparing the chart data The Underscore.JS Utility Library lets you perform various operations on your data, like merging data arrays, creating data objects, sorting data within the objects, and so on. Click here to know more. Step 5.1: Creating data arrays and converting them into objects Create two arrays, one with the team names, or the labels, and another with the average number of runs, or the data values, and then convert them into objects. To do this, use the code snippet given below:
var a = ['Players standing {br} around between plays', 'Commercials', 'Replays', 'Gameplay', 'Coach Shots', 'Referee Shots', 'Halftime', 'Sideline player shots', 'On-screen promotions', 'Other']; var b = [35.5, 24.5, 10.7, 8.3, 4.9, 3.2, 3.2, 2.2, 2, 5.5]; var t = _.object(a, b);Step 5.2: Creating object arrays Create object arrays in order to map the data labels (the team names) with the data values (the average number of runs) and convert them into FusionCharts’ prescribed JSON data format for a single series chart. To do this, use the code snippet given below:
var maindata = []; for (var i = 0; i < a.length; i++) { var k = new Object(); k.label = a[i]; k.value = b[i]; maindata.push(k); }Step 5.3: Sorting the objects Sort the objects according to the data values using Underscore’s
sortBy
collection. To do this, use the code line given below: var sortedmaindata = _.sortBy(maindata, 'value').reverse();The
sortedmaindata
variable now holds the sorted data values and their corresponding data labels. Step 5.4: Preparing the data source Pass the sortedmaindata
variable as the value to FusionCharts’ data object along with defining the other cosmetics and functionalities of the chart. To do this, use the code given below: var scoreCard = new FusionCharts({ type: 'bar2d', renderAt: 'chart-container', width: '100%', height: '400', dataFormat: 'json', dataSource: { "chart": { "caption": "What actually happens in an NFL game", "captionAlignment": "left", "subcaption": "An NFL broadcast, minute by minute", "subCaptionFontSize": "13", "paletteColors": "#0075C2", "placeValuesInside": "0", "exportEnabled": "1", "theme": "hulk-light", "valuefontcolor": "#0000000", "yaxisminvalue": "0", "yaxismaxvalue": "40", "divlinealpha": "0", "showAlternateVGridColor": "0", "showYAxisValues": "1", "showPlotBorder": "0", "showYAxisLine": "1", "yAxisLineColor":"#000000", "numbersuffix": "%", "useRoundEdges": "1", "showLabels": "1" }, "data": sortedmaindata, } })Step 6: Rendering the chart Call the
render()
method from the FusionCharts API to render the chart. The complete code for this sample, also showing how the render()
method will be used, is: FusionCharts.ready(function() { var a = ['Players standing {br} around between plays', 'Commercials', 'Replays', 'Gameplay', 'Coach Shots', 'Referee Shots', 'Halftime', 'Sideline player shots', 'On-screen promotions', 'Other']; var b = [35.5, 24.5, 10.7, 8.3, 4.9, 3.2, 3.2, 2.2, 2, 5.5]; var t = _.object(a, b); console.log(t); var maindata = []; for (var i = 0; i < a.length; i++) { var k = new Object(); k.label = a[i]; k.value = b[i]; maindata.push(k); } //console.log(maindata); var sortedmaindata = _.sortBy(maindata, 'value').reverse(); console.log(sortedmaindata); var scoreCard = new FusionCharts({ type: 'bar2d', renderAt: 'chart-container', width: '100%', height: '400', dataFormat: 'json', dataSource: { "chart": { "caption": "What actually happens in an NFL game", "captionAlignment": "left", "subcaption": "An NFL broadcast, minute by minute", "subCaptionFontSize": "13", "paletteColors": "#0075C2", "placeValuesInside": "0", "exportEnabled": "1", "theme": "hulk-light", "valuefontcolor": "#0000000", "yaxisminvalue": "0", "yaxismaxvalue": "40", "divlinealpha": "0", "showAlternateVGridColor": "0", "showYAxisValues": "1", "showPlotBorder": "0", "showYAxisLine": "1", "yAxisLineColor":"#000000", "numbersuffix": "%", "useRoundEdges": "1", "showLabels": "1" }, "data": sortedmaindata, } }) .render(); });
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…
Are you drowning in data but struggling to find the insights that drive real business…