Create a Chart in Ember Using FusionCharts

The ember-fusioncharts component, provide bindings for FusionCharts JavaScript charting library. It lets you add interactive JavaScript charts and graphs to your web and mobile applications using EmberJS component.

On this page, we'll see how to install FusionCharts and render a chart using the ember-fusionCharts component.

Prerequisite

Before you begin, make sure your development environment includes Node.js and an npm package manager.

• Ember requires Node.js version 10.9.0 or later. To check your version, run node -v in a terminal/console window. To get Node.js, go to nodejs.org.

• To download and install npm packages, you must have an npm package manager. run npm -v in a terminal/console window, to check if have the npm client installed.

Follow the steps mentioned here to initiate the project using Ember CLI.

Installation and including dependencies

To install FusionCharts and the ember-fusioncharts component via npm follow the steps below:

npm install ember-fusioncharts fusioncharts --saveCOPY

Include the necessary files to add the fusioncharts dependencies in ember-cli-build.js file in the project root directory .

If you need to use different assets in different environments, specify an object as the first parameter. That object's keys should be the environment name and the values should be an asset to use in that environment.

/ _eslint-env node_ /;
("use strict");
const EmberApp = require("ember-cli/lib/broccoli/ember-app");
module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    // Add options here
  });

  // Import fusioncharts library
  app.import("node_modules/fusioncharts/fusioncharts.js");
  app.import("node_modules/fusioncharts/fusioncharts.charts.js");
  app.import("node_modules/fusioncharts/themes/fusioncharts.theme.fusion.js");

  // Use `app.import` to import additional libraries/files
  return app.toTree();
};COPY

Preparing the data

Let's create a chart showing the "Countries With Most Oil Reserves". The data of the oil reserves present in various countries is shown in tabular form below.

Since we are plotting a single dataset, let us create a column 2D chart with 'countries' as data labels along x-axis and 'No. of oil reserves' as data values along y-axis. Let us prepare the data for a single-series chart.

FusionCharts accepts the data in JSON format. So the above data in the tabular form will take the below shape.

// Preparing the chart data
const chartData = [
  {
    label: "Venezuela",
    value: "290"
  },
  {
    label: "Saudi",
    value: "260"
  },
  {
    label: "Canada",
    value: "180"
  },
  {
    label: "Iran",
    value: "140"
  },
  {
    label: "Russia",
    value: "115"
  },
  {
    label: "UAE",
    value: "100"
  },
  {
    label: "US",
    value: "30"
  },
  {
    label: "China",
    value: "30"
  }
];COPY

Configure your chart

Now that the data is ready, let's work on the styling, positioning and giving your chart a context.

// Create the datasource
const myDataSource = {
  // Chart Configuration
  chart: {
    caption: "Countries With Most Oil Reserves [2017-18]",
    subCaption: "In MMbbl = One Million barrels",
    xAxisName: "Country",
    yAxisName: "Reserves (MMbbl)",
    numberSuffix: "K",
    theme: "fusion"
  },
  // Chart Data - from step 2
  data: chartData
};COPY

The 'type' attribute in the chartConfigs object signifies the type of chart being rendered. Have a look at different chart types with their aliases here.

Render the chart

Get ready to render your first chart using ember-fusioncharts component finally with the steps below:

Step 1: Create a component and specify the chart data in chart-viewer.js file

ember g component chart-viewer && ember generate component-class chart-viewerCOPY

Set the chart's width, height, type and the dataSource in app/components/chart-viewer.js file.

import Component from "@ember/component";

// STEP 2 : Preparing the chart data
const chartData = [
  {
    label: "Venezuela",
    value: "290"
  },
  {
    label: "Saudi",
    value: "260"
  },
  {
    label: "Canada",
    value: "180"
  },
  {
    label: "Iran",
    value: "140"
  },
  {
    label: "Russia",
    value: "115"
  },
  {
    label: "UAE",
    value: "100"
  },
  {
    label: "US",
    value: "30"
  },
  {
    label: "China",
    value: "30"
  }
];

// STEP 3 : Set chart configurations
const myDataSource = {
  chart: {
    caption: "Countries With Most Oil Reserves [2017-18]",
    subCaption: "In MMbbl = One Million barrels",
    xAxisName: "Country",
    yAxisName: "Reserves (MMbbl)",
    numberSuffix: "K",
    theme: "fusion"
  },
  // Chart Data
  data: chartData
};

export default Component.extend({
  title: 'Ember FusionCharts Sample',
  width: 600,
  height: 400,
  type: 'column2d',
  dataFormat: 'json',
  dataSource: myDataSource
});COPY

Step 2: Add fusioncharts component to your chart-viewer.hbs template (present in app/components folder) to render the chart:

<h1>{{ title }}</h1>;
{{fusioncharts-xt
  width = width
  height = height
  type = type
  dataFormat = dataFormat
  dataSource = dataSource}}COPY

Step 3: Add chart-viewer component to your application.hbs template (present in app/templates folder):

{{chart-viewer}}
{{outlet}}COPY

See your chart

You should be able to see the chart as shown below.

If you are getting a JavaScript error on your page, check your browser console for the exact error and fix it accordingly.

If you are getting a this.$() error on the page, check this link and implement the jquery-integration to fix the error.

If you're unable to solve it, click here to get in touch with our support team.

That's it! Your first chart using ember-fusioncharts is ready.