FusionCharts Dev Centre (2024)

These chart types belong to FusionWidgets XT.

Real-time charts, also known as data streaming charts, are charts that automatically update themselves after every n seconds, without any page refreshes, by getting new data from the server.

FusionCharts Suite XT currently offers the following six real-time charts:

• Real-time Line

• Real-time Area

• Real-time Column

• Real-time Stacked Area

• Real-time Stacked Column

• Real-time Line (Dual Y)

Real-time charts are charts used in livestock monitoring These charts first present the historical data for a given period of time. When new data is available, the charts update automatically and display the new data after discarding the previous value.

Features

Real-time charts support the following features:

• Multiple datasets with real-time update for each of them

• Multiple data updated in each update, i.e., a single pull to the server can come back with any number of data values updated.

• Multiple updates and refresh intervals on the chart. Update interval fetches the new data, but it will not change the view of the chart. Refresh interval applies the updated data in chart view.

• Message logger

• Alert manager

• Annotations can be used to render custom objects

• JavaScript API can be used to set data, retrieve data, start/stop updates, clear chart.

• JavaScript events can be raised when the chart is initialized and rendered as well as when the data is updated.

• Clearing chart view

• Stop real-time updates from server

• Interactive legend to show/hide datasets in line/area/column charts

• Real-time vertical divisional lines and trendlines are supported

• Context menu to help users to enable/disable real-time updates

• Number Format

• Pre-defined and automatic color palette support

The format of real-time data for real-time charts depends on:

• The number of datasets you want to update the chart with.

• The number of incremental updates you want to pass to the chart in one attempt.

• The attributes you want to update the chart with.

• The attributes you want to update for each dataset - like the label, color, link, toolText, etc.

• Whether you are passing empty data to the chart.

• The commands for the chart.

Real-time Line Chart

Let's create our first real-time line chart showcasing the stock price monitoring at Harry's SuperMart.

To create a real-time chart follow the steps given below:

• In the JSON data, set the attributes and their corresponding values in "<attributeName>": "<value>" format.

• Specify the chart type using the type attribute. To render a real-time line chart, set realtimeline.

• Set the container object using renderAt attribute.

• 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 real-time line chart.

Click here to edit the real-time line chart.

Real-time Area Chart

To create a real-time area chart, set the type attribute to realtimearea chart. The rest of the data structure remains the same.

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

A real-time area chart looks like:

Click here to edit the real-time area chart.

Real-time Stacked Area Chart

Now, let's create a real-time stacked area chart showcasing the number of live visitors in every 5 seconds interval.

To create a real-time chart, set the type attribute to realtimestackedarea.

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

A real-time stacked area chart looks like:

Click here to edit the real-time stacked area chart.

Real-time Column Chart

In the above samples, we rendered real-time line and area charts. Let's now create a real-time column charts showcasing number of online transactions per second on the e-commerce site.

To create a real-time column chart, set the type attribute to realtimecolumn.

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

A real-time column chart looks like:

Click here to edit the real-time column chart.

Real-time Stacked Column Chart

FusionCharts also supports real-time stacked column chart. Here the sample below will showcase the number of live visitors on site, updated every 5 seconds.

To create a real-time stacked column chart, set the type attribute to realtimestackedcolumn.

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

A real-time stacked column chart looks like:

Click here to edit the real-time stacked column chart.

Real-time Dual Y-axis Line Chart

To create a real-time dual y-axis line chart, set the type attribute to realtimelinedy.

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

A real-time dual y-axis line chart looks like:

Click here to edit the real-time dual y-axis line chart.

Number of Datasets to Update

Let's say you want to update two datasets plotted on a line chart. To do this, you need to output the data in the following format:

&value=23|43

Here, the two output values, 23 and 43, are separated by the | (pipe character). The value specified first, 23, is set for the first dataset and the value specified second, 43, is set for the second dataset.

Similarly, if you had three datasets to update, the data will be passed in the following format:

