So you are on DZone right now and you have decided to read my article. That means there is a good chance that either you are into the business of creating websites or you own a website yourself. And if you are serious about your websites, then you must be using some kind of analytics. Right?
Well, my favorite analytics tool is Google Analytics. And one of the best features it offers is the 'Real-Time' view. I can see all kinds of crazy details — geographic location, current page, referral source etc. — about people who are on my website at this very moment. Ability to see things in real-time can be a great feature in any product. And that's why I decided to write about it today.
In this tutorial, I will use FusionCharts' real-time line chart to display processor load of two processors ('A' and 'B') in real-time.
This is what we are going to make (you can see live version here):
3 Steps to Making a Real-Time Chart
To make it easier to understand, I have divided this tutorial into following 3 steps:
Fetching data from a data stream.
Including a JavaScript dependency and creating an HTML container.
Defining chart instance and rendering the chart.
Step 1: Fetching Data from a Data Stream
Reliably fetching data from a feed will is probably the most important step in creating real-time charts. Once you have it, it's easy to visualize it by plugging it into any of the various charting libraries available in the market. For this tutorial I am going to use FusionCharts' JavaScript chart library.
FusionCharts provides six different types of real-time charts: area, line, column, stacked-area, stacked-column and line with dual y-axis. As I mentioned above, for this tutorial I am going to use a line chart as it is best suited for our purpose.
Data format for real-time charts is slightly different than other charts. It depends upon various factors as explained below:
Number of datasets: When it comes to real-time charts, usually we usually use them to compare 2 or more different datasets. For example, stock price of 2 competitors or performance of 2 pages in an A/B test. In my demo I have compared load on 2 hypothetical processors.
If there are two datasets, then there will be two values:&value=vala|valb
And if there are three datasets, there will be three values:&value=vala|valb|valc
Where"|"is data value separator.Updating labels in real-time: Static labels won't make sense in a real-time chart. We need to update labels as well along with the data. You need to use following data stream format to achieve that:
&label=demolabel&value=vala|valb|---|valnAttributes to be updated in the chart: Data stream pattern also changes if attributes like division line thickness, line color, or cosmetics attributes are added to the chart. Data stream with this information will look like this:
&value=vala|valb&vLine=1&vLineThickness=2&vLineColor=#FF0000&vLineLabel=demolabel
Other constraints such as hiding labels, adding tool text, adding links, updating color, passing empty data can also be part of this.Chart Commands: The data stream format also changes if chart commands are supplied, like the
clearcommand will clear the chart canvas, andstopUpdatewill stop updating the chart. The syntax for both of them are as follows:&clear=1&stopUpdate=1
For this tutorial, I have created a demo data stream using PHP to generate two random numbers between 15 and 95 to represent processor load. Here is how I did it:
<?php
date_default_timezone_set("UTC");
$now = date("H:i:s", time());
//Get random numbers
$randomValueSysA = floor(rand(15,95));
$randomValueSysB = floor(rand(20,90));
//Output
echo "&label=".$now."&value=".$randomValueSysA."|".$randomValueSysB;
?>Here is what a sample output from the above code looks like:
&label=11:00:37&value=39|55Step 2: Including JavaScript Dependency & Creating HTML Container
In this step we will include FusionCharts core JavaScript file and a <div> element as a container for the chart.
Here is the code:
<html>
<head>
<!-- FusionCharts core JavaScript file -->
<script type="text/javascript" src="path/to/fusioncharts.js"></script>
</head>
<body>
<!-- Chart Container -->
<div id="chart-container">An awesome chart is on its way!</div>
</body>
</html>Step 3: Defining Chart Instance and Rendering the Chart
In this step we will define FusionCharts constructor instance for the chart. Here is the code: (please see the explanation in the comment)
FusionCharts.ready(function() { //FusionCharts Constructor
var processorChart = new FusionCharts({
//Chart Instance
// We have defined type, DOM container, dimensions, data format and data source here
type: "realtimeline",
renderAt: "chart-container",
width: "100%",
height: "450",
dataFormat: "json",
dataSource: {
"chart": {
//Data Stream URL will feed data to the chart
"datastreamurl": "http://fc.gagansikri.in/workspace/realtimechartsdemo/datastream.php",
// frequency of fetching new data
"refreshinterval": "2",
//Other Chart Configurations
},
"categories": [{
"category": [{
"label": "Start"
}]
}],
"dataset": [{
//For Processor A
"color": "00dd00",
"seriesname": "Processor A",
"data": [{
"value": "0"
}]
}, {
//Similar declaration for Processor B
...
}]
}
}).render(); //Render Method
});Next Steps
You can customize both functionality and cosmetics of a real-time chart in great detail. For managing functionality, you can define refresh interval, update interval, decimal precisions, canvas and chart margins, etc. For controlling cosmetics you can add trend-lines and trend-zones, increasing the number of data sets, etc. To learn more about customizing, you can refer this documentation page.
FusionCharts provides ability to log messages depending on predefined conditions. If you want to add that to your chart, you can visit this page to learn more.
If you don't have a data stream, you can also feed data to the chart using
feedDatamethod provided by FusionCharts.For some inspiration, check out more examples of real-time charts.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}