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(); });
<h3><font face="Roboto"> Creating Charts using Underscore JS </font> </h3> <div id="chart-container"> FusionCharts will render here... </div>