&value=23|43|45

Here, the third value, 45, is set for the third dataset.

Number of Incremental Updates

Real-time charts let you pass multiple values for one dataset in each update.

If working over HTTP and need to ensure that you utilize the bandwidth efficiently. Considering this, it will not be feasible to set your chart, with three datasets, to update itself every second, because this may create a strain on the server. However, you also do not want to skip the data values that you missed by not updating the data every second. To avoid this, you can provide data to the chart in the following format:

&value=23,25,24|43,47,45|45,47,49

Here, the values 23, 25, and 24 correspond to the first dataset, 43, 47, and 45 correspond to the second dataset, and 45, 47, and 49 correspond to the third dataset. All values for one dataset are separated by a comma, all datasets are separated by the | (pipe character)

Attributes to Update the chart

Assume that you plot a real-time line chart to monitor stock prices for Harry's SuperMart. On this monitoring chart, the stock price is checked at every seventh instance of data update. You want to add a vertical trend-line that helps you keep track of every instance when the price is checked.

To do this, you can provide data to the chart in the following format:

&label=11:45&value=753|345&vline=0&vLineLabel=vLine&vLineColor=#666666&vLineThickness=2&vLineDashed=1

The real-time line chart thus rendered is shown below:

Click here to edit the real-time line chart.

Attributes to Update each Dataset

The Label Attribute

Update the label as a part of Real-Time data

Consider that you are plotting a real-time multi-series line chart that indicates the load on three servers. The time is plotted on the x-axis, and the corresponding load for all three servers is plotted on the y-axis. With each incremental data, you will now also have to provide the label for the x-axis along with the data value for the y-axis.

To do this, you can provide data to the chart in the following format:

&label=11:45&value=23|43|45

When the chart receives this data, it shifts all existing data and labels one position to the left. Next, it plots the new label on the x-axis and the three new data values on the y-axis.

Hide the Label

For charts plotting a large number of data points, you may not want to render all labels on the chart to avoid cluttering. Instead, you may want to show alternate labels, while updating your data every minute.

For the data label that you want to hide, you can provide your incremental data to the chart in the following format:

&label=11:45&showLabel=0&value=23|43|45

The showLabel attribute, when set to 0, hides the data label from the x-axis.

The Link Attribute

For real-time charts, you can render a data plot as a clickable link that opens in a new window, a pop-up window, in a frame, etc.

To do this, you can provide the incremental data to the chart in the following format:

&label=11:45&value=23|43|45&link=showdetail.asp?server=1%26time=1145|showdetail.asp?server=2%26time=1145|showdetail.asp?server=3%26time=1145

The link in the above data has been URL Encoded because it contains special characters like &, %, etc.

The ToolText Attribute

To update the tool-text, you can provide the corresponding incremental data to the chart in the following format:

&label=11:45&toolText=12/3/2007 11:45:23 AM &value=23|43|45

The Color Attribute

To update the color, you can provide the corresponding incremental data to the chart in the following format:

&label=11:45&value=23|43|45&color=FF0000|0372AB|FF5904

The colors for each dataset are separated by the | (pipe character). The colors specified for real-time updates will always be filled with solid colors and not gradients.

Provide Empty Data

To provide empty data to the chart, so that a break in the data plot (column/line/area) shows, you can provide the incremental data to the chart in the following format:

&label=11:45&value=||

Commands Sent

The clearChart Command

To clear the historical data displayed on the chart, you can send the clearChart command to the server in the following format:

&clear=1

The stopUpdate Command

To stop the chart from the polling the server for real-time updates, you can send the stopUpdate command in the following format:

&stopUpdate=1

After you have stopped updates for a chart, you can restart updates either by user interaction or by using client-side JavaScript API.

Send Messages Pertinent

For real-time charts that show the message logger, update various parameters for the message logger in real-time.

Multiple Datasets and Updates

