Real time labels padding
Created using FusionCharts Suite XT - www.fusioncharts.com
HTML
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<!--
Real-time stacked area chart showing no. of live visitors in every 5 sec interval using Real Time Stacked Area Chart.
-->
<div id="chart-container">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function () {
var stockPriceChart = new FusionCharts({
id: "stackRealTimeChart",
type: 'realtimeline',
renderAt: 'chart-container',
width: '500',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Live Visitors on Site",
"subCaption": "Updated every 5 seconds",
"xAxisName": "Time",
"yAxisName": "No. of visitors",
"numberSuffix":"s",
"refreshinterval": "2",
"yaxisminvalue": "0",
"yaxismaxvalue": "60",
// "showRealTImeValue":"1",
"xAxisNamePadding":"20",
"realTimeValuePadding":"10",
"labeldisplay": "rotate",
},
"categories": [
{
"category": [
{ "label": "Day Start" }
]
}
],
"dataset": [
{
"seriesName" : "clothing.hsm.com",
"data": [
{ "value": "12" }
]
},
{
"seriesName" : "food.hsm.com",
"data": [
{ "value": "20" }
]
}
]
},
"events": {
"initialized": function (e) {
function addLeadingZero(num){
return (num <= 9)? ("0"+num) : num;
}
function updateData() {
// Get reference to the chart using its ID
var chartRef = FusionCharts("stackRealTimeChart"),
// We need to create a querystring format incremental update, containing
// label in hh:mm:ss format
// and a...