Choose an item

Real-Time Data Update

FusionTime v2.0 onwards, you can use time-series charts to display dynamically updating time series data.

In this article, we will see how chart data can be updated dynamically in FusionTime, using the API FusionCharts#feedData. This API periodically updates the chart with fresh data. With the addition of new data, a concern of the total time period which is being shown in the chart often becomes a concern. To mitigate it, an optional chart level control called timeSpread has also been introduced to the time-series charts.

A real-time chart looks as shown below:

Loading data for chart…

Dynamically Update Chart Data

To automatically update chart data, invoke the FusionCharts#feedData API. This API accepts an array of rows of data as an optional parameter. Note that if you do not provide an array of rows, or if the array of rows is empty, the invocation will be ignored by the chart.

Each row of data is interpreted using the schema that you provided while creating the chart. If the rows you provide now do not match the schema, the chart may behave in an unexpected manner.

You cannot alter the schema using the FusionCharts#feedData API.

Refer to the code given below:

type Row = Array<number | string>;
declare class FusionCharts {
  feedData(data?: Array<Row>): FusionCharts;
}

In the above code, you can see how feedData has been used to add new rows to the chart. This addition will happen after the time interval you declare. When you render this chart, you will see it asynchronously render the new data values in the plot. The axes, range selectors, time navigator, legends, etc., will also be updated.

Add Data Directly to Table

The table you initially provide to the chart is cloned when you use FusionCharts#feedData. Any operation on the initial table does not affect the chart any longer. If you want to add data directly to the table instead, you need to use the DataStore#appendRows API. Any updates you make to the table now will also be reflected in any visualization using the table.

Configure Time Spread

When there are a large number of data values constantly being fed into a chart, it can slow down browser performance, or even cause a browser crash. To avoid this, use the optional chart level attribute timeSpread, to specify the total time interval you want to display in the chart at a given instant.

Define timeSpread in terms of unit, which accepts one of the following values:

  • millisecond

  • second

  • minute

  • hour

  • day

  • month

  • year

You can also assign a multiplier (default value: 1) to the time period. Note that you can omit the multiplier if you want, but the unit is mandatory. If you skip the unit, then the timeSpread attribute will be ignored.

If you omit timeSpread, or provide an invalid one, then any time period in the existing data that can support four bins of time in the time navigator will be picked up as the value of timeSpread.

Refer to the following code:

type timeUnit =
  | "millisecond"
  | "second"
  | "minute"
  | "hour"
  | "day"
  | "month"
  | "year";

interface FCTSDataSource {
  chart?: {
    timeSpread?: {
      unit: timeUnit,
      multiplier?: number
    }
  };
}

If the timeSpread selected from data already present in the chart is so small that less than four bins can be accommodated in it, then it will be restricted to a value which allows four bins to be displayed.