Activity timeline chart

[ThibaultCuvillier]

Hi,
I am looking for a chart to display activity code in a time line.
Example:
data = [
{x:[dateTime1, dateTime2], y=”Walking”},
{x:[dateTime2, dateTime3], y=”Running”},
{x:[dateTime3, dateTime4], y=”Walking”}
]

Is there is any way to display these data using canvasJs ?
Thanks.

• This topic was modified 7 years, 9 months ago by ThibaultCuvillier.

[Vishwas R]

@ThibaultCuvillier,

Are you looking something like this?

—
Vishwas R

[ThibaultCuvillier]

Hi Vishwas,

No, in fact, it’s a Gant diagram.

Soemthing like:
https://developers.google.com/chart/interactive/docs/gallery/timeline

Thibault.

[Vishwas R]

Thibault,

By setting axisX.reversed property to true, you can achieve this. Please check this updated jsfiddle.

—
Vishwas R

[ThibaultCuvillier]

Great !

I did not saw the .reversed option.
CanvasJS is really great.

Thanks for you kind support.
Thibault.

[isuru]

but how my parameters set this

[isuru]

I pass the list from controller and it contain two dates and one string how can I set this????

[Suyash Singh]

@isuru

Can you kindly brief more about the problem you are facing?

__

Suyash Singh
Team CanvasJS

[isuru]

jQuery(document).ready(function () {

jQuery(“.btn-fleet-enq-view”).click(function () {
var fdate = jQuery(“#FrmDate”).val();
var todate = jQuery(‘#ToDate’).val();
jQuery.ajax({
type: “GET”,
url: “/FleetEnquiry/FleetAllocationDaily”,
data: { fdate: fdate ,todate: todate,},
contentType: “application/json;charset=utf-8”,
dataType: “json”,
success: function (result) {

if (result.login == true) {
if (result.success == true) {

loadFleedEnq(result.data);

} else {

}
} else {
Logout();
}
}
});
});

jQuery(‘#FrmDate’).datepicker({ maxDate: new Date(), dateFormat: “dd/M/yy” });
jQuery(‘#ToDate’).datepicker({ maxDate: new Date(), dateFormat: “dd/M/yy” });

jQuery(‘#FrmDate’).val(getFormatedDate(getMonthAgoMonth(new Date())));
jQuery(‘#ToDate’).val(getFormatedDate(new Date()));

});
function loadFleedEnq(data) {
////alert(data);
//if (data.length > 0) {
//for (i = 0; i < data.length; i++) {
// data[i].mfd_frm_dt ;

//}

var chart = new CanvasJS.Chart(“chartContainer”,
{
title: {
text: “Fleet Allocation”
},
axisY: {
minimum: (new Date(2016, 0, 28, 11, 30, 00)).getTime(),
interval: (1 * 60 * 60 * 1000),
labelFormatter: function (e) {
return CanvasJS.formatDate(e.value, “DD-MMM-YY h:mm:ss TT”);
},
gridThickness: 2

},
axisX: {

reversed: true
},

toolTip: {
contentFormatter: function (e) {

return “” + e.entries[0].dataPoint.label + “</br> Start: ” + CanvasJS.formatDate(e.entries[0].dataPoint.y[0], “DD-MMM-YY h:mm:ss TT”) + “</br>End : ” + CanvasJS.formatDate(e.entries[0].dataPoint.y[1], “DD-MMM-YY h:mm:ss TT”);
}
},

data: [
{
type: “rangeBar”,
dataPoints: [

{ label: “Walking”, y: [(new Date(2015, 0, 28, 12, 20, 00)).getTime(), (new Date(2016, 0, 28, 13, 00, 00)).getTime()] }

]
}
]
});
chart.render();

}

that’s my whole code and loadFleedEnq(data) that part I parse two dates for date range and one string for label

{ label: “Walking”, y: [(new Date(2015, 0, 28, 12, 20, 00)).getTime(), (new Date(2016, 0, 28, 13, 00, 00)).getTime()] }
but I can’t parse here to these data

[Suyash Singh]

@isuru

Can you kindly create a working jsfiddle, so that we can understand the code better and help you out?

__

Suyash Singh
Team CanvasJS