Hello,
I need to plot date on x axis. But only those dates which have some data in it. Currently all dates get populated in the x-axis. Please help. Below is the code:
window.onload = function () {
var chart_1= new CanvasJS.Chart(“chartContainer”, {
title:{
fontSize: 20,
fontColor:’#0095da’,
fontWeight:’normal’,
text: ‘HW’
},
exportEnabled: true,
exportFileName: ‘HW’,
zoomEnabled:false,
axisY:{
interlacedColor: “#fbfbfb”,
tickLength: 1,
tickThickness: 1,
//suffix: ‘m’,
labelFontSize: 12,
labelFontColor:’#0095da’
},
toolTip:{
shared: true,
content: function(e){
var body = new String;
var head ;
for (var i = 0; i < e.entries.length; i++){
var str = ” ” + e.entries[i].dataSeries.name + “: “+ e.entries[i].dataPoint.y + “ ” ;
body = body.concat(str);
}
head = “Date Time :“+ (parseDate(e.entries[0].dataPoint.x)) + ““;
return (head.concat(body));
}
},
axisX:{
gridColor: “Silver”,
tickColor: “silver”,
valueFormatString: “DD-MM-YYYY hh:mm TT”,
title:’Date Time’,
titleFontSize: 17,
//titleFontColor:’#0095da’,
labelAngle: 97,
labelFontSize: 12,
labelFontColor:’#0095da’
},
data: [
{
type: “line”,
lineThickness:3,
showInLegend: true,
name: ‘Height(m)’,
color: “#00B74F”,
dataPoints: [{ x : new Date(1415016180000) , y : 2.0 },{ x : new Date(1420093800000) , y : 2.0 },{ x : new Date(1420790940000) , y : 1.0 },{ x : new Date(1420877280000) , y : 2.0 },{ x : new Date(1421815440000) , y : 1.0 },{ x : new Date(1421818740000) , y : 2.0 }]
},
{
type: “line”,
lineThickness:3,
showInLegend: true,
name: ‘Weight(kg)’,
color: “#0095C8″,
dataPoints: [{ x : new Date(1415016180000) , y : 120.0 },{ x : new Date(1420093800000) , y : 142.0 },{ x : new Date(1420790940000) , y : 300.0 },{ x : new Date(1420877280000) , y : 100.0 },{ x : new Date(1421815440000) , y : 120.0 },{ x : new Date(1421818740000) , y : 142.0 }]
}
]
});
chart_1.render();
}
.
