In today’s fast-paced world of high stock market returns and 24/7 cryptocurrency updates, real-time charting is becoming a mainstay in many developers’ toolbelts. Real-time charts can be challenging to implement, but with the right charting library, it can be easy.

FusionCharts is an easy-to-use charting library that enables real-time charting with a few simple commands. FusionCharts supports many languages and frameworks but in this article, we are going to focus on Javascript. In addition to real-time charting, FusionCharts also offers a full range of time-based charts for stock market and cryptocurrency historical data.

So, let’s explore the various commands you can use to deploy real-time charts in Javascript. We will also show you the full source code for building a real-time chart using FusionCharts. The example features building a “Bitcoin Price Ticker” sample chart.

How can I build a real-time Bitcoin ticker chart?

To create a real-time chart follow these steps:

  • In the JSON data, set the attributes and their corresponding values in "<attributeName>": "<value>" format. Here are a few sample records you can use to initialize the chart.
    dataset: [ { data: [ { value: "7358" }, { value: "7361" }, { value: "7362" } ] } ]

     

  • Specify the chart type using the type attribute. To render a real-time line chart, set realtimeline.
  • Set the container object using renderAt attribute. You will see in this sample that the renderAt object is named “chart-container” and we define it in the HTML section of the sample below.
  • Specify the dimension of the chart using width and height attributes.
  • Set the type of data (JSON/XML) you want to pass to the chart object using dataFormat attribute.

For a detailed list of attributes, refer to the chart attributes page of the real-time line chart.

This will set up the initial chart with some sample data and prepare it to start receiving real-time data. Next up, define a Javascript function within the initialized event called updateData(). The updateData() event creates a string variable called strData which contains a label and a value. This label and value pair match with the sample data.
Finally, pass the strData variable containing the new piece of real-time data  to the feedData() function of FusionCharts (example: chartRef.feedData(strData); ). In a live setup feedData could be called by a solution delivering real-time data via websockets.
Here is the full source code for the “Bitcoin Price Ticker” sample chart for you to explore. You can also see the real-time Bitcoin Price Ticket example in action.

How can I build a real-time Bitcoin ticket with Javascript?

Javascript:

FusionCharts.ready(function() {
   var d = new Date();
   var monthArr = [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "June",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec"
   ];

   var outDate =
      monthArr[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear();

   new FusionCharts({
      type: "realtimeline",

      renderAt: "chart-container",
      width: "600",
      height: "400",
      dataFormat: "json",
      dataSource: {
         chart: {
            caption: "Bitcoin Price Ticker",
            subCaption: outDate,
            numberPrefix: "$",
            numdisplaysets: "10",
            labeldisplay: "rotate",
            showRealTimeValue: "0",
            theme: "fusion",
            plotToolText: "$label<br>Price: <b>$dataValue</b>",
            setAdaptiveYMin: "1"
         },
         categories: [
            {
               category: [
                  {
                     label:
                        d.getHours() +
                        ":" +
                        d.getMinutes() +
                        ":" +
                        (d.getSeconds() - 2)
                  },
                  {
                     label:
                        d.getHours() +
                        ":" +
                        d.getMinutes() +
                        ":" +
                        (d.getSeconds() - 1)
                  },
                  {
                     label:
                        d.getHours() +
                        ":" +
                        d.getMinutes() +
                        ":" +
                        d.getSeconds()
                  }
               ]
            }
         ],
         dataset: [
            {
               data: [
                  {
                     value: "7358"
                  },
                  {
                     value: "7361"
                  },
                  {
                     value: "7362"
                  }
               ]
            }
         ]
      },
      events: {
         initialized: function(evt, arg) {
            // Get reference to the chart
            var chartRef = evt.sender;

            function updateData() {
               var t = new Date(),
                  date =
                     t.getHours() + ":" + t.getMinutes() + ":" + t.getSeconds(),
                  val = Math.floor(Math.random() * (7800 - 7200 + 1)) + 7200,
                  strData = "&label=" + date + "&value=" + val;

               // Feed it to chart.
               chartRef.feedData(strData);
            }

            chartRef.intervalUpdateId = setInterval(updateData, 1000);
         },

         disposed: function(evt, args) {
            clearInterval(evt.sender.intervalUpdateId);
         }
      }
   }).render();
});

HTML:

<div id="chart-container"></div>

How can I build a real-time Bitcoin ticket with real data?

Our example in this article just uses some random data to send to the real-time chart to demonstrate the capability. However, if you want to hook up real Bitcoin data to FusionCharts you can get Bitcoin (and other cryptocurrency) data from coinlayer.com. Coinlayer offers an easy-to-use API for accessing real-time and historical cryptocurrency prices from Bitcoin, Ethereum, Dogecoin, and hundreds of other cryptocurrencies. Coinlayer has a full range of documentation for both live and historical cryptocurrency data.

Sample REST API call URL for live cryptocurrency data:

https://api.coinlayer.com/live?access_key=YOUR_ACCESS_KEY

Sample REST API response:

{
  "success": true,
  "terms": "https://coinlayer.com/terms",
  "privacy": "https://coinlayer.com/privacy",
  "timestamp": 1529571067,
  "target": "USD",
  "rates": {
    "611": 0.389165,
    "ABC": 59.99,
    "ACP": 0.014931,
    "ACT": 0.15927,
    "ACT*": 0.14371,
    "ADA": 0.160502,
    "ADCN": 0.001406,
    "ADL": 121.5,
    "ADX": 0.427854,
    "ADZ": 0.02908,
    "AE": 2.551479,
    "AGI": 0.12555,
    "AIB": 0.005626,
    "AIDOC": 0.02605,
    [...]
  }
}

How can I get started building visually stunning real-time charts with FusionCharts?

FusionCharts is used by thousands of developers and offers real-time chart integrations with many frontend and backend frameworks. FusionCharts also offers FusionTime which is a powerful time-series and stock chart that can render thousands of data points in modern browsers. It is easy to get started with FusionCharts by downloading the library for your frontend or backend. We support 10+ frameworks and languages of your choice including JavaScript, Angular, React, jQuery, Vue.js, Ember, React Native, AngularJS, Svelte, ASP.NET, PHP, Java, Ruby on Rails, and Django.

Head over and download the full FusionCharts library for quickly and easily building real-time cryptocurrency charts.

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