Table of Contents
npm install -g ember-cli
After EmberJS is installed successfully, use the following command to check the version details: ember -v
ember new TestEmber
When the project is created, the file structure for the Ember project is automatically generated in the working directory. The file structure of the Ember project, TestEmber, looks as shown in the image below: ember serve
Type the url localhost: 4200 in your browser (because 4200 is the default port being used). Your project is running successfully if you can see the Ember landing page, as shown in the image below: npm install fusioncharts
The node_modules
folder will now have the entire FusionCharts library within it. node_modules
into the TestEmber project. To do this, include the following import statements in the ember-cli-build.js
file: app.import(“node_modules/fusioncharts/fusioncharts.js”); app.import(“node_modules/fusioncharts/fusioncharts.charts.js”); app.import("node_modules/fusioncharts/themes/fusioncharts.theme.zune.js");A screenshot of the ember-cli-build.js file, after including the above set of commands, is shown in the image below:
ember g route ChartList/chart2
This will create a route file, chart2.js, under the routes folder structure. In addition, a template file, chart2.hbs, is also created under the templates folder structure. The .js file is the route handler file, which defines what should happen when the route template is loaded. The .hbs file is a Handlebars template file that contains static HTML to generate the application UI and dynamic content (scripts) for rendering charts using FusionCharts. Click here to read more about handlebars. The directory structure of the TestEmber project now looks as shown in the image below: ember g component chart2-comp
Upon execution of the above command, the directory structure of the TestEmber project will be modified to include the components. The modified directory structure looks as shown in the image below: <button {{action 'renderColumn'}} id="rendcolumn">Column chart</button> <button {{action 'renderBar'}} id="rendbar">Bar chart</button> <button {{action 'renderLine'}} id="rendline">Line chart</button> <button {{action 'renderArea'}} id="rendarea">Area chart</button> <br><br> <form> <div id="chart-container">FusionCharts will render here</div> <br> <div> <label>Enter your own DataSource and click the button : </label><br> {{textarea value=myds rows="8" cols="99" placeholder="Enter the dataSource here without /* or // comments"}} </div> <button {{action 'renderChart'}} id="rend">Render Chart</button> </form>A screenshot of the chart2-comp.hbs file, after including the above code, is shown in the image below:
chart2-comp.js
file, via the action specified for the button. To define this behavior of the UI, copy the following code and paste it in the chart2-comp.js
file: import Ember from 'ember'; var revenueChart1; var initial_ds = { "chart": { "caption": "Worlds Top 10 Highest paid", "subCaption": "Soccer Players 2017", "yAxisName": "Earnings (In USD)", "numberPrefix": "$", //Cosmetics "captionpadding": "30", "yaxisname": "Estimated fans", "rotatevalues": "0", "divlinecolor": "#CCCCCC", "yaxisvaluespadding": "15", "valuefontbold": "1", "labelsepchar": ": ", "labeldisplay": "AUTO", "numberscalevalue": "1000,1000,1000", "numberscaleunit": "K,M,B", "animation": "0", "palettecolors": "e44a00", "theme": "zune", "valueBgAlpha": "0", "usePlotGradientColor": "0" }, "data": [ { "label": "CR7", "value": "93000000", "alpha": "100" }, { "label": "Messi", "value": "80000000", "alpha": "85" }, { "label": "Neymar", "value": "37000000", "alpha": "75" }, { "label": "Gareth{br}Bale", "value": "34000000", "alpha": "65" }, { "label": "Zlatan{br}Ibrhimovic", "value": "32000000", "alpha": "56" }, { "label": "Wayne{br}Rooney", "value": "23600000", "alpha": "50" }, { "label": "Luis Suarez", "value": "23300000", "alpha": "45" }, { "label": "Sergio{br}Aguero", "value": "13700000", "alpha": "35" }, { "label": "James{br}Rodriguez", "value": "29100000", "alpha": "30" }, { "label": "Paul{br}Pogba", "value": "21200000", "alpha": "20" } ] }; export default Ember.Component.extend({ actions: { renderChart: function() { var ds = this.get('myds'); revenueChart1.setJSONData(ds); }, renderColumn: function() { FusionCharts.ready(function() { revenueChart1 = new FusionCharts({ "type": "column2d", "width": "800", "height": "350", "renderAt": "chart-container", "dataFormat": "json", "dataSource": initial_ds }).render(); }); }, renderBar: function() { FusionCharts.ready(function() { revenueChart1 = new FusionCharts({ "type": "bar2d", "width": "800", "height": "350", "renderAt": "chart-container", "dataFormat": "json", "dataSource": initial_ds }).render(); }); }, renderLine: function() { FusionCharts.ready(function() { revenueChart1 = new FusionCharts({ "type": "line", "width": "800", "height": "350", "renderAt": "chart-container", "dataFormat": "json", "dataSource": initial_ds }).render(); }); }, renderArea: function() { FusionCharts.ready(function() { revenueChart1 = new FusionCharts({ "type": "area2d", "width": "800", "height": "350", "renderAt": "chart-container", "dataFormat": "json", "dataSource": initial_ds }).render(); }); } } });A screenshot of the chart2-comp.js file, after including the above code, is shown in the image below:
{{chart2-comp}}
A screenshot of the chart2.hbs file, after including the above code, is shown in the image below: ember serve
Type the url localhost: 4200 in your browser (because 4200 is the default port being used). Then hit the URL – localhost:4200/ChartList/chart2 Output Your output should look as seen in the image below: 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…