Choose an item

Add Multiple Data Plots

Previously, we have learned how to create a simple chart with one data plot. 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:

Loading data for chart…

Click here to edit the above chart.

The data for the above chart is shown in the table below:

Country Time Sales
United States 1/4/2011 16.448
United States 1/5/2011 72.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

Now, let's check how to prepare the schema and the data for the DataTable.

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 yaxis object. To do this, create an index file and copy the following code:


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,
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 the FusionTime JSON structure.