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:
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/froalacharts@1.0.0/froalacharts.js"></script>
<script type="text/javascript" src="https://unpkg.com/froalacharts@1.0.0/themes/froalacharts.theme.froala.js"></script>
</head>- Include the FroalaCharts JavaScript files, which can be downloaded from here.
- Include the FroalaCharts theme file to apply style to the charts.
<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>Create a project folder using the following command:
$ mkdir projectName
$ cd projectNameTo install the latest webpack release, run the following command:
$ npm install webpack webpack-cli --save-devTo install the froalacharts package via npm run the command below:
$ npm install froalachartsNow create the following directory structure, files and their contents:
- Create a
srcfolder inside the project directory. Within thesrcfolder, create anindex.jsfile. - Create a
distfolder inside the project directory. Within thedistfolder, create anindex.htmlfile.
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:
<html>
<head>
<title>My first chart using Froala Charts</title>
<script src="https://unpkg.com/froalacharts@1.0.0/froalacharts.js"></script>
<script src="https://unpkg.com/froalacharts@1.0.0/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><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>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.
