AnyChart 8.1.0 - Resource Gantt - Determine rowClick location

Question

I am using the AnyChart 8.1.0 resource Gantt (anychart.ganttResource()) to show and edit planned data (car reservations). I can catch a click on a "period" - using the rowClick event - to popup a modal to edit a reservation. But now I also would like to add a reservation by clicking on a location on my chart. I know what line (car) I click on, but I also would like to pre-fill the planned period.

Is there a way to determine the time (start and/or end) where the click event is executed?

Thanks! Roel

Answer 1

Yes, it's possible with some extra code. I've prepared a snippet for you to show how you can get timestamp of click, please try it

anychart.onDocumentReady(function () {
    var data = getData();

    // Creates Gantt Resource chart.
    var chart = anychart.ganttResource();
    chart.data(data, "as-table");

    chart.title("Click anywhere in timeline area");
    chart.container("container").draw();
    chart.fitAll();
  
  //required variables
  var timeline = chart.getTimeline();
  var scale = chart.xScale();
  var getRange = 0;
  var gap = 0;
  var ratioClick = 0;
  var dateClick = 0;
  
  //mouse click listener
  chart.listen('rowClick', function(e) {
    //get timeline visible range
    getRange = scale.getRange();
    gap = getRange.max - getRange.min;
    //calculate coordinate of click
   ratioClick = (e.originalEvent.clientX - timeline.bounds().left()) / (timeline.width());
    //calculate a timestamp related to the click
    dateClick = +(ratioClick * gap + getRange.min).toFixed(0);
 
    //show result to chart title and browser console
    chart.title(anychart.format.dateTime(new Date(dateClick), "dd MMMM yyyy HH:mm"));
    console.log(anychart.format.dateTime(new Date(dateClick), "dd MMMM yyyy HH:mm"));
  });

    function getData() {
        return [
            {
                "id": "1",
                "name": "Server 1",
                "broken": "11%",
                "maintance": "20%",
                "working": "69%",
                "periods": [
                    {
                        "id": "1_1",
                        "style": "working",
                        "fill": "#008000 0.7",
                        "stroke": "none",
                        "hoverFill": "green",
                        "hoverStroke": "cyan",
                        "start": 1201795200000,
                        "end": 1201934691000
                    },
                    {
                        "id": "1_2",
                        "style": "maintance",
                        "fill": "#FFFF00 0.7",
                        "stroke": "none",
                        "hoverFill": "yellow",
                        "hoverStroke": "cyan",
                        "start": 1201934691000,
                        "end": 1201997175000
                    },
                    {
                        "id": "1_3",
                        "style": "working",
                        "fill": "#008000 0.7",
                        "stroke": "none",
                        "hoverFill": "green",
                        "hoverStroke": "cyan",
                        "start": 1201997175000,
                        "end": 1202304539000
                    },
                ]
            },
            {
                "id": "2",
                "name": "Server 2",
                "broken": "9%",
                "maintance": "25%",
                "working": "66%",
                "periods": [
                    {
                        "id": "2_1",
                        "style": "working",
                        "fill": "#008000 0.7",
                        "stroke": "none",
                        "hoverFill": "green",
                        "hoverStroke": "cyan",
                        "start": 1201795200000,
                        "end": 1201859302000
                    },
                    {
                        "id": "2_2",
                        "style": "working",
                        "fill": "#008000 0.7",
                        "stroke": "none",
                        "hoverFill": "red",
                        "hoverStroke": "cyan",
                        "start": 1201859302000,
                        "end": 1201908412000
                    },
                    {
                        "id": "2_3",
                        "style": "working",
                        "fill": "#008000 0.7",
                        "stroke": "none",
                        "hoverFill": "green",
                        "hoverStroke": "cyan",
                        "start": 1201908412000,
                        "end": 1201974133000
                    },
                    {
                        "id": "2_4",
                        "style": "maintance",
                        "fill": "#FFFF00 0.7",
                        "stroke": "none",
                        "hoverFill": "yellow",
                        "hoverStroke": "cyan",
                        "start": 1201974133000,
                        "end": 1202028840000
                    },
                ]
            }
        ];
    }
});

html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

<link href="https://cdn.anychart.com/releases/8.1.0/css/anychart-ui.min.css" rel="stylesheet"/>
<script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-bundle.min.js"></script>
<div id="container"></div>