I have implemented Highcharts successfully which is working very good. My highcharts are getting live data at every 1 minute and add points which is doing as expected. But I have certain problem likes My highcharts is having two series First is line type series and second is area type series. First series will get always 2 points only and second will get more than 200 points. As I told you my data is live, data start coming on 7 AM just for line and blank data for area until 9 AM at exact 9 AM new data will start coming at every 1 minute until 12.30 PM but what happens at 9 AM my chart goes stop and even on new next day 7 AM my chart stop
But if i refresh my browser I get new data and it will start working as we needed.
My code as follows
$(function () {
$('#container').highcharts({
credits: {
enabled: 0
},
title: {
text: null
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
minute: '%H:%M'
},
max: <%= MilliTimeStamp(_closingTime) %> ,
min: <%= MilliTimeStamp(_openingTime) %> ,
tickInterval: 0.5 * 3600 * 1000,
minorTickInterval: 0.1 * 3600 * 1000,
title: {
text: null
},
lineWidth: 1,
minorGridLineWidth: 1,
endOnTick: true,
showLastLabel: true,
gridLineWidth: 1,
labels: {
style: {
font: '7.5pt Trebuchet MS'
}
},
reversed: <%= isArabic %> // true for arabic layout and false for english layout
},
yAxis: {
title: {
text: null
},
max: <%= maxY %> ,
min: <%= minY %> ,
endOnTick: true,
showLastLabel: true,
labels: {
style: {
font: '7.5pt Trebuchet MS'
}
},
opposite: <%= isArabic %> // true for arabic layout and false for english layout
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
},
line: {
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
tooltip: {
formatter: function () {
return '<span style="font-size:7.5pt;">' + Highcharts.dateFormat('%A, %e %B, %H:%M', this.points[0].x) + '</span><br><span style="color:' + this.points[0].series.color + ';">' + this.points[0].series.name + '</span>: <b>' + Highcharts.numberFormat(this.points[0].y, 0) + '</b>';
},
useHTML: true,
shared: true
},
series: [{
type: 'area',
data: []
}, {
type: 'line',
color: 'Red',
data: []
}]
});
<%
if (isArabic == "true") { %> Highcharts.setOptions({
lang: {
months: <%= months %> ,
weekdays: <%= days %>
}
}); <%
} %>
$.ajaxSetup({
cache: false
});
recieveData();
});
function recieveData() {
var pathArray = window.location.pathname.split('/');
var chart = $('#container').highcharts();
$.ajax({
url: '/' + pathArray[1] + '/HomePageChartData.aspx',
dataType: 'json',
cache: false,
data: {
'time': new Date().getSeconds()
},
success: function (data) {
chart.yAxis[0].setExtremes(data.minY, data.maxY, true, true);
chart.series[1].setData([]);
chart.series[1].name = data.lineSeriesName;
chart.series[0].setData([]);
chart.series[0].name = data.areaSeriesName;
for (var x in data.lineSeriesData) {
chart.series[1].addPoint([data.lineSeriesData[x][0], data.lineSeriesData[x][1]]);
}
for (var x in data.areaSeriesData) {
chart.series[0].addPoint([data.areaSeriesData[x][0], data.areaSeriesData[x][1]]);
}
setTimeout(recieveData, 60000);
}
}
});
}
my JSON data at 7 AM
{"maxX":"1367843400000","minX":"1367830800000","maxY":"7912","minY":"7511","tickIntervalY":"80","lineSeriesName":"Open","areaSeriesName":"Price Index","lineSeriesData":[[1367830800000,7715.35],[1367843400000,7715.35]],"areaSeriesData":[]}
my JSON data after 9 AM
{"maxX":"1367843400000","minX":"1367830800000","maxY":"7912","minY":"7511","tickIntervalY":"80","lineSeriesName":"Open","areaSeriesName":"Price Index","lineSeriesData":[[1367830800000,7715.35],[1367843400000,7715.35]],"areaSeriesData":[[1367830831000,7740.01],[1367830897000,7735.61]]}
And it will start getting new data in areaSeriesData every 1 minutes
@@Update
I found the problem that at 7 AM and 9 AM I was not getting data I was getting empty string, so it was going to error which I was not handling, now I change it as below which start removing series but now I am not getting series for line at 7 AM which have data.Can somebody tells me what I am missing or doing wrong over here.
function recieveData() {
var pathArray = window.location.pathname.split( '/' );
var chart = $('#container').highcharts();
$.ajax({
url: '/' + pathArray[1] + '/_layouts/KSE.SharePoint/HomePageChartData.aspx',
dataType: 'json',
cache: false,
data:{'time': new Date().getSeconds() },
success: function (data) {
chart.yAxis[0].setExtremes(data.minY, data.maxY, true, true);
chart.series[1].setData([]);
chart.series[1].name = data.lineSeriesName;
chart.series[0].setData([]);
chart.series[0].name = data.areaSeriesName;
for (var x in data.lineSeriesData) {
chart.series[1].addPoint([data.lineSeriesData[x][0], data.lineSeriesData[x][1]]);
}
for (var x in data.areaSeriesData) {
chart.series[0].addPoint([data.areaSeriesData[x][0], data.areaSeriesData[x][1]]);
}
setTimeout(recieveData, 60000);
},
error: function() {
setTimeout(recieveData, 60000);
}
});
}