Create a Chart in Ember

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

On this page, you'll see how to install Froala Charts and render a chart using the ember-froalacharts component.

Prerequisite

Before you begin, make sure your development environment includes Node.js and an npm package manager. Ember requires Node.js To download and install Node.js, please visit nodejs.org.

Find more about ember-cli here. To initiate an Ember project through ember-cli, follow the steps mentioned below:

Open a new terminal and execute the following command.

npm install -g ember-cli

Get started and create a new application using the command ember new.

ember new my-app
cd my-app
ember serve

my-app is the working directory where Ember Boilerplate will be installed along with all the utilities and dependencies.

Now, open http://localhost:4200 to see your Ember app.

Installation and Including Dependencies

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

Run the following command:

npm install ember-froalacharts froalacharts --save

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

Note: 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 froalacharts library
  app.import("node_modules/froalacharts/froalacharts.js");
  app.import("node_modules/froalacharts/themes/froalacharts.theme.froala.js");
 
  // Use `app.import` to import additional libraries/files
  return app.toTree();
};

Preparing the Data

Let's create a chart showing a "Comparison of Quarterly Revenue".

Quarter	Revenues
Q1	10000
Q2	11500
Q3	12500
Q4	15000

Since we are plotting a single dataset, create a column chart with 'Quarter' as data labels along the x-axis and 'Revenues (In USD)' as data values along y-axis.

Froala Charts accepts the data in JSON format.

const chartData = [
{
  data: [
  {
    value: "10000",
  },
  {
    value: "11500",
  },
  {
    value: "12500",
  },
  {
    value: "15000",
  }]
}];

Configure your Chart

Next, work on the styling, positioning and giving your chart a context.

// Create a JSON object to store the chart configurations
const chartConfig = {
  //Specify the chart type
  type: "column",
  //Set the container object
  renderAt: "ft",
  //Specify chart dimensions
  width: "800",
  height: "500",
  //Set the type of data
  dataSource: {
    chart: {
      //Set the theme for your chart
      theme: "froala",
      //Set the chart caption
      caption: "Comparison of Quarterly Revenue",
      //Set the x-axis name
      xAxisname: "Quarter",
      //Set the y-axis name
      yAxisName: "Revenues (In USD)",
      numberPrefix: "$",
    },
    categories: [
      {
        category: [
          {
            label: "Q1",
          },
          {
            label: "Q2",
          },
          {
            label: "Q3",
          },
          {
            label: "Q4",
          }
        ]
      }
    ],
    dataset: chartData
  }
};

Render the chart

Finally, get ready to render your first chart. Follow the steps mentioned 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-viewer

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

<script>
//Step 1 : import dependecies
import Component from "@ember/component";

//Step 2: preparing the chart Data
const chartData = [
{
  data: [
  {
    value: "10000",
  },
  {
    value: "11500",
  },
  {
    value: "12500",
  },
  {
    value: "15000",
  }]
}];

//Step 3 : Create your configuration object
const chartConfig = {
  type: "column",
  renderAt: "ft",
  width: "800",
  height: "500",
  dataSource:
  {
    chart:
    {
      theme: "froala",
      caption: "Comparison of Quarterly Revenue",
      xAxisname: "Quarter",
      yAxisName: "Revenues (In USD)",
      numberPrefix: "$",
    },
    categories: [
    {
      category: [
      {
        label: "Q1",
      },
      {
        label: "Q2",
      },
      {
        label: "Q3",
      },
      {
        label: "Q4",
      }]
    }],
    dataset: chartData
  }
};

export default Component.extend(
{
  title: "Ember Froala Charts Sample",
  width: 600,
  height: 400,
  type: "column",
  dataFormat: "json",
  dataSource: myDataSource
});

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

<h1>{{ title }}</h1>;
{
  {
    froalacharts;
    width = width;
    height = height;
    type = type;
    dataFormat = dataFormat;
    dataSource = dataSource;
  }
}

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

{
  {
    chart - viewer;
  }
}
{
  {
    outlet;
  }
}

See your chart

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

Froala Charts will load here!

Next Steps

Explore the List of Charts.

Dive into the API documentation.

Learn about other Concepts.