Create your First Chart

FusionTime is a JavaScript charting library that helps you visualize and explore time-series data. In FusionTime, you get lots of out-of-the-box interactivity, like, time navigator, date range selectors, tooltips with crosslines, interactive legend and more features which enhance the experience of exploring and understanding time series data.

In this article, you'll see how to install FusionTime and render your first time series chart.

Installation

Since FusionTime is distributed along with FusionCharts Suite, download the FusionCharts package to get access to FusionTime and other chart types of the FusionCharts Suite.

Install FusionTime using any of the following steps:

NPM
Local Files

To install FusionTime via npm run the command below:


    $ npm install fusioncharts

To install FusionTime follow the steps below:

Include the FusionCharts JavaScript files, which can be downloaded from here.

The code is shown below:


<head>
    <!-- Including the fusioncharts core library -->
    <script type="text/javascript" src="path/to/local/fusioncharts.js"></script>
</head>

That completes the installation of FusionTime.

Create a chart

Now that you have installed, it's time to create your first time series chart using FusionTime. To start with we will create a simple time-series chart showcasing Online sales of a SuperStore. The chart will look like as shown below:

Loading data for chart…

The data for the above chart is too big to be displayed here. The table below shows the sample data of the above chart:

Time	Sales
1/4/2011	16.448
1/5/2011	272.736
1/5/2011	11.784
1/5/2011	3.54
1/6/2011	19.536
1/7/2011	2573.82
1/7/2011	609.98

FusionTime accepts a Datatable as it's data source. DataTable, is a part of DataStore, is the tabular representation of data. To create the DataTable, you need to provide the following:

schema - which defines the properties of the columns.
data - values of each row and column of the DataTable

For an instance of FusionTime, you can create n number of dataTables, but only 1 dataStore.

Next, let's learn how to prepare the schema and the data of the DataTable.

Create the `schema`

The schema outlines each column represented in the above table. The schema contains an array which has multiple objects created in it. Each object represents a column in the DataTable.

name and type are mandatory keys for each object. If the object type is ‘time’ then format is also a mandatory key.

To define the schema, let's create a schema.json file and copy the following code:

It is not mandatory to create the schema in a different .json file. You can also define the schema within the .html file.

let schema = [{
    "name": "Time",
    "type": "date",
    "format": "%-m/%-d/%Y"
}, {
    "name": "Sales",
    "type": "number"
}]

In the above code:

schema is the variable in which the array is stored.
Each object of a schema maps to a column of the tabular representation of the data.
Each column in the DataTable is represented by a JSON object within the schema array. The JSON object has the following attributes:
- name - Specify the name of the column of the tabular representation of data.
- type - Specify the type of the column.
- format - Specify the input format of the date as per you data. In this example, the format is %-m/%-d/%Y. To know more on date formats click here.

Now that we have the schema ready for the DataTable let's learn how to put the data values into the DataTable.

Create `data`

Data can be provided either in JSON format or 2D array format. We will use the 2D array format.

Data for the above chart is too big to be shown here. A sample of it has been used in the data object defined below:

let data = [
    [
        "1/4/2011",
        16.448
    ],
    [
        "1/5/2011",
        272.736
    ],
    [
        "1/5/2011",
        11.784
    ],
    [
        "12/31/2014",
        20.72
    ],
    [
        "12/31/2014",
        13.904
    ],
    [
        "12/31/2014",
        3.024
    ]
]

Create a new data.json file, and copy the complete data from here.

It is not mandatory to create a data.json file. You could also do the same in your HTML file.

In the above code:

data is the variable in which the data array is stored.
Each object in the data array corresponds to a row in the tabular representation of the data.
Each element in an object is represented by each object of the schema. The values in each object of the array represent the following:
- Time according to the format
- Total Sales amount

We are all set with our data to create the chart.

By default, FusionTime applies the average function to aggregate the data and display on the chart. You can change the aggregate function from average to any other numeric calculation. To know more click here.

Now, let's create the .html file to render the above chart.

Create `index` file

Once the schema and data files are ready it is time to create the DataTable and render the chart. To do this, create an index file and copy the following code:

NPM
Local Files


import FusionCharts from 'fusioncharts/core';
import TimeSeries from 'fusioncharts/viz/timeseries';
import DataStore from 'fusioncharts/datastore';

import data from './data';
import schema from './schema';

FusionCharts.addDep(TimeSeries);

let fusionDataStore = new DataStore();
let fusionTable = fusionDataStore.createDataTable(data, schema);

window.charInstance = new FusionCharts({
    type: 'timeseries',
    renderAt: 'container',
    width: "90%",
    height: 650,
    dataSource: {
        data: fusionTable,
        caption: {
            text: 'Online Sales of a SuperStore'
        }
    }
});


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Create your First Chart</title>
  <style type="text/css">
  #container {
    width: 700px;
  }
  </style>
</head>

<body>
  <div id="container"></div>
  <script src="path/to/local/fusioncharts.js"></script>
  <script src="path/to/local/data.js"></script>
  <script src="path/to/local/schema.js"></script>
  <script>
    let fusionDataStore = new FusionCharts.DataStore();
    let fusionTable = fusionDataStore.createDataTable(data, schema);

    new FusionCharts({
        type: 'timeseries',
        renderAt: 'container',
        width: "90%",
        height: 650,
        dataSource: {
            data: fusionTable,
            "yAxis": [{
                "plot": {
                    "title": 'Sales ($)'
                }
            }],
            caption: {
                text: 'Online Sales of a SuperStore in the US'
            }
        }
    }).render()
  </script>
</body>

</html>

In the above code:

Include fusioncharts.js file.
Include data.json and schema.json files.
Create an empty storage as fusionDataStore using FusionCharts.DataStore.
Create a DataTable within the empty storage using fusionDataStore.createDataTable and pass the schema and data to the the DataTable.
Define the chart configuration in the FusionCharts constructor:
- Set the type as timeseries.
- Set the chart container as container using the renderAt property.
- Set the width and height (in pixels).
- Set the name of the DataTable as the value of the data property of dataSource.
- Set the data to create the chart.
- Specify the caption of the chart using text attribute in caption object.

That's it! Your first chart using FusionTime is ready.

Next, we will discuss on how to create a multivariate chart.

Create your First Chart

Installation

Create a chart

Create the `schema`

Create `data`

Create `index` file

Hi, I am Debargho. I wrote this article.

Explore

Integrations

Developers

Pricing

Resources

Company

Create your First Chart

Installation

Create a chart

Create the schema

Create data

Create index file

Hi, I am Debargho. I wrote this article.

Create the `schema`

Create `data`

Create `index` file