A time series chart is a great way to assess and analyze sequential data that changes over time. They help businesses analyze and develop relevant insights from the data they collect over time. Time series models are particularly useful as more businesses enter into the digital space and realize the importance of keeping track of their internal and external activities.

Whether you are a small business or large enterprise, staying up to date with your data and extracting meaningful information from it is crucial to competing in the digital race. with this in mind, time-series data visualization charts are one of the most convenient and efficient ways to interpret complex, large-volume, time-dependent data. Managed correctly, efficient data analysis using time series charts provides valuable insights that contribute to the growth of your business.

Getting started with FusionCharts time series data visualization components

Due to its large library of robust and beautiful visualization components, FusionCharts helps developers easily implement time series chart components that are beautiful, responsive, and interactive. Best of all, they give you the capacity to deal with large volumes of data.

In this blog post, we will look at how you can create and implement amazing time-series visualization charts with FusionCharts. The best part about FusionCharts is that it has full source code available for developers. To get started, you only need to download it, plug it into your own projects and enjoy the results.

How can I create a time series chart with a large number of data points?

As we mentioned previously, FusionCharts, with its robust library of predefined components, gives you everything you need to create beautiful time series visualizations. Using the powerful JavaScript components that come with the FusionCharts development suite, all you need to do is plug in your data.

With just a few lines of code and  FusionCharts specific functions,  you can create time-series charts in no time.

Assuming that you have already installed the FusionCharts development suite using NPM, you can use the following piece of code to import the dependencies needed to render the time series chart.

var FusionCharts = require('fusioncharts');
var TimeSeries = require('fusioncharts/fusioncharts.timeseries');
var $ = require('jquery');
var jQueryFusionCharts = require('jquery-fusioncharts');

After importing these dependencies, you need to initiate time-series and jQuery components to resolve their dependencies for the core FusionCharts library. You can do this as follows:

TimeSeries(FusionCharts);
jQueryFusionCharts(FusionCharts);

In order to keep it simple for the sake of this article, we will use the sample data stored on FusionCharts’ AWS servers. Using the following code snippet, you can fetch the time series data and schema. Both of these are the prerequisite entities for the charts display.

var jsonify = res => res.json();
var dataFetch = fetch(
  'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/line-chart-with-time-axis-data.json'
).then(jsonify);
var schemaFetch = fetch(
  'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/line-chart-with-time-axis-schema.json'
).then(jsonify);

Once we have the data and its schema locally, we now need to create a FusionCharts data store. Inside the data store, create a FusionCharts data table containing our data and its schema:

Promise.all([dataFetch, schemaFetch]).then(res => {
  const data = res[0];
  const schema = res[1];
  
  const fusionDataStore = new FusionCharts.DataStore();
  const fusionTable = fusionDataStore.createDataTable(data, schema);

If you have followed the article so far, you have done all the prerequisite setup to display your time series data in a chart. All you have to do now is to use the insertFusionCharts function and provide it with an appropriately configured JSON object. You do this using the following code:

$('document').ready(function() {
    $('#chart-container').insertFusionCharts({
      type: 'timeseries',
      width: '600',
      height: '400',
      dataFormat: 'json',
      dataSource: {
        data: fusionTable,
        caption: {
          text: 'Sales Analysis'
        },
        subcaption: {
          text: 'Grocery'
        },
        yAxis: [
          {
            plot: {
              value: 'Grocery Sales Value',
              type: 'line'
            },
            format: {
              prefix: '$'
            },
            title: 'Sale Value'
          }
        ]
      }
    });
  });
});

Once you execute this script, you will see your data mapped into a detailed and intuitive time series chart.

time-series-chart-1

Changing FusionCharts time series granularity by zooming in on  axes

One of the best features of FusionCharts time-series visualizations is that they are interactive. They allow users to switch the scale of the axes. This means you can easily explore the visualization for any time window you want. As an example, the image below is exactly the same as the figure above. The only difference is the scale of the time axis. This time, it is zoomed in a bit.

time-series-chart-2

Similarly, we can zoom into the time axis until it displays the most precise, granular information available.

time-series-chart-3

Source Code for FusionCharts and Time Series Demo

As you can see, FusionCharts makes it almost effortless to design time-series charts that display large volumes of data. In addition, FusionCharts supports a wide variety of bindings out of the box. These include Javascript, Angular, React, jQuery, Vue.js, Ember, React Native, AngularJS, Svelte, ASP.NET, PHP, Java, Ruby on Rails, and Django.

Let us know in the comment section how you have used FusionCharts’ components to create high performant time-series charts.

Download FusionCharts and get started today!

Take your data visualization to a whole new level

From column to donut and radar to gantt, FusionCharts provides with over 100+ interactive charts & 2,000+ data-driven maps to make your dashboards and reports more insightful

Explore FusionCharts

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Your next great dashboard starts here

With our interactive and responsive charts, extensive documentation, consistent API, and cross-browser support - delight your customers with kick-ass dashboards

Explore FUSIONCHARTS