I'm using Canvas column chart with time in X axis.
When I'm updating the time-chart, It is showing the regular time intervals in the chart though there's no data at that time.
This is resulting in a vacancy region in the chart and points at the rightmost end .
var liveData=[
{x:new Date( "Fri Jan 01 1960 " + "10:30:00" + " GMT+0530 (IST)"),
y: 20},
{x:new Date( "Fri Jan 01 1960 " + "10:35:00" + " GMT+0530 (IST)"),
y: 20},
{x:new Date( "Fri Jan 01 1960 " + "10:40:00" + " GMT+0530 (IST)"),
y: 20},
{x:new Date( "Fri Jan 01 1960 " + "11:40:00" + " GMT+0530 (IST)"),
y: 20}
]
var chart = new CanvasJS.Chart("chartContainer", {
width: 820,
hieght: 200,
title: {
text: "Live"
},
axisX: {
valueFormatString: "HH:mm:ss",
title: "Time",
gridColor: "white",
gridThickness: 0,
labelFontSize: 13
},
axisY: {
title: "Units"
},
dataPointMaxWidth: 20,
data: [{
// color: "#B0D0B0",
toolTipContent: "Time: {x} <br> Opens: <strong>{y} </strong>",
color: "#452323",
type: "column",
dataPoints: liveData
},
]
});
chart.render(); http://jsfiddle.net/1ekxfh2w/
I want to see the times only where I've data. How can I achieve this??
Or Any other chart that can do the job for me??
change x--> label
and it will solve your problem. Check this Fiddle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.