Real-time Bullet Graph
The bullet graph (horizontal and vertical bullet) is a real-time chart, which can continuously request new data from the server and display the same, without involving any page refreshes. The chart initializes itself, loads new data periodically, and auto-updates to reflect the current state of data. There are two different ways to update the bullet; one method directly polls data from the server while the other retrieves data using JavaScript API methods.
In this section, you will be shown how you can,
Configuring Real-time Updates Using JavaScript API
Real-time Data Format
The real-time data format for bullet chart depends on the data value to be passed.
In the simplest form, if you’re looking to update the bullet chart, you need to pass a single value to the value attribute using the JSON key-value pair format. If this data is within the acceptable range of the chart, the chart will be updated to depict this value.
However, to dynamically pass values to the gauge, you use the JavaScript API.
A bullet graph configured for real-time updates using JavaScript API looks like this:
As you can see above, 5 real-time horizontal charts are rendered at a time to showcase a Daily Sales Tracker of salesperson for Stereo Exchange Ltd, New York.
Given below is a brief description of the JavaScript API used to configure real-time updates:
| Function Name | Parameter | Description |
|---|---|---|
|
strData |
This method is used to feed real-time data to the bullet using JavaScript. The data has to be in the same format as provided by the real-time data provider page. |
|
None |
This method is used to return the data currently being shown by the gauge. |
|
value |
This method is used to set the data value for the gauge. The value should be within the limits of the bullet. |
Configuring Real-time Updates Using Server-side Scripts
A horizontal bullet configured for real-time updates using server-side script looks like this:
The data structure needed to render the above chart is given below:
{
"chart": {
"caption": "Alisia",
"subcaption": "Dotts",
"captionFontSize": "11.5",
"subcaptionFontSize": "11.5",
"subcaptionFontBold": "1",
"captionPadding": "5",
"animation": "1",
"upperLimit": "12000",
"numberprefix": "$",
"targetFillPercent": "75",
"targetColor": "#444444",
"plotFillPercent": "40",
"plotFillColor": "#444444",
"formatNumberScale": "1",
"baseFontColor": "595959",
"plotToolText": "<div>Sales : <b>$$value</b></div>",
"targettooltext": "Target : <b>$$targetvalue</b>",
"theme": "zune",
"dataStreamURL": "../../resources/php/gauge-and-widgets-guide-bullet-chart-real-time-bullet-chart-php-1.php",
"refreshInterval": "10"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "6000",
"code": "#999498"
},
{
"minValue": "6000",
"maxValue": "9000",
"code": "#c5c2c6"
},
{
"minValue": "9000",
"maxValue": "12000",
"code": "#e1dee2"
}
]
},
"value": "3555",
"target": "10000"
}Given below is a brief description of the attributes needed to configure real-time updates from the server:
| Attribute Name | Description | ||
|---|---|---|---|
|
This parameter sets the path of the page which is supposed to relay real-time data to the chart. If you have special characters as a part of the data stream URL, like ? or &, you will have to URL Encode the entire |
||
|
For this parameter, we can specify the number of seconds after which the chart will look for new data. This process will happen continuously - i.e., if we specify 5 seconds here, the chart will look for new data after every 5 seconds. |
||
|
|
Stopping/Restarting Updates
A horizontal bullet configured to stop receiving real-time updates looks like this:
The data structure needed to render the above chart is given below:
{
"chart": {
"caption": "Alisia",
"subcaption": "Dotts",
"captionFontSize": "11.5",
"subcaptionFontSize": "11.5",
"subcaptionFontBold": "1",
"captionPadding": "5",
"chartBottomMargin": "20",
"animation": "1",
"upperLimit": "12000",
"numberprefix": "$",
"targetFillPercent": "75",
"targetColor": "#444444",
"plotFillPercent": "40",
"plotFillColor": "#444444",
"formatNumberScale": "1",
"baseFontColor": "595959",
"plotToolText": "<div>Sales : <b>$$value</b></div>",
"targettooltext": "Target : <b>$$targetvalue</b>",
"theme": "zune"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "6000",
"code": "#999498"
},
{
"minValue": "6000",
"maxValue": "9000",
"code": "#c5c2c6"
},
{
"minValue": "9000",
"maxValue": "12000",
"code": "#e1dee2"
}
]
},
"value": "3555",
"target": "10000",
"annotations": {
"origw": "400",
"origh": "190",
"autoscale": "1",
"groups": [
{
"id": "range",
"items": [
{
"id": "rangeBg",
"type": "rectangle",
"x": "$canvasCenterX + 10",
"y": "$chartEndY",
"tox": "$canvasCenterX + 100",
"toy": "$chartEndY-20",
"fillcolor": "#444444"
},
{
"id": "rangeText",
"type": "Text",
"fontSize": "11",
"fillcolor": "#ffffff",
"text": "Sales : $3555",
"x": "$chartCenterX",
"y": "$chartEndY-10"
}
]
}
]
}
}Given below is a brief description of the JavaScript API used to stop and restart receiving real-time updates:
| Function Name | Parameter | Description |
|---|---|---|
|
None |
This method stops the chart from self-updating. |
|
None |
If you’ve stopped the real-time update of the chart, you can resume the update using this method. |
Configuring Real-time Events
FusionCharts Suite XT introduces two events, realTimeUpdateComplete and realTimeUpdateError, to track real-time updates on bullets.
Following is an implementation of realTimeUpdateComplete event in Real-time bullet graph:
Given below is a brief description of the realTimeUpdateComplete event:
| Event Name | Description |
|---|---|
|
This event is raised every time the real-time bullet updates itself with new data. This event is raised in any of the following cases: |
A horizontal bullet configured to listen to the realTimeUpdateError event is implemented below:
Given below is a brief description of the realTimeUpdateError event:
| Event Name | Description |
|---|---|
|
This event is raised when an error occurs while performing real-time update using |
Troubleshooting Real-time Graphs
While accessing any of the JavaScript methods listed above, if you get an error like "... is not a function of ...",
- Make sure that you are NOT running the chart from the local file system (C:\ , D:\). Instead, run the chart from a server (localhost - IIS, Apache etc.). This is because the default security settings do not allow the chart to perform JavaScript interactions on the local file system.