I am using google annotated timeline chart to display some data. When data is less I could see the desired output, all the timelines are perfect . But In my case data is 400,000 + and it will keep on increasing. So my query is when i try to plot with such a huge data i only see points or dots instead of proper timeline. How to fix it ?
Since i am unable to understand what needs to be done to fix it.
function drawChart() {
debugger;
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
if (jsonObj != "-1") {
if (jsonObj.length <= 0) {
$('#Divbox').hide();
$('#chart_div').text('No Data Available.');
//to disble download button
// $('#btnDownload').prop('disabled', true);
}
else {
//to enable download button
//$('#btnDownload').prop('disabled', false);
var arr = new Array(jsonObj.length);
for (var i = 0; i < jsonObj.length; i++) {
arr[i] = new Array(jsonObj[i].length);
for (var j = 0; j < jsonObj[i].length; j++) {
if (j == 0) {
arr[i][j] = jsonObj[i][j];
}
else {
if (jsonObj[i][j] == "") {
arr[i][j] = null;
}
else {
arr[i][j] = parseInt(jsonObj[i][j]);
}
}
}
}
var list = "@Html.Raw(ViewBag.datatypesNames)";
var arrlist = list.split(",");
var data = new google.visualization.DataTable();
data.addColumn('date', 'SensorValueDate');
for (var j = 0; j < arrlist.length; j++) {
data.addColumn('number', arrlist[j]);
}
//data.addColumn('string', 'Unitname');
debugger;
for (var index = 0; index < arr.length; index++) {
debugger;
arr[index][0] = new Date(arr[index][0]);
}
data.addRows(arr);
//chart.draw(data, { displayAnnotations: true });
window.setTimeout(function () {
try { chart.draw(data, { displayAnnotations: true }); } catch (err) {
console.err(err);
}
}, 1000);
}
}
Your help would be highly appreciated.