Real-time charts in the FusionCharts Suite XT can be plotted for any number of datasets. This feature, however, is configured differently from adding and updating a single dataset.

Add Multiple Datasets

To add multiple datasets, let's create a real-time chart plotted for two datasets - retail store transactions and online transaction. In the chart dataStreamURL attribute will be used to set advance-charting-real-time-charts-multiple-datasets-and-updates-php-1.php as the data provider page.

A real-time column chart that compares the retail and online store transactions at Harry's SuperMart looks like this:

Click here to edit the real-time column chart.

Data Provider Page

The data provider page now contains the following code:

<?php date_default_timezone_set("UTC"); $now = date("H:i:s", time()); //Get random numbers $randomValueRetail = floor(rand(5,30)); $randomValueOnline = floor(rand(1,10)); //Output echo "&label=".$now."&value=".$randomValueRetail."|".$randomValueOnline;?>

An example of how data values will be sent as output to the chart is given below:

&label=19:26:56&value=22|7

In the data shown above, we have defined a common label that takes two values - one for each dataset. The values are separated using the | (pipe character). In the example above, 22 is the value for the Retail Store dataset, and 7 is the value of the Online dataset. The order of values here should correspond with the order of dataset object arrays defined in the JSON/XML data.

Interactive Legend

Like most other charts in the FusionCharts Suite XT, real-time charts with multiple datasets are also rendered with an interactive legend. An interactive legend is useful when, out of multiple datasets, you want to focus on only one. To hide a dataset, you click the corresponding data series name in the legend, and the dataset will not be displayed. When the series name is clicked again, the dataset can be viewed on the chart.

The image below is a screenshot of the above real-time chart with the Online transactions dataset hidden:

Even when a dataset is not visible, it will continue updating itself in the background from the real-time data. Also, all alert managers associated with the dataset will continue to work.

To disable the interactive legend, set the value of interactiveLegend attribute to 0. Refer to the code below:

{ "chart": { "interactiveLegend": "0" }}

Push Multiple Updates

So far, for every dataset rendered on the chart, we have passed only single-value updates. FusionCharts Suite XT lets you pass multiple updates for each dataset at one time.

The example below shows the format used to push multiple updates at one time:

&label=11:45:55,11:46:00,11:46:05&value=22,27,28|7,6,5

In the above example, three updated have been provided for each dataset present on the chart together. Three new labels has also been provided for the x-axis, each label corresponding to each value update for both datasets.

When providing multiple values, values within a dataset should be comma-separated. For multiple datasets, each dataset should be separated by a | (pipe character).

In the chart shown below, the dataStreamURL attribute will be used to set advance-charting-real-time-charts-multiple-datasets-and-updates-php-1.php as the data provider page.

A real-time chart with multiple updates for each dataset sent at one time looks like this:

Click here to edit the real-time line chart.

Data Provider Page

The updated data provider page advance-charting-real-time-charts-multiple-datasets-and-updates-php-1.php to output multiple values contains the following code:

<?php date_default_timezone_set("UTC"); //Get random numbers $randomValueRetail1 = floor(rand(5,30)); $randomValueRetail2 = floor(rand(5,30)); $randomValueOnline1 = floor(rand(1,10)); $randomValueOnline2 = floor(rand(1,10)); //Times $time1 = date('H:i:s', strtotime('-3 seconds')); $time2 = date("H:i:s", time()); //Output echo "&label=".$time1.",".$time2."&value=".$randomValueRetail1.",".$randomValueRetail2."|".$randomValueOnline1.",".$randomValueOnline2;?>

This page outputs the data in following format:

&label=11:16:09,11:16:12&value=26,25|1,3

Add Historical Data

In most applications of real-time charts, you would want the chart to initially show historical data and then continue updating itself - instead of starting with a blank canvas and receiving data updates thereafter. You can do this by specifying the historical data in your JSON/XML data.

In this section, you will be shown how you can specify historical data on a chart.

Specify Historical Data

