Create Charts in JavaScript

This document shows you how to install the FroalaCharts library and all the other dependencies on your system and render a chart using Plain JavaScript.

Prerequisites

If you are using Froalacharts dependencies from CDN or Local Files, you can skip to the next section.

If you choose to install the froalacharts package via npm, make sure you have Node.js installed in your system. Make sure you have a bundler like webpack and parcel or have browserify installed in your system.

Installation and including dependencies

You can install the froalacharts components following any of the methods below:

CDN

Local Files

NPM

CDN

To install the FroalaCharts follow these steps:

Include the FroalaCharts JavaScript files from CDN in your static HTML file.
Include the theme file.

Use the following code:

<head>
  <script type="text/javascript" src="https://unpkg.com/[email protected]/froalacharts.js"></script>
  <script type="text/javascript" src="https://unpkg.com/[email protected]/themes/froalacharts.theme.froala.js"></script>
</head>

Local Files

To install FroalaCharts follow the steps below:

Include the FroalaCharts JavaScript files, which can be downloaded from here.
Include the FroalaCharts theme file to apply style to the charts.

The code that goes into your static HTML file is shown below:

<head>
  <script type="text/javascript" src="path/to/local/froalacharts.js"></script>
  <script type="text/javascript" src="path/to/local/themes/froala.theme.froala.js"></script>
</head>

NPM

Create a project folder using the following command:

$ mkdir projectName
$ cd projectName

To install the latest webpack release, run the following command:

$ npm install webpack webpack-cli --save-dev

To install the froalacharts package via npm run the command below:

$ npm install froalacharts

Now create the following directory structure, files and their contents:

Create a src folder inside the project directory. Within the src folder, create an index.js file.
Create a dist folder inside the project directory. Within the dist folder, create an index.html file.

After installing the froalacharts components, you can replace the code in index.js file with the code shown in the steps below to create your first chart. Import all the required dependencies to get started.

// Include the core froalacharts file from core
import FroalaCharts from 'froalacharts/core';
// Include the froala theme
import FroalaTheme from 'froalacharts/themes/es/froalacharts.theme.froala';
// Add the theme as dependency
FroalaCharts.addDep(FroalaTheme);

Preparing the data

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

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.

Quarter	Revenues
Q1	10000
Q2	11500
Q3	12500
Q4	15000

FroalaCharts accepts the data in JSON format. The data for the chart is represented in the following way:

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
  }
};

Find the complete list of chart types with their respective alias here.

Render the chart

The consolidated code to render the chart is shown below:

CDN

Local Files

NPM

CDN

<html>

<head>
  <title>My first chart using Froala Charts</title>
  <script src="https://unpkg.com/[email protected]/froalacharts.js"></script>
  <script src="https://unpkg.com/[email protected]/themes/froalacharts.theme.froala.js"></script>
  <script type="text/javascript">
  // Chart Data 
  const chartData = [
  {
    data: [
    {
      value: "10000",
    },
    {
      value: "11500",
    },
    {
      value: "12500",
    },
    {
      value: "15000",
    }]
  }];
  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
    }
  };
  FroalaCharts.ready(function()
  {
    froalacharts = new FroalaCharts(chartConfig);
    froalacharts.render();
  });
  </script>
</head>

<body>
  <div id="ft">Froala Charts will load here!</div>
</body>

</html>

Local Files

<html>

<head>
  <title>My first chart using Froala Charts</title>
  <script type="text/javascript" src="path/to/local/froalacharts.js"></script>
  <script type="text/javascript" src="path/to/local/themes/froala.theme.froala.js"></script>
  <script type="text/javascript">
  // Chart Data 
  const chartData = [
  {
    data: [
    {
      value: "10000",
    },
    {
      value: "11500",
    },
    {
      value: "12500",
    },
    {
      value: "15000",
    }]
  }];
  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
    }
  };
  FroalaCharts.ready(function()
  {
    froalacharts = new FroalaCharts(chartConfig);
    froalacharts.render();
  });
  </script>
</head>

<body>
  <div id="ft">Froala Charts will load here!</div>
</body>

</html>

NPM

The froalacharts package for npm can be used in two different ways:

FroalaCharts ES module
FroalaCharts CJS module

The steps to render the chart for both the modules are shown below:

In index.js include the necessary files and import the froalacharts dependency. The consolidated code is shown below:

ES6

// Include the core froalacharts file from core - 
import FroalaCharts from 'froalacharts/core';
// Include the froala theme 
import FroalaTheme from 'froalacharts/themes/es/froalacharts.theme.froala';
// Add the theme as dependency
FroalaCharts.addDep(FroalaTheme);
// Chart Data 
const chartData = [
{
  data: [
  {
    value: "10000",
  },
  {
    value: "11500",
  },
  {
    value: "12500",
  },
  {
    value: "15000",
  }]
}];
//Chart Configurations
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
  }
};
//Create an Instance with chart options and render the chart
var chartInstance = new FroalaCharts(chartConfig);
chartInstance.render();

CJS

var FroalaCharts = require('froalacharts');
// Require theme from froalacharts
var FroalaTheme = require('froala/themes/froalacharts.theme.froala');
// Add charts and themes as dependency
FroalaTheme(FroalaCharts);
//Chart Data
const chartData = [
{
  data: [
  {
    value: "10000",
  },
  {
    value: "11500",
  },
  {
    value: "12500",
  },
  {
    value: "15000",
  }]
}];
//Chart Configurations
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
  }
};
// Create an Instance with chart options and render
var chartInstance = new FusionCharts(chartConfig);
chartInstance.render();

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.