Home forums Feature Requests & Feedback Activity timeline chart

This topic contains 9 replies, has 4 voices, and was last updated by  Suyash Singh 1 month, 4 weeks ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #14330

    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.

    #14337

    Vishwas R
    Keymaster

    @thibaultcuvillier,

    Are you looking something like this?


    Vishwas R

    #14348

    Hi Vishwas,

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

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

    Thibault.

    #14360

    Vishwas R
    Keymaster

    Thibault,

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


    Vishwas R

    #14369

    Great !

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

    Thanks for you kind support.
    Thibault.

    #14460

    isuru
    Member

    but how my parameters set this

    #14461

    isuru
    Member

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

    #14463

    Suyash Singh
    Moderator

    @isuru

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

    __

    Suyash Singh
    Team CanvasJS

    #14465

    isuru
    Member

    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

    #14466

    Suyash Singh
    Moderator

    @isuru

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

    __

    Suyash Singh
    Team CanvasJS

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.