You must be logged in to post your query.
Home › Forums › Feature Requests & Feedback › Plot dates only present in dataseries
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(); }
ankitcanvas,
Please assign the time-stamp value to label instead of x in dataPoints. For formatting you can use libraries like moment.js. Here, is an example.
__ Anjali
You must be logged in to reply to this topic. Login/Register