Add Multiple Data Plots

Previously, we have learned how to create a simple chart with one plot type. FusionTime allows you to visualize charts with multiple plots.

In this article, we'll create our first chart with multiple plots which will compare online sales of SuperStore in the US and India.

The chart is shown below:

FusionTime will load here..

Create the `schema`

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

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

To understand the schema.json in details click here .

Create `data`

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

let data = [
    [
        "United States",
        "1/4/2011",
        16.448
    ],
    [
        "United States",
        "1/5/2011",
        272.736
    ],
    [
        "United States",
        "1/5/2011",
        11.784
    ],
    ...
    ...
    [
        "India",
        "12/31/2014",
        364.59
    ],
    [
        "India",
        "12/31/2014",
        72
    ],
    [
        "India",
        "12/31/2014",
        39.42
    ]
]

To view the full data click here

In the above code:

data is the variable in which the data array is saved.
For each data plots in the chart, an array is created which consists of values (sub-array) for each row in the DataTable. The values in the sub-array represent:
- Name of the two countries as USA and India.
- Time according to the format.
- Value of the data plots, i.e., sales per date.

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 .

Create the `index` file

Creating a chart with multiple plots is very simple in FusionTime. You just need to specify the column name in the series attribute within y-axis object. 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 FusionCharts.DataStore();
let fusionTable = fusionDataStore.createDataTable(data, schema);

window.charInstance = new FusionCharts({
    type: 'timeseries',
    renderAt: 'container',
    width: "90%",
    height: 650,
    dataSource: {
        data: fusionTable,
        chart: {
        },
        caption: {
          text: 'Online Sales of a SuperStore in India & the US'
        },
        yAxis: [{
            "plot": {
                "value": "Sales",
                "type": "line"
            }
        }],
        "series": "Country"
    }
});


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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv"Sales">
  <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: "95%",
      height: 650,
      dataSource: {
        data: fusionTable,
        chart: {
        },
        caption: {
          text: 'Online Sales of a SuperStore in India & the US'
        },
        yAxis: [{
            "plot": {
                "value": "Sales",
            }
        }],
        "series": "Country"
      }
    }).render()
  </script>
</body>

</html>

The above code is similar to that of the create your first chart . In order to add multiple data plots do the following:

Specify the value of the plot as Sales using the value attribute within the plot object.
Specify the series as Country using the series atrribute within the yAxis object.

That's it! Your chart with multiple plots is ready.

Next, we will discuss about the FusionTime JSON structure .

Was this article helpful to you ?

Add Multiple Data Plots

Create the schema

Create data

Create the index file

Where do you think this article needs improvement?

Create the `schema`

Create `data`

Create the `index` file