Here let's create a chart which tracks the online purchases from Bakersfield Central at Harry's SuperMart. When the chart first renders, it shows the purchases record from 8 minutes before the chart was rendered to a minute before. After that, the chart updates itself every 5 seconds.

In the data structure above, you will see:

• Addition of categories > category object array to - creation of x-axis labels for the historical data

• Addition of dataset > data object array to specify data values - equal to the number of x-labels specified.

A real-time chart rendered with historical data looks like this:

Click here to edit the real-time line chart.

Now, in the chart shown below, observe that the chart view shows 10 data plots at any given time. Increase/decrease the number of data points/data plots that are displayed on the chart at one time.

Look at the real-time column chart shown below:

Now, let's create a real-time column chart configuring to display 15 data plots at a time. To specify the number of data plots in one screen at a given time, set the value of numDisplaySets attribute to 15. As soon as the 16th data comes in, the first data towards the left will be deleted, and the rest of the data will be shifted one position to the left.

Refer to the code given below:

{ "chart": { "numDisplaySets": "15" }}

A real-time column chart configured to display 15 data plots at a time is shown below:

Click here to edit the real-time column chart.

Add Data Stamp

Let's plot a real-time line chart to monitor the stock prices for Harry's SuperMart. T stock price change to be recorded every 5 seconds. However, to efficiently consume bandwidth, you want to this stream this data to the chart only after every 15 seconds.

Now, let's create a real-time chart where we will set refreshInterval to 5 and updateInterval to 15. The dataStreamURL attribute is set to dataProviderPage.php, which means that this page will be responsible for providing the stock price statistics. Now, each time the data provider page is invoked, it needs to provide the chart with three historical values (although the chart data is refreshed every 15 seconds, data is updated every 5 seconds).

In traditional systems, the data provider page will have to keep track of the data that was last sent to the chart using either session variables or by storing this information in a database. Either way, this can be a cumbersome task to do in a stateless environment - sessions will not scale well and using a database will require a lot of additional code to store details of each connected user.

The real-time line chart thus rendered is shown below:

Click here to edit the real-time line chart.

FusionCharts Suite XT uses the data stamp feature to solve this problem. Data stamp is a token of information that is passed with each update to the chart and back to the server, and helps to easily identify the data that was last sent to the chart.

For our scenario, we would want to use the data stamp as follows:

1. When the chart is first rendered, we will provide the initial date/time as data stamp in the XML/JSON data, so that the chart can pass it to the data provider page as querystring.

2. The data provider page will now request this data stamp from the querystring and provide any stock price data recorded after that time as output data. Thereafter, it will build the data string and then append the updated data stamp, which is the data/time of the last data sent to the chart.

3. The entire data and the data stamp will now be sent to the chart as a real-time update.

4. The chart will read this data, update the view, and then update its data stamp.

5. After this, when the chart again polls the server for real-time data, it appends the updated data stamp to the data provider page and requests new data. Steps 2, 3, and 4 will thus be executed recursively.

Set up the Initial Data Stamp

The following code snippet is used to set the initial data stamp:

{ "chart": { "dataStreamURL": "files/php/advanced-charting-real-time-charts-adding-data-stamp-php-1.php", "refreshInterval": "15", "dataStamp": "13:43:45" }}

After every 15 seconds, the chart will call the following URL:

files/php/advanced-charting-real-time-charts-adding-data-stamp-php-1.php?FCTimeIndex=35454&dataStamp=13:43:45

The dataStamp attribute is used to add the data stamp to the URL. The FCTimeIndex is a parameter added to the chart to avoid caching.

The code in the data provider page will now request this data stamp and then provide the values updated after this time. After providing the three updated values (for the last 15 seconds) the data provider page will need to update the data stamp by providing the time of the last stock price reading.

Therefore, the output provided by the data provider page will read something like this:

&label=13:43:55,13:44:05,13:44:15|value=34,23,65&dataStamp=13:45:15

The above output contains:

• the labels for the three updated values

• the three updated values

• the updated data stamp - which is the time of the last update that was sent to the chart

Once the chart receives this update, it will update itself to plot the three new values and will also update its data stamp. Next time when the chart invokes the data provider page, it will invoke the following URL:

dataProviderPage.php?FCTimeIndex=37564&dataStamp=13:45:15

Note how the dataStamp has been updated to the one specified by the real-time update. This helps to constantly update the data stamp and thereby, keep track of the last data sent to chart.

Set Alert Manager

The alert manager helps you define thresholds for data values and perform specific actions for the defined thresholds. For example, if you are plotting a real-time temperature chart and wish to play a sound when the temperature reaches between 90 and 100 Fahrenheit, you can do this using the alert manager.

As long as they don't overlap, you can define any number of threshold ranges. For each threshold range, you can specify one of the following actions:

• Call a JavaScript function and pass parameters to it

• Show a predefined annotation on the chart

Now, let's see how can the alert manager can be configured.

Configure the Alert Manager for all Datasets

Let's create a real-time chart, in which the alert manager is configured to call a JavaScript function. The container object for alerts is alerts property, which is a child of the datasource object.

Now, for each alert range object, you need to define an alert array element as a child of the alerts object. The alert array elements can be configured using following points:

• Set the minValue attribute to specify the minimum value for the threshold range. For example, to define an alert for the range 5-8, 5 is the minimum value. When real-time values are matched against the value for minValue, the value is inclusive.

• Set the maxValue attribute to specify the maximum value for the threshold range. Like the minimum value, the maximum value is also inclusive during value checks.

• Set the action attribute to define the action to be taken, when the chart value matches an alert range. Possible values for this attribute are:

CALLJS – It calls a JavaScript function (specified using the param attribute – explained next) when the chart value matches against an alert range. To pass parameters to the JavaScript function, specify the exact function name and parameters in the param attribute – for example, "param": "showAlert('Online Transaction above average');"SHOWANNOTATION – You can create custom annotations and annotation groups (with named IDs). This action lets you show a predefined annotation group in the chart. For example, you may define an annotation group of three circles, that represent three status indicators in the colors red, green, and yellow, and assign an annotation group ID for them. By default, you may hide all status indicators. Later, based on the chart's value, you may show an annotation. The group Id of the annotation to be shown is defined using the param attribute. When the chart value falls out of the alert range, the chart hides the annotation.

• Set the param attribute to accept the parameter for an action, depending on the type of action specified using the action attribute. For the CALLJS action, it takes the name of the JavaScript function and for the SHOWANNOTATION action, it takes the ID of the annotation group in order to show the annotation.Due to some security policies, usage of eval has been removed and some of the features of param attribute has been deprecated:

  • Special characters like (, ), - and, cannot be passed as a parameter while function call.

  • Multiple functions cannot be passed after param attribute.

  • A function cannot be defined after param attribute.

• Set the occurOnce attribute to specify an alert threshold range to execute once. Set this attribute to 1 will notify the alert manager only the first time a value falls within that range. For example, for a temperature range 70-80 Fahrenheit, if you want to be notified only once when the temperature is 75, set the occurOnce attribute to 1 for this range.

A chart thus created looks like :

Click here to edit the real-time chart.

ALERT|-Footfall exceeded average|

Configure the alert manager for individual datasets

In real-time charts, you can control the datasets that are checked by the alert manager to raise any events.

For example, if you are comparing the transactions of a Retail Store and an Online Store using a single real-time column chart, you may want alerts to be defined and raised only for the Online Store. In this case, you can disable the alerts for the Retail Store's dataset.

To configure the alert manager for individual datasets, set the value of checkForAlerts attribute to either 1 or 0. Setting this attribute to 0 disables the check for that dataset, setting it to 1 (default) enables it.

Given below is a brief description of the attribute used to configure the alert manager for individual datasets:

Refer to the code given below:

{ "chart": { ... }, { "dataset": [{ "seriesname": "Retail Store", "checkForAlerts": "0", "alpha": "100", "data": [{ "value": "15" }] }, { "seriesname": "Online", "alpha": "100", "data": [{ "value": "2" }] }] }}

Set Message Logger

FusionCharts Suite XT uses the concept of streaming and showing real-time messages on the chart using the message logger. The message logger can be effectively used to show necessary real-time information or live error bugs.

The message logger is essentially a scrollable text-based scrollable window that can listen to messages streamed the from the server and then do one of the following:

• Display the message in the message logger window

• Pass it to custom JavaScript functions (defined by you) for further actions

The FusionCharts Suite XT message logger has the following features:

• Message logger is supported by all real-time charts and gauges. The non real-time charts do not support the message logger.

• Each real-time update of the chart can have one message to be added to the logger.

• Because it is scrollable, the message logger can contain any number of messages.

• The cosmetics of this message logger are fully customizable.

• Messages streamed to the message logger can either be displayed in the in-built logger or passed to any JavaScript function present in the same page. This helps you build your custom client-side loggers, without having to worry about retrieving real-time data from the server.

• The message logger be switched on or off by setting useMessageLog to 0 or 1 in the chart object of the JSON data (or in the <chart> element of the XML data) for the chart.

• Additionally, end users can also show/hide the logger at client-side by pressing Shift + M.

• You can also use client-side JavaScript to show/hide the message logger for a chart.

• Messages streamed to the logger can be of 4 types - INFO, ERROR, LITERAL, or LINK. You can decide the type for each message that you send to the logger. Messages displayed in the logger are formatted based on their type.

• The logger can be cleared dynamically at run-time (to get rid of existing messages) either by sending a &clearLog=1 flag in the real-time data stream, or by using client-side JavaScript.

• The message logger window in JavaScript Real-time charts and gauges shows a close button that allows you to close the logger.

A simple message logger looks as shown in the image below:

In the above image, we have a real-time column chart that monitors the footfalls at Bakersfield Central. Overlapping this chart is the message logger that contains messages that were streamed to the message logger by the server.

Set up the Message Logger

The following two steps are involved in configuring and using the message logger.

• Configure your JSON data to use the message logger by setting its functional and cosmetic properties.

• Configure the real-time data provider page to broadcast/stream messages to the logger.

Configure the message logger

To configure the message logger, follow the steps given below:

• Set the value of useMessageLog attribute to 1 to specify the message logger for a real-time chart/gauge.The message logger, however, will become visible only when it listens to the first message streamed from the server.

• Set the value to showRTMenuItem attribute to 1 to specify the real-time update-related menu items in the chart's context menu.The context menu appears as a button in the bottom-left corner of the chart (you can refer to the image shown above).

The following code snippet enables the use of the message logger for a real-time chart:

{ "chart": { ... "useMessageLog": "1", "showRTMenuItem": "1" }}

When the first message is streamed to the chart from server, the message logger is displayed as shown in the image below:

A close button appears at the top-right corner of the message logger window that you can use to close the message logger. Or you can click anywhere outside the message logger window. To re-open the message logger, click the Show Log option from the context menu, as shown in the image below:

The messageGoesToJS attribute is used to pass only the "Message Text" parameter to the JavaScript function, whereas, the messagePassAllToJS is used to pass all the four parameters to the JavaScript function.

For a detailed list of attributes used to configure the functional and cosmetic properties of the message logger, refer to the API reference page of the real-time chart.

Stream Message

Each real-time update of the chart can contain one message to be added to the message logger. The messages to be logged should be provided in the real-time data stream and not in the JSON/XML data. Real-time data stream refers to the data provided by the URL specified in the dataStreamURL attribute.

To log messages provided in the real-time data stream, follow the points given below:

• Set the msgId attribute to specify a unique ID for each message, which can be used to track messaged in the custom JavaScript function and take the required actions. The ID is NOT displayed in the message logger window.

• Set the msgTitle to specify the message title to be displayed in the message logger window or passed to the JavaScript function.

• Set the megText attribute to specify the message text.

• Set the msgtype attribute to specify the message type. Possible values are INFO, ERROR, LITERAL, or LINK.Each message type is rendered using a different formatting style to aid instant interpretation. INFO messages are shown using normal font properties. ERROR messages are highlighted in a shade of red. LITERAL type messages are shown in code-like blocks. LINK messages serve as clickable links.

• The messages streamed to the chart can either be displayed in the message log window or can be passed to JavaScript functions(which we'll see next). Set the value of msgGoesToLog attribute to 1 to specify the message to be logging in the built-in log window.By default, this attribute takes its value from the messageGoesToLog attribute defined for the chart object.

• Set the msgGoesToJS attribute to specify whether each message streamed from the server will be passed to the local JavaScript function. Setting this attribute to 1 will pass the message to the JavaScript function, setting it to 0 will show it in the built-in log window.By default, this attribute takes its value from the messageGoesToJS attribute of the chart object.

• Set the value ofclearLog attribute to 1 to clear the message history for the chart currently rendered.

In the next section, let's look at different examples of real-time updates that can be streamed to the message logger.

Examples of Real-Time Update

Simple Example

An example of a real-time update string passed to the message logger (contained in the column chart shown above) is given below:

&label=13%3A18%3A46&value=12&msgTitle=Footfall at : &msgText=13%3A18%3A46 hrs is 13 Customers"

In this update, the &label and &value parameters are absorbed by the chart for data update.

The &msgTitle and &msgText parameters are absorbed by the message logger. &msgTitle is set to "Footfall at : " and &msgText is set to "13:18:46 hrs is 13 Customers".

When a chart (with useMessageLog set to 1) accepts this data stream, the message logger, as shown in the image below, is displayed:

If you are passing any special characters as part of your message text or title (like &, %, etc.), you will need to URL Encode the text/title.

Change the Message Type

Let's configure a chart to display an ERROR message in the message logger whenever the number of footfalls goes below 9. Open the message logger to look at the messages displayed for each real-time update.

A real-time chart that plots the footfalls at Bakersfield Central is shown below:

Click here to edit the real-time column chart.

To specify the message type, you can provide data in the following format:

&label=14%3A46%3A12&value=6&msgTitle=Footfall at : &msgText=14%3A46%3A12 hrs is 6 Customers WARNING !!!&msgType=ERROR

Create Messages with Links

To display messages of type LINK, you can provide the following data:

&msgTitle=Check Dashboards for details&msgText=http%3A%2F%2Fwww%2Efusioncharts%2Ecom%3Fid%3D34&msgType=LINK

Because we want to link the message to http://www.fusioncharts.com?id=34, the &msgText contains the URL Encoded link.

Clear the Message Logger from the Server

Send instruction to the chart from the server to clear the contents of the visible message logger. To do this, you need to send the following command:

&clearLog=1

You can send it as a part of the message stream, as shown in the example below:

&label=14%3A46%3A12&value=6&msgTitle=Footfall at : &msgText=14%3A46%3A12 hrs is 6 Customers WARNING !!!&msgType=ERROR&clearLog=1

This will clear all the contents of the existing message logger and start afresh.

If you send &clearLog=1 with each real-time update, the chart will not show any messages in the logger, because the log will be cleared with each update. Therefore, be careful to send this command only when the log needs to be cleared.

Additionally, clear the message logger using client-side JavaScript API.

Handle Messages in JavaScript

Pass the entire (or partial) message envelope to custom JavaScript functions present in the page that contains chart.

A real-time column chart configured to pass all parameters from the message envelope to your custom JavaScript function. The useMessageLog, messageGoesToJS, messageJSHandler, and messagePassAllToJS attributes (described earlier in this article) are used to pass all parameters from the message envelope to your function.

Refer to the chart below: