CODEWITHSUNDEEP
gantt-chartanychart
Mendi
Mendi

Reputation: 71

How to print all the tasks in AnyGantt

I am printing the AnyGantt chart using the print API, but all I can print is the part I am viewing, kind of a snapshot of the current screen.

Is there an option to somehow print all the items present in the gantt (at least vertically, something like scrolling down the chart and capturing all the items, event if they are not visible at the moment) in the visible time range?

Thank you.

Upvotes: 1

Views: 813

Answers (2)

AnyChart Support
AnyChart Support

Reputation: 3905

We are glad to notify that we have created a JS module for printing large Gantt charts. You can get the link to the module and sample of using it in the comment below. This module exports enableLargeGanttPrint({Object: chart}) function, which gets the chart instance and implements printing functionality. To print the chart executes right mouse click on the chart and choose 'print' option. This will call standard browser print for prepared Gantt chart.

Upvotes: 0

AnyChart Support
AnyChart Support

Reputation: 3905

This can be implemented with a few code tricks. The idea is to expand the chart's div container to show all existing rows in gantt chart, then print it, and finally collapse the container's div back. Unfortunately, there's no other solution for this now. The snippet below may not work in stackoverflow playground. I will leave a link to the same sample in AnyChart Playground which provides printing features.

anychart.onDocumentReady(function () {
  // The data used in this sample can be obtained from the CDN
  // https://cdn.anychart.com/samples/gantt-charts/activity-oriented-chart/data.js
  anychart.data.loadJsonFile('https://cdn.anychart.com/samples/gantt-charts/activity-oriented-chart/data.json', function (data) {

    var stage = anychart.graphics.create("container");

    // create data tree
    var treeData = anychart.data.tree(data, 'as-table');

    // create project gantt chart
    var chart = anychart.ganttProject();

    // set data for the chart
    chart.data(treeData);

    // set start splitter position settings
    chart.splitterPosition(370);

    // get chart data grid link to set column settings
    var dataGrid = chart.dataGrid();

    // set first column settings
    dataGrid.column(0)
      .title('#')
      .width(30)
      .labels({hAlign: 'center'});

    // set second column settings
    dataGrid.column(1)
      .labels()
      .hAlign('left')
      .width(180);

    // set third column settings
    dataGrid.column(2)
      .title('Start Time')
      .width(70)
      .labels()
      .hAlign('right')
      .format(function () {
      var date = new Date(this.actualStart);
      var month = date.getUTCMonth() + 1;
      var strMonth = (month > 9) ? month : '0' + month;
      var utcDate = date.getUTCDate();
      var strDate = (utcDate > 9) ? utcDate : '0' + utcDate;
      return date.getUTCFullYear() + '.' + strMonth + '.' + strDate;
    });

    // set fourth column settings
    dataGrid.column(3)
      .title('End Time')
      .width(80)
      .labels()
      .hAlign('right')
      .format(function () {
      var date = new Date(this.actualEnd);
      var month = date.getUTCMonth() + 1;
      var strMonth = (month > 9) ? month : '0' + month;
      var utcDate = date.getUTCDate();
      var strDate = (utcDate > 9) ? utcDate : '0' + utcDate;
      return date.getUTCFullYear() + '.' + strMonth + '.' + strDate;
    });

    // calculate height
    var traverser = treeData.getTraverser();
    var itemSum = 0;
    var rowHeight = chart.defaultRowHeight();
    while (traverser.advance()){
       if (traverser.get('rowHeight')) {
      itemSum += traverser.get('rowHeight');
    } else {
    	itemSum += rowHeight;
    }
    if (chart.rowStroke().thickness != null) {
    	itemSum += chart.rowStroke().thickness;
    } else {
      itemSum += 1;
    }
    }
    itemSum += chart.headerHeight();
    
    //customize printing
    var menu = chart.contextMenu();
    menu.itemsFormatter(function(items) {
      items['print-chart'].action = function() {
        document.getElementById('container').style.height = String(itemSum) + 'px';
        setTimeout(function() {
          chart.print();
          setTimeout(function() {
            document.getElementById('container').style.height = '100%';
          },5000);
        },1000);
      }
      return items;
    });

    chart.container(stage).draw();
    chart.zoomTo(951350400000, 954201600000);
  });
});
html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
<link href="https://cdn.anychart.com/releases/8.2.1/fonts/css/anychart-font.min.css" rel="stylesheet"/>
<link href="https://cdn.anychart.com/releases/8.2.1/css/anychart-ui.min.css" rel="stylesheet"/>
<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-bundle.min.js"></script>
<div id="container"></div>

Upvotes: 2

Related Questions