Hi,
I have implemented the graph based on your reply. but still, there are some problems (please check my code)
1. Zoom in and Zoom out is not working
2. Line Marker:- I don’t want the whole line, I need a line like what we marked in image 1 (see image-1, marked as option 1)
3. Can I handle zoom in and zoom out by an event (see image-1, marked as option 2)
Image 1 Url: https://imgur.com/JmtAjHB
This is My working code
————————-
var chart = new CanvasJS.Chart(“chartContainer”, {
title: {
text: “Machine Operating Time”
},
zoomEnabled: true,
zoomType: “y”,
axisY: {
minimum: (new Date(2016, 0, 25, 17, 30)).getTime(),
maximum: (new Date(2016, 0, 27, 17, 30)).getTime(),
interval: (12 * 60 * 60 * 1000),
labelFormatter: function(e){
return CanvasJS.formatDate(e.value, “DD-MMM h:mm TT”);
},
stripLines:[
{
value: new Date(2016, 0, 26, 18, 30).getTime(),
color:”red”,
label:”40258″
}
]
},
toolTip:{
contentFormatter: function ( e ) {
return “Machine ” + e.entries[0].dataPoint.label + “</br> Start Time: ” + CanvasJS.formatDate(e.entries[0].dataPoint.y, “DD-MMM h:mm TT”) + “</br> Stop Time: ” + CanvasJS.formatDate(e.entries[0].dataPoint.y, “DD-MMM h:mm TT”);
}},
data: [
{
type: “stackedBar”,
dataPoints: [
{ label:”A” , y: (new Date(2016, 0, 26, 18, 30).getTime()),indexLabel:”Machine Running”,color:”green”,indexLabelFontColor:”white” }
]
},
{
type: “stackedBar”,
dataPoints: [
{ label:”A”, y: new Date(2016, 0, 27, 5, 30).getTime() – new Date(2016, 0, 26, 18, 30).getTime(),indexLabel:”Machine Down”,color:”red”,indexLabelFontColor:”white”}
]
},{
type: “stackedBar”,
dataPoints: [
{ label:”A”, y: new Date(2016, 0, 27, 15, 30).getTime() – new Date(2016, 0, 27, 5, 30).getTime(),indexLabel:”Machine Running”,color:”green”,indexLabelFontColor:”white”}
]
},
]
});
chart.render();
.
