{"id":16373,"date":"2017-10-16T17:09:30","date_gmt":"2017-10-16T11:39:30","guid":{"rendered":"http:\/\/www.fusioncharts.com\/blog\/?p=16373"},"modified":"2026-01-20T14:41:07","modified_gmt":"2026-01-20T09:11:07","slug":"charts-emberjs-web-application","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/","title":{"rendered":"Create Stunning Charts in EmberJS Web Application 2026"},"content":{"rendered":"EmberJS is a JavaScript based front-end framework that helps developers:\r\n<ul>\r\n \t<li>build websites with rich and complex user interactions<\/li>\r\n \t<li>manage the complexity in modern web applications.<\/li>\r\n<\/ul>\r\nThe open-source framework also comes with an integrated development toolkit that enables rapid developmental iterations. Ember projects are created and managed through the command line build tool Ember CLI.\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_71 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/#Key_features_of_EmberJS\" title=\"Key features of Ember.JS\">Key features of Ember.JS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/#Basic_concepts_related_to_EmberJS\" title=\"Basic concepts related to Ember.JS\">Basic concepts related to Ember.JS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/#About_FusionCharts\" title=\"About FusionCharts\">About FusionCharts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/#Prerequisites\" title=\"Prerequisites\">Prerequisites<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/#Steps_to_render_a_chart_using_an_EmberJS_component_within_an_EmberJS_web_app\" title=\"Steps to render a chart using an EmberJS component within an EmberJS web app\">Steps to render a chart using an EmberJS component within an EmberJS web app<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/#Step_1\" title=\"Step 1\">Step 1<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/#Step_2\" title=\"Step 2\">Step 2<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/#Step_3\" title=\"Step 3\">Step 3<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/#Step_4\" title=\"Step 4\">Step 4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/#Step_5\" title=\"Step 5\">Step 5<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/#Step_6\" title=\"Step 6\">Step 6<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Key_features_of_EmberJS\"><\/span>Key features of Ember.JS<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<ul>\r\n \t<li>EmberJS implements the Model View Controller (MVC) architecture for an application; the structure is auto-generated every time a new EmberJS application is created using the CLI.<\/li>\r\n \t<li>EmberJS incorporates the commonly followed programming idioms and best practices, thus enabling developers to come up with scalable single-page web applications.<\/li>\r\n \t<li>Although it was primarily designed to be a framework for the web, EmberJS can also be used for creating mobile and desktop applications.<\/li>\r\n \t<li>EmberJS has a pluggable architecture that aids in enhancing and extending the capabilities of the framework.<\/li>\r\n \t<li>The EmberJS framework maintains backward compatibility even as it continues to evolve.<\/li>\r\n<\/ul>\r\n<h2><span class=\"ez-toc-section\" id=\"Basic_concepts_related_to_EmberJS\"><\/span>Basic concepts related to Ember.JS<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<strong>Routes<\/strong>\u00a0&#8211; In Ember, a URL is used to represent the application\u2019s state. A route object, corresponding to each URL, is used to control what is visible to the user. Routes are useful for redirecting towards the several route templates within the same application by hitting the URL appending the route names.\r\n\r\n<strong>Models<\/strong>\u00a0&#8211; A model contains data about an application\u2019s state. Each model is associated with a route.\r\n\r\n<strong>Templates<\/strong>\u00a0&#8211; To ease the setup and configuration of the MVC architecture, EmberJS comes with templates written in Handlebars that help define what the user interface looks like.\r\n\r\n<strong>Components<\/strong>\u00a0&#8211; The component controls the behaviour of the user interface and consists of two parts:\r\n\r\n<strong>HBS<\/strong>\u00a0&#8211; a template that defines the UI of the page\r\n\r\n<strong>Controller<\/strong>\u00a0&#8211; a source file written in JavaScript that defines the behavior of the UI\r\n\r\nIn this article, we are using components to modify a chart that is rendered in the UI template file. These components can also be reused for UI visualization in other templates.\r\n\r\n&nbsp;\r\n<h2><span class=\"ez-toc-section\" id=\"About_FusionCharts\"><\/span>About FusionCharts<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<a href=\"https:\/\/www.fusioncharts.com\/?utm_source=fcbrew&amp;utm_campaign=emberjs\">FusionCharts Suite XT<\/a> is a JavaScript based charting solution that runs on desktop and mobile platforms. The various charts and maps that are a part of the charting library enable effective data analysis through data visualization. The library also includes several basic and advanced configuration options that help to add value to the data being showcased.\r\n<h2><span class=\"ez-toc-section\" id=\"Prerequisites\"><\/span>Prerequisites<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nBefore we proceed with seeing how you can integrate FusionCharts with an EmberJS application, you need to:\r\n<ul>\r\n \t<li>Have a basic understanding of HTML, CSS, JavaScript, and Document Object Model (DOM)<\/li>\r\n \t<li><a href=\"https:\/\/nodejs.org\/en\/download\/\" target=\"_blank\" rel=\"nofollow noopener\">Download<\/a>\u00a0and\u00a0<a href=\"https:\/\/nodesource.com\/blog\/installing-nodejs-tutorial-windows\/\" target=\"_blank\" rel=\"nofollow noopener\">install<\/a>\u00a0NodeJS (NPM) to make use of the Command Line Interface (CLI)<\/li>\r\n \t<li>Install Ember CLI via NPM (Installation details in the steps below)<\/li>\r\n \t<li>Download\u00a0<a href=\"https:\/\/www.fusioncharts.com\/download\/?utm_source=fcbrew&amp;utm_campaign=emberjs\" target=\"_blank\" rel=\"nofollow noopener\">FusionCharts<\/a><\/li>\r\n<\/ul>\r\n<h2><span class=\"ez-toc-section\" id=\"Steps_to_render_a_chart_using_an_EmberJS_component_within_an_EmberJS_web_app\"><\/span>Steps to render a chart using an EmberJS component within an EmberJS web app<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_1\"><\/span>Step 1<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nInstall NodeJS (if not installed already)\r\n<h3><span class=\"ez-toc-section\" id=\"Step_2\"><\/span>Step 2<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nInstall Ember CLI.\r\nTo do this:\r\nGo the directory in which you want to setup your project.\r\nExecute the following command from the command prompt:\r\n\r\n<code>npm\u00a0install -g ember-cli<\/code>\r\n\r\nAfter EmberJS is installed successfully, use the following command to check the version details:\r\n\r\n<code>ember -v<\/code>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_3\"><\/span>Step 3<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nCreate a new Ember Project, named TestEmber, using the following command:\r\n\r\n<code>ember\u00a0new TestEmber<\/code>\r\n\r\nWhen the project is created, the file structure for the Ember project is automatically generated in the working directory.\r\n\r\nThe file structure of the Ember project, TestEmber, looks as shown in the image below:\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-1-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16394\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-1-1.png\" alt=\"\" width=\"478\" height=\"398\" srcset=\"\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-1-1.png 478w, \/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-1-1-150x125.png 150w\" sizes=\"auto, (max-width: 478px) 100vw, 478px\" \/><\/a>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_4\"><\/span>Step 4<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nRun the project.\r\nTo start running the project:\r\nStart the server using the following command:\r\n\r\n<code>ember serve<\/code>\r\nType the url localhost: 4200 in your browser (because 4200 is the default port being used).\r\nYour project is running successfully if you can see the Ember landing page, as shown in the image below:\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16395\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-2.png\" alt=\"\" width=\"1366\" height=\"725\" srcset=\"\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-2.png 1366w, \/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-2-150x80.png 150w\" sizes=\"auto, (max-width: 1366px) 100vw, 1366px\" \/><\/a>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_5\"><\/span>Step 5<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nInstall FusionCharts via NPM in the TestEmber project directory, using the following command:\r\n\r\n<code>npm install fusioncharts<\/code>\r\n\r\nThe <code>node_modules<\/code> folder will now have the entire FusionCharts library within it.\r\n<h3><span class=\"ez-toc-section\" id=\"Step_6\"><\/span>Step 6<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nInclude the required JavaScript files from <code>node_modules<\/code> into the TestEmber\u00a0project.\r\nTo do this, include the following import statements in the <code>ember-cli-build.js<\/code> \u00a0file:\r\n<pre class=\"lang:js decode:true\">app.import(\u201cnode_modules\/fusioncharts\/fusioncharts.js\u201d);  \r\napp.import(\u201cnode_modules\/fusioncharts\/fusioncharts.charts.js\u201d);  \r\napp.import(\"node_modules\/fusioncharts\/themes\/fusioncharts.theme.zune.js\");<\/pre>\r\n<span style=\"font-weight: 400\">A screenshot of the <\/span><b>ember-cli-build.js<\/b><span style=\"font-weight: 400\"> file, after including the above set of commands, is shown in the image below:<\/span>\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16396\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-3.png\" alt=\"\" width=\"1101\" height=\"550\" srcset=\"\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-3.png 1101w, \/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-3-150x75.png 150w\" sizes=\"auto, (max-width: 1101px) 100vw, 1101px\" \/><\/a>\r\n\r\n<strong>Step 7<\/strong>\r\nCreate routes in the TestEmber project.\r\n\r\nTo generate a &#8220;route&#8221; in the TestEmber project use the following command :\r\n\r\n<code>ember g route ChartList\/chart2<\/code>\r\nThis 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.\r\n\r\nThe .js file is the route handler file, which defines what should happen when the route template is loaded.\r\n\r\nThe .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.\r\n\r\n<span style=\"font-weight: 400\">The directory structure of the <\/span><b>TestEmber <\/b><span style=\"font-weight: 400\">project now looks as shown in the image below:<\/span>\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16397\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-4.png\" alt=\"\" width=\"473\" height=\"480\" srcset=\"\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-4.png 473w, \/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-4-148x150.png 148w\" sizes=\"auto, (max-width: 473px) 100vw, 473px\" \/><\/a>\r\n\r\n<strong>Step 8<\/strong>\r\nCreate the component for the TestEmber project using the following command:\r\n\r\n<code>ember g component chart2-comp<\/code>\r\nUpon execution of the above command, the directory structure of the TestEmber project will be modified to include the components.\r\n\r\n<span style=\"font-weight: 400\">The modified directory structure looks as shown in the image below:<\/span>\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16398\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-5.png\" alt=\"\" width=\"460\" height=\"493\" srcset=\"\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-5.png 460w, \/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-5-140x150.png 140w\" sizes=\"auto, (max-width: 460px) 100vw, 460px\" \/><\/a>\r\n\r\n<strong>Step 9<\/strong>\r\nDefine the UI and its behavior.\r\n\r\nThe image below shows the intended UI visualization for this sample:\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-6.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16399\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-6.png\" alt=\"\" width=\"823\" height=\"677\" srcset=\"\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-6.png 823w, \/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-6-150x123.png 150w\" sizes=\"auto, (max-width: 823px) 100vw, 823px\" \/><\/a>\r\n\r\nBased on this visualization, you need to:\r\n<ul>\r\n \t<li>Create charts and a button corresponding to each chart. Click the button to render the chart.<\/li>\r\n \t<li>Provide a text area where the user can enter the data source for a custom chart. Add a button to render the chart when clicked.<\/li>\r\n<\/ul>\r\nTo define this UI, copy the following code and paste it into the chart2-comp.hbs file:\r\n<pre class=\"lang:js decode:true \">&lt;button {{action 'renderColumn'}} id=\"rendcolumn\"&gt;Column chart&lt;\/button&gt;  \r\n&lt;button {{action 'renderBar'}} id=\"rendbar\"&gt;Bar chart&lt;\/button&gt;  \r\n&lt;button {{action 'renderLine'}} id=\"rendline\"&gt;Line chart&lt;\/button&gt;  \r\n&lt;button {{action 'renderArea'}} id=\"rendarea\"&gt;Area chart&lt;\/button&gt;  \r\n&lt;br&gt;&lt;br&gt;  \r\n&lt;form&gt;  \r\n    &lt;div id=\"chart-container\"&gt;FusionCharts will render here&lt;\/div&gt;  \r\n    &lt;br&gt;  \r\n    &lt;div&gt;  \r\n        &lt;label&gt;Enter your own DataSource and click the button : &lt;\/label&gt;&lt;br&gt;  \r\n        {{textarea value=myds  rows=\"8\" cols=\"99\" placeholder=\"Enter the dataSource here without \/* or \/\/ comments\"}}  \r\n    &lt;\/div&gt;  \r\n      \r\n    &lt;button {{action 'renderChart'}} id=\"rend\"&gt;Render Chart&lt;\/button&gt;  \r\n&lt;\/form&gt;<\/pre>\r\n<span style=\"font-weight: 400\">A screenshot of the <\/span><b>chart2-comp.hbs<\/b><span style=\"font-weight: 400\"> file, after including the above code, is shown in the image below:<\/span>\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-7.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16400\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-7.png\" alt=\"\" width=\"1252\" height=\"623\" srcset=\"\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-7.png 1252w, \/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-7-150x75.png 150w\" sizes=\"auto, (max-width: 1252px) 100vw, 1252px\" \/><\/a>\r\n\r\nWhen you click the button for a chart type, the corresponding chart will be rendered based on the actions defined in the chart2-comp.js file in the App\/Components folder.\r\n\r\nSimilarly, when the data source is entered in the text area field and the corresponding button is clicked, the data source is fetched and passed to the <code>chart2-comp.js<\/code> file, via the action specified for the button.\r\n\r\nTo define this behavior of the UI, copy the following code and paste it in the <code>chart2-comp.js<\/code> file:\r\n<pre class=\"lang:js decode:true \">import Ember from 'ember';  \r\n  \r\nvar revenueChart1;  \r\nvar initial_ds =   \r\n{  \r\n    \"chart\": {  \r\n        \"caption\": \"Worlds Top 10 Highest paid\",  \r\n        \"subCaption\": \"Soccer Players 2017\",  \r\n        \"yAxisName\": \"Earnings (In USD)\",  \r\n        \"numberPrefix\": \"$\",  \r\n          \r\n        \/\/Cosmetics  \r\n                  \"captionpadding\": \"30\",  \r\n                     \"yaxisname\": \"Estimated fans\",  \r\n                     \"rotatevalues\": \"0\",  \r\n                     \"divlinecolor\": \"#CCCCCC\",  \r\n                     \"yaxisvaluespadding\": \"15\",  \r\n                     \"valuefontbold\": \"1\",  \r\n                     \"labelsepchar\": \": \",  \r\n                     \"labeldisplay\": \"AUTO\",  \r\n                     \"numberscalevalue\": \"1000,1000,1000\",  \r\n                     \"numberscaleunit\": \"K,M,B\",  \r\n                     \"animation\": \"0\",  \r\n                     \"palettecolors\": \"e44a00\",  \r\n                     \"theme\": \"zune\",  \r\n                     \"valueBgAlpha\": \"0\",  \r\n          \r\n                     \"usePlotGradientColor\": \"0\"  \r\n    },  \r\n    \"data\": [  \r\n        {  \r\n            \"label\": \"CR7\",  \r\n            \"value\": \"93000000\",  \r\n            \"alpha\": \"100\"  \r\n        },   \r\n        {  \r\n            \"label\": \"Messi\",  \r\n            \"value\": \"80000000\",  \r\n            \"alpha\": \"85\"  \r\n        },   \r\n        {  \r\n            \"label\": \"Neymar\",  \r\n            \"value\": \"37000000\",  \r\n            \"alpha\": \"75\"  \r\n        },   \r\n        {  \r\n            \"label\": \"Gareth{br}Bale\",  \r\n            \"value\": \"34000000\",  \r\n            \"alpha\": \"65\"  \r\n        },   \r\n        {  \r\n            \"label\": \"Zlatan{br}Ibrhimovic\",  \r\n            \"value\": \"32000000\",  \r\n            \"alpha\": \"56\"  \r\n        },   \r\n        {  \r\n            \"label\": \"Wayne{br}Rooney\",  \r\n            \"value\": \"23600000\",  \r\n            \"alpha\": \"50\"  \r\n        },   \r\n        {  \r\n            \"label\": \"Luis Suarez\",  \r\n            \"value\": \"23300000\",  \r\n            \"alpha\": \"45\"  \r\n        },   \r\n        {  \r\n            \"label\": \"Sergio{br}Aguero\",  \r\n            \"value\": \"13700000\",  \r\n            \"alpha\": \"35\"  \r\n        },   \r\n        {  \r\n            \"label\": \"James{br}Rodriguez\",  \r\n            \"value\": \"29100000\",  \r\n            \"alpha\": \"30\"  \r\n        },   \r\n        {  \r\n            \"label\": \"Paul{br}Pogba\",  \r\n            \"value\": \"21200000\",  \r\n            \"alpha\": \"20\"  \r\n        }  \r\n    ]  \r\n};  \r\n  \r\n  \r\nexport default Ember.Component.extend({  \r\n  \r\n    actions: {  \r\n        renderChart: function() {  \r\n  \r\n            var ds = this.get('myds');  \r\n  \r\n            revenueChart1.setJSONData(ds);  \r\n        },  \r\n  \r\n        renderColumn: function() {  \r\n            FusionCharts.ready(function() {  \r\n                revenueChart1 = new FusionCharts({  \r\n                    \"type\": \"column2d\",  \r\n                    \"width\": \"800\",  \r\n                    \"height\": \"350\",  \r\n                    \"renderAt\": \"chart-container\",  \r\n                    \"dataFormat\": \"json\",  \r\n                    \"dataSource\": initial_ds  \r\n                }).render();  \r\n            });  \r\n        },  \r\n  \r\n        renderBar: function() {  \r\n            FusionCharts.ready(function() {  \r\n                revenueChart1 = new FusionCharts({  \r\n                    \"type\": \"bar2d\",  \r\n                    \"width\": \"800\",  \r\n                    \"height\": \"350\",  \r\n                    \"renderAt\": \"chart-container\",  \r\n                    \"dataFormat\": \"json\",  \r\n                    \"dataSource\": initial_ds  \r\n                }).render();  \r\n            });  \r\n        },  \r\n  \r\n        renderLine: function() {  \r\n            FusionCharts.ready(function() {  \r\n                revenueChart1 = new FusionCharts({  \r\n                    \"type\": \"line\",  \r\n                    \"width\": \"800\",  \r\n                    \"height\": \"350\",  \r\n                    \"renderAt\": \"chart-container\",  \r\n                    \"dataFormat\": \"json\",  \r\n                    \"dataSource\": initial_ds  \r\n                }).render();  \r\n            });  \r\n        },  \r\n  \r\n        renderArea: function() {  \r\n            FusionCharts.ready(function() {  \r\n                revenueChart1 = new FusionCharts({  \r\n                    \"type\": \"area2d\",  \r\n                    \"width\": \"800\",  \r\n                    \"height\": \"350\",  \r\n                    \"renderAt\": \"chart-container\",  \r\n                    \"dataFormat\": \"json\",  \r\n                    \"dataSource\": initial_ds  \r\n                }).render();  \r\n            });  \r\n        }  \r\n    }  \r\n});<\/pre>\r\n<span style=\"font-weight: 400\">A screenshot of the <\/span><b>chart2-comp.js<\/b><span style=\"font-weight: 400\"> file, after including the above code, is shown in the image below:<\/span>\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-8.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16401\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-8.png\" alt=\"\" width=\"998\" height=\"686\" srcset=\"\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-8.png 998w, \/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-8-150x103.png 150w\" sizes=\"auto, (max-width: 998px) 100vw, 998px\" \/><\/a>\r\n\r\n<strong>Note:<\/strong>\r\n<em>The actions for buttons must be defined in the component file (chart2-comp.js). This can be seen in the image above.<\/em>\r\n<em>The component name must have a hyphen (-) in it. This is the nomenclature followed by Ember in order to identify a component.<\/em>\r\n\r\n<strong>Step 10<\/strong>\r\nComponents, once created, can be reused in several different templates. We will include the component created above in the routes template that was created in Step 7.\r\n\r\nTo do this, add the following code to the chart2.hbs file:\r\n<code>{{chart2-comp}}<\/code>\r\n\r\n<span style=\"font-weight: 400\">A screenshot of the <\/span><b>chart2.hbs<\/b><span style=\"font-weight: 400\"> file, after including the above code, is shown in the image below:<\/span>\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-9.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16402\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-9.png\" alt=\"\" width=\"847\" height=\"456\" srcset=\"\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-9.png 847w, \/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-9-150x81.png 150w\" sizes=\"auto, (max-width: 847px) 100vw, 847px\" \/><\/a>\r\n\r\n<strong>Step 11<\/strong>\r\nSave all the files and run the project.\r\n\r\nTo run the project:\r\n\r\nStart the server using the following command:\r\n<code>ember serve<\/code>\r\n\r\nType the url localhost: 4200 in your browser (because 4200 is the default port being used).\r\n\r\nThen hit the URL &#8211; localhost:4200\/ChartList\/chart2\r\n\r\n<strong>Output<\/strong>\r\nYour output should look as seen in the image below:\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-10.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16403\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-10.png\" alt=\"\" width=\"823\" height=\"677\" srcset=\"\/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-10.png 823w, \/blog\/wp-content\/uploads\/2017\/10\/ember-fusioncharts-10-150x123.png 150w\" sizes=\"auto, (max-width: 823px) 100vw, 823px\" \/><\/a>\r\n\r\nIf you followed the steps closely, you\u2019ll get output as shown above. If you still face problems, you can\u00a0<a href=\"https:\/\/www.dropbox.com\/s\/qv8k2zi4rm2ehwt\/Example%20EmberJS%20FusionCharts%20NPM.zip?dl=0\" target=\"_blank\" rel=\"nofollow noopener\">view the source code<\/a>.\r\n\r\n<strong>Troubleshooting:<\/strong>\r\nIf you are unable to see the chart, check that:\r\n*the chart ID is unique for all charts rendered on the same page or it will result in a JavaScript error.\r\n*the fusioncharts.js and other related library files are properly included (especially if the chart does not show up at all)\r\n*the path to the included files is correct and the files reside there\r\n*the chart alias names are correctly spelt.","protected":false},"excerpt":{"rendered":"<p>EmberJS is a JavaScript based front-end framework that helps developers: build websites with rich and complex user interactions manage the complexity in modern web applications. The open-source framework also comes with an integrated development toolkit that enables rapid developmental iterations. Ember projects are created and managed through the command line build tool Ember CLI. Key [&hellip;]<\/p>\n","protected":false},"author":39,"featured_media":16405,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"coauthors":[675,691],"class_list":["post-16373","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Create Stunning Charts In EmberJS Web Application<\/title>\n<meta name=\"description\" content=\"Master charting in EmberJS with our step-by-step guide. Create stunning, interactive charts for your 2026 Ember web applications. Download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Stunning Charts In EmberJS Web Application\" \/>\n<meta property=\"og:description\" content=\"Know all you need to know about charting in EmberJS in this step by step guide on how to create charts in EmberJS web application.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-10-16T11:39:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:11:07+00:00\" \/>\n<meta name=\"author\" content=\"Jonathan, Akash Biswas\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Create Stunning Charts In EmberJS Web Application\" \/>\n<meta name=\"twitter:description\" content=\"Know all you need to know about charting in EmberJS in this step by step guide on how to create charts in EmberJS web application.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/10\/ember-js-fusioncharts.png\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jonathan, Akash Biswas\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Jonathan\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/14fbfb07e81bfbcd524a4202f34bdcbb\"\n\t            },\n\t            \"headline\": \"Create Stunning Charts in EmberJS Web Application 2026\",\n\t            \"datePublished\": \"2017-10-16T11:39:30+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:11:07+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/\"\n\t            },\n\t            \"wordCount\": 1296,\n\t            \"commentCount\": 0,\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2017\/10\/ember-js-fusioncharts.png\",\n\t            \"articleSection\": [\n\t                \"Tutorials\"\n\t            ],\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"CommentAction\",\n\t                    \"name\": \"Comment\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/\",\n\t            \"name\": \"Create Stunning Charts In EmberJS Web Application\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\"\n\t            },\n\t            \"primaryImageOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2017\/10\/ember-js-fusioncharts.png\",\n\t            \"datePublished\": \"2017-10-16T11:39:30+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:11:07+00:00\",\n\t            \"description\": \"Master charting in EmberJS with our step-by-step guide. Create stunning, interactive charts for your 2026 Ember web applications. Download the source code.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"ImageObject\",\n\t            \"inLanguage\": \"en-US\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2017\/10\/ember-js-fusioncharts.png\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2017\/10\/ember-js-fusioncharts.png\",\n\t            \"width\": 760,\n\t            \"height\": 300,\n\t            \"caption\": \"Create charts in Ember JS\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.fusioncharts.com\/blog\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"Create Stunning Charts in EmberJS Web Application 2026\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"name\": \"FusionBrew - The FusionCharts Blog\",\n\t            \"description\": \"Get tips and tricks on how to build effective Data Visualisation using FusionCharts\",\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\",\n\t            \"name\": \"FusionCharts\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"width\": 1,\n\t                \"height\": 1,\n\t                \"caption\": \"FusionCharts\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/14fbfb07e81bfbcd524a4202f34bdcbb\",\n\t            \"name\": \"Jonathan\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/0b58dff9af412d6ac90a1569df4d596c\",\n\t                \"url\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg\",\n\t                \"caption\": \"Jonathan\"\n\t            },\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/author\/jonathan\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create Stunning Charts In EmberJS Web Application","description":"Master charting in EmberJS with our step-by-step guide. Create stunning, interactive charts for your 2026 Ember web applications. Download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/","og_locale":"en_US","og_type":"article","og_title":"Create Stunning Charts In EmberJS Web Application","og_description":"Know all you need to know about charting in EmberJS in this step by step guide on how to create charts in EmberJS web application.","og_url":"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2017-10-16T11:39:30+00:00","article_modified_time":"2026-01-20T09:11:07+00:00","author":"Jonathan, Akash Biswas","twitter_card":"summary_large_image","twitter_title":"Create Stunning Charts In EmberJS Web Application","twitter_description":"Know all you need to know about charting in EmberJS in this step by step guide on how to create charts in EmberJS web application.","twitter_image":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/10\/ember-js-fusioncharts.png","twitter_misc":{"Written by":"Jonathan, Akash Biswas","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/"},"author":{"name":"Jonathan","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/14fbfb07e81bfbcd524a4202f34bdcbb"},"headline":"Create Stunning Charts in EmberJS Web Application 2026","datePublished":"2017-10-16T11:39:30+00:00","dateModified":"2026-01-20T09:11:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/"},"wordCount":1296,"commentCount":0,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2017\/10\/ember-js-fusioncharts.png","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/","url":"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/","name":"Create Stunning Charts In EmberJS Web Application","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2017\/10\/ember-js-fusioncharts.png","datePublished":"2017-10-16T11:39:30+00:00","dateModified":"2026-01-20T09:11:07+00:00","description":"Master charting in EmberJS with our step-by-step guide. Create stunning, interactive charts for your 2026 Ember web applications. Download the source code.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2017\/10\/ember-js-fusioncharts.png","contentUrl":"\/blog\/wp-content\/uploads\/2017\/10\/ember-js-fusioncharts.png","width":760,"height":300,"caption":"Create charts in Ember JS"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/charts-emberjs-web-application\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create Stunning Charts in EmberJS Web Application 2026"}]},{"@type":"WebSite","@id":"https:\/\/www.fusioncharts.com\/blog\/#website","url":"https:\/\/www.fusioncharts.com\/blog\/","name":"FusionBrew - The FusionCharts Blog","description":"Get tips and tricks on how to build effective Data Visualisation using FusionCharts","publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.fusioncharts.com\/blog\/#organization","name":"FusionCharts","url":"https:\/\/www.fusioncharts.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/","url":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","contentUrl":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","width":1,"height":1,"caption":"FusionCharts"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/14fbfb07e81bfbcd524a4202f34bdcbb","name":"Jonathan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/0b58dff9af412d6ac90a1569df4d596c","url":"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg","contentUrl":"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg","caption":"Jonathan"},"url":"https:\/\/www.fusioncharts.com\/blog\/author\/jonathan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/16373","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/users\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/comments?post=16373"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/16373\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media\/16405"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=16373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=16373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=16373"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=16373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}