Printing
- Overview
- Printing Mode
- Configuring Border Setting
- Data Grid Columns
- Configuring Scale
- Configuring header and footer
- Page Margins
- Using JavaScript to open Printing Menu
Overview
AnyGantt gives you a wide range of features to configure printing. One of the most useful features in AnyGantt is support of multiple page printing - you can print a Gantt chart that is hidden with scroll on the screen, keeping Data Grid intact.
Printing Modes
AnyGantt supports two printing modes, you can choose between single and multiple page printing.
SinglePage mode will print Gantt Chart on one page. It will be the same as if you Save Gantt Chart as image - only visible part of the chart will be printed, note that Scroll Bars and Navigation Panel will be printed as will.
Here is a sample of the resulting print job:

MultiPage mode. MultiPage mode is created to allow printing of the whole project. At the same time scrolls and navigation will be removed and (optionally) page numbering, header and footer. The quantity of the pages depends on current project scale, user can zoom to any level and print in that view.
Sample print is shown below. The same project as above, is printed on eight pages numbered, footer and header added:

Ways to open Print Dialog
There are two way to open print dialog in AnyGantt:
1. End-user launches Print from Flash-Player context menu.
AnyGantt adds custom printing item into Flash Player contex menu. Image shows Gantt Chart with context menu:

By default this item is called "Print chart...", you can change this text or remove this item at all. Learn more about Customizing Context Menu.
2. Opening Print Dialog using JavaScript.
To open Printing Dialog JavaScript you can use the special function. You can customize printing options from JavaScript or or predefined in XML. See how to use this function below.
Choosing Printing Mode
AnyGantt offers two modes: SinglePage and MultuPage. MultuPage mode is turned on by default.
To change mode you should modify mode attribute in <print> node: SinglePage и MultiPage. XML to set single page mode:
<settings>
<print mode="SinglePage" />
</settings>
</anygantt>
Configuring Border Settings
When MultiPage mode is used Gantt Chart is split into several parts, and each of them is printed on own page. You can add custom border to each page.
XML Syntax that adds custom border on each page:
<settings>
<print>
<border enabled="true" type="Solid" color="DarkRed" thickness="2" />
</print>
</settings>
</anygantt>
As you can see <border> is turned on, made black and one pixel width.
Data Grid Columns
When you use SinglePage only visible column are printed, choosing columns is available only in MultiPage mode.
By default in MultiPage mode AnyGantt prints only columns that are visible at Data Grid at printing time. Also default settings print Data Grid columns only in the first page.
If you want to add all columns to be printed set print_all_columns in <print> node to true.
Here is a sample XML:
<settings>
<print print_all_columns="true">
</print>
</settings>
</anygantt>
Note that if columns would not fit into one page - they will be printed on more than one page.
To give user an ability to navigate through the printed gantt chart you can print data grid on every page. By default it is printed on first page only.
To add data grid to every page set the XML shown below:
<settings>
<print columns_on_every_page="2">
</print>
</settings>
</anygantt>
As you can see there is the attribute columns_on_every_page in <print> node. The value of this attribute sets the quantity of columns that will be printed.
Configuring Scale
If the project can be into the whole number of the pages AnyGantt expands the scale in the way that allows to cover all pages. When this option works Time Scale changes, as the result the timescale printed may differ from the one displayed on the screen.
If you'd like to turn this option off set fit_timescale_to_end_of_page attribute in <print> node. By default it is set to true.
XML shown below turn automatic expansion off:
<settings>
<print fit_timescale_to_end_of_page="false">
</print>
</settings>
</anygantt>
As the result the scale on screen and on the paper will be exactly the same.
Confuguring header and footer
To add numbers on the page and any additional data you can use header and footer.
XML syntax for header and footer is the following:
<settings>
<print>
<header enabled="true" align="Near">
<text>Sample Project - Page {%PageNum} of {%PageCount}</text>
<font face="Verdana" size="18" color="#000000" bold="true" italic="false" />
<margin left="5" top="5" bottom="8" right="5" />
</header>
<footer enabled="true" align="Near">
<text>Page {%PageNum} of {%PageCount}</text>
<font face="Verdana" size="18" color="#000000" bold="false" />
<margin left="5" top="5" bottom="5" right="5" />
</footer>
</print>
</settings>
</anygantt>
Be default the header is turned off, and footer is turned on. Use enabled attribute in <header> and <footer> to enable and disable them.
XML shows how to turn both of them off:
<settings>
<print>
<header enabled="false" />
<footer enabled="false" />
</print>
</settings>
</anygantt>
You can either use static text, page numbering or both of them.
This XML snippet shows how to set "XYZ Destroyer Development Plan" to the header and "© Crazy Bunny Inc" to the foooter. As the result - you will the same text on every page.
<settings>
<print>
<header enabled="true">
<text>XYZ Destroyer Development Plan</text>
</header>
<footer enabled="true">
<text>© Crazy Bunny Inc</text>
</footer>
</print>
</settings>
</anygantt>
Static text is nice, but page numbering is crucial if we talk about large projects. There are two special tokens: {%NumPage} - to print out the index of the page printed, and {%TotalPages} - to print the total number of the pages.
These tokens can be used both in header and in footer, with or without static text added:
<settings>
<print>
<header enabled="true">
<text>XYZ Destroyer Development Plan. © Crazy Bunny Inc</text>
</header>
<footer enabled="true">
<text>Page {%PageNum} of {%PageCount}</text>
</footer>
</print>
</settings>
</anygantt>
To align texts use align attribute in <header> and <footer>, with the following possible values:
Value | Description |
---|---|
Near | Align text by Left. |
Far | Align text by Right. |
Center | Centered |
Sample XML with aligns set:
<settings>
<print>
<header enabled="true" align="Center">
<text>Sample Project</text>
</header>
<footer enabled="true" align="Far">
<text>Page {%PageNum} of {%PageCount}</text>
</footer>
</print>
</settings>
</anygantt>
Header and footer can have margins, note that the size of margins affects the size of Gantt Chart.
Sample XML for margins:
<settings>
<print>
<header enabled="true" align="Near">
<text>Sample Project</text>
<margin left="60" bottom="30" top="70" />
</header>
<footer enabled="true" align="Near">
<text>Page {%PageNum} of {%PageCount}</text>
<margin left="20" bottom="10" top="50" />
</footer>
</print>
</settings>
</anygantt>
<margin> node is used to configure left, top, right and bottom margins.
To change header and footer font use <font> node .
XML below shows font configuration:
<settings>
<print>
<header enabled="true" align="Near">
<text>Sample Project</text>
<font face="Times New Roman" size="20" color="#0000DD" bold="true" italic="true" />
</header>
<footer enabled="true" align="Near">
<text>Page {%PageNum} of {%PageCount}</text>
<font face="Tahoma" size="16" color="#DD00DD" bold="false" underline="true" />
</footer>
</print>
</settings>
</anygantt>
Page Margins
You can configure page margins that will affect all printed content, including header and footer, both in SinglePage and MultiPage modes.
XML for page margins:
<settings>
<print>
<margin all="50" left="45" right="45" top="30" bottom="30" />
</print>
</settings>
</anygantt>
Using JavaScript to open Printing Menu
You can open printing dialog from JavaScript and, if needed set custom printing options.
To do that you have to use print() function in JavaScript. Sample below shows how to launch printing dialog from JS with default printing settings:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript" language="JavaScript" src="./js/AnyChart.js"></script>
<title>Printing From JavaScript</title>
</head>
<body>
<input type="button" value="Print (default settings)" onclick="printDefault()" />
<div id="container" />
<script type="text/javascript" language="JavaScript">
//<![CDATA[
var chartSample = new AnyChart('./swf/AnyGantt.swf');
chartSample.width = '100%';
chartSample.height = '90%';
chartSample.setXMLFile('anygantt.xml');
chartSample.write('container');
function printDefault() {
chartSample.flashObject.print();
}
//]]>
</script>
</body>
</html>
If you want to set custom properties you need to provide print() function a string argument that hold <print> node with all attributes and subnodes set according to AnyGantt specifications, as shown in sample below:
<head>
<script type="text/javascript" language="JavaScript" src="./js/AnyChart.js"></script>
<title>Printing From JavaScript</title>
</head>
<body>
<input type="button" value="Print (default settings)" onclick="printCustom()" />
<div id="container" />
<script type="text/javascript" language="JavaScript">
//<![CDATA[
var chartSample = new AnyChart('./swf/AnyGantt.swf');
chartSample.width = '100%';
chartSample.height = '90%';
chartSample.setXMLFile('anygantt.xml');
chartSample.write('container');
function printCustom() {
chartSample.flashObject.print("><print print_all_columns=\"true\" columns_on_every_page=\"2\">" +
"<header enabled=\"true\">"+
"<text>Print test project</text>"+
"<margin all=\"0\" bottom=\"10\"/>"+
"</header>"+
"<footer>"+
"<text>Page {%PageNum} from {%PageCount}</text>"+
"<margin all=\"20\"/>"+
"</footer>"+
"<border color=\"red\"/>"+
"<margin all=\"20\"/>"+
"</print>");
}
//]]>
</script>
</body>
</html>
The sample below shows both methods of opening printing dialog from Java Script:
You can open this sample from here: Open the JS Printing Sample
You can open folder with sample files from here: Open Folder With Sample