JavaScript Library Described
Overview
In the Simple Gantt Chart Sample we've used the following code to embed AnyGantt Flash Gantt into web-page:
//<![CDATA[
var chart = new AnyChart('./swf/AnyGantt.swf');
chart.width = 700;
chart.height = 300;
chart.setXMLFile('./anychart.xml');
chart.write();
//]]>
</script>
This is the most easy and convenient way to add gantt charts to a web-page and this functionality is provided by AnyGantt Javascript Integration Library.
This library is a set of JavaScript Functions that make using of AnyGantt much easier, it allows:
- Easy and quick gantt chart embedding.
- Interaction with the gantt chart.
- Version test for Adobe™ Flash Player.
- AnyGantt JavaScript Integration Library fixes the problem with users have to first click on your Flash content to 'activate' it before interacting with it.
- Valid HTML/XHTML code. An <embed> tag isn't maintained in any version of HTML or XHTML.
- No difficulties with gantt chart embedding and easy interaction with the embedded gantt chart.
AnyGantt JavaScript Integration Library Source code available here: Download
In this article we will list constructors, methods, properties and events provided by the Library and Demonstrate some its features.
AnyGantt JavaScript Library Reference
This library is intended to make embedding of the gantt chart into web page easier, you have just to specify where swf file is located, set height and width of the gantt chart and set where and how your gantt chart should get data.
AnyGantt Library includes one class - AnyChart, below you will find tables with all its features, their descriptions and links to the samples where this features are used.
AnyChart Class
Constructors
Constructors create gantt chart objects to be embedded into the page, you will find constructors in any page that use library.
Constructor | Parameters | Description |
---|---|---|
AnyChart() | Creates new gantt chart. | |
AnyChart(swf) | swf: String - path to swf file | Creates new chart using specified swf file. |
AnyChart(swf, preloader) | swf: String - path to swf file preloader: String - path to preloader swf file |
Creates new gantt chart using specified swf file and preloader files. Read more: About preloader.swf |
Properties
Using properties you can get/set width, height and background color of chart object.
Chart id and flashObject can be used to identify the chart on the page.
Property | Descriptions |
---|---|
bgColor:String | Flash movie background html color. |
flashObject:Object (read-only) | Link to embed (or object) DOM element with gantt chart. |
id:String (read-only) | Unique chart id. Can be used with getChartById method. |
width:String | Gantt chart width. |
height:String | Gantt chart height. |
preloaderInitText:String | Text to be shown on preloader initilization (if preloader is used). Default: "Initializing..." |
preloaderLoadingText:String | Text to be shown while AnyGantt is loading AnyGantt.Swf Default: "Loading... " |
initText:String | Text to be shownwhile AnyGantt is initializing Default: "Initializing..." |
xmlLoadingText:String | Text to be shown while AnyGantt is loading XML Data. Default: "Loading xml..." |
resourcesLoadingText:String | Text to be shown while AnyGantt is loading resources (images, etc.) Default: "Loading resources..." |
noDataText:String | Text to be shown when AnyGantt gets gantt chart without data. Default: "No Data" |
waitingForDataText:String | Text to be shown when AnyGantt gets no data source (neither XMLFile nor XMLText is set to chart) |
templatesLoadingText:String | Text to be shown while AnyGantt is loading gantt chart templates Default: ""Loading templates..."" |
wMode:String | Sets the Window Mode property of the SWF file for transparency, layering, and positioning in the browser. Valid values of wmode are window, opaque, and transparent. Set to "window" to play the SWF in its own rectangular window on a web page. Set to "opaque" to hide everything on the page behind it. Set to "transparent" so that the background of the HTML page shows through all transparent portions of the SWF file. |
Static Properties
Using static properties you can set defaults for swf files and gantt charts widths, heights - and don't set them for every chart you create an the page.
Property | Description |
---|---|
swfFile:String | Default AnyGantt swf file. |
preloaderSWFFile:String | Default AnyGantt Preloader swf file. |
useBrowserResize:Boolean | Use browser resize event (makes chart resize faster, when gantt chart is resizable) |
width:String | Default gantt chart width. |
height:String | Default gantt chart height. |
preloaderInitText | Default text to be shown on preloader initilization (if preloader is used). |
preloaderLoadingText | Default text to be shown when preloader loads AnyGantt.Swf |
initText | Default text to be shown when AnyGantt is initializing |
xmlLoadingText | Default text to be shown when AnyGantt loads XML Data. |
resourcesLoadingText | Default text to be shown when AnyGantt loads resources (images, etc.) |
noDataText | Default text to be shown when AnyGantt gets gantt chart without data. |
waitingForDataText | Text to be shown when AnyGantt gets no data source (neither XMLFile nor XMLText is set to chart) |
templatesLoadingText | Text to be shown while AnyGantt is loading gantt chart templates. |
Methods
Methods allow to set gantt chart data from string, file, put gantt chart into the page or certain element on the page. And to make interactions with gantt chart - you can set handlers for chart events.
Method | Parameters | Description |
---|---|---|
write() Returns: null |
Writes to current window. | |
write(elementId) Returns: null |
elementId: String - element id | Write gantt chart to element in current window by elements id. |
write(element) Returns: null |
element: Object - element | Writes to element in current window by elements reference. |
setData(xmlData) Returns: null |
xmlData: String - string with XML | Set chart XML as String You may call this method before write() See: AJAX - Set XML As String JavaScript - Set XML From TextArea Drill Down Charts Sample |
setXMLFile(xmlPath) Returns: null |
xmlPath: String - path to XML file | Sets chart data file path You may call this method before write() See: JavaScript Set XML File Path |
addEventListener(event, handler) Returns: null |
event: String - event type handler: Function - function called when event occurs events list: "pointClick" "pointMouseOver" "pointMouseOut" "pointSelect" "pointDeselect" "create" "draw" "render" "renderView" "drawView" |
Add listener to the event You may call this method before write() See: Handle PointClick Events Handle Chart Draw/Render Events |
getPng() Returns: String |
Gets base64 encoded png chart screenshot. | |
getJpeg() Returns: String |
Gets base64 encoded jpeg chart screenshot. | |
setViewXMLFile(viewId, xmlPath) Returns: null |
viewId: String - view id xmlPath: String - path to XML file |
Sets XML path to the certain view in dashboard. |
setViewData(viewId, xmlData) Returns: null |
viewId: String - view id xmlData: String - string with XML |
Sets XML string to the certain view in dashboard. |
setLoading(text) | text: String - loading message text | Shows loading animation on chart. |
setLoading(viewId, text) | viewId: String - view id text: String - loading message text |
Shows loading animation on certain view in dashboard. |
saveAsImage() | Runs "Save as Image" dialog. Read more about Saving Gantt Chart As Image. |
|
printChart() | Runs "Print Gantt Chart" dialog. | |
getInformation() | Returns an object holding all data from gantt chart. Read more in Gantt Chart Render Events. |
Static Methods
You can get certain gantt chart created before by its id. Id of the chart is generated automatically and can be read using id property.
Method | Parameters | Description |
---|---|---|
getChartById(id) | id: String - chart id | Get chart by its id |
Usage Samples
How to add several gantt charts to the web page
If you want to put several charts on one page you can create several Flash objects and place them on the page where you like.
Read the sample description: Sample Description
Launch the sample with several charts on the page: Open the Sample
Open the folder with several charts on the page sample: Open Folder With Sample
AJAX - Set XML As String
You can get XML String from server using AJAX and then set it to the chart.
Read the sample description: Sample Description
Launch the sample with Set XML As String - AJAX Sample: Open the Sample
Open the folder with Set XML As String - AJAX Sample: Open Folder With Sample
JavaScript - Set XML As String from TextArea
You can take XML from the page and set it to the chart as string, in the sample below XML is placed into <textarea>, you can change XML, click submit button and chart will be redrawn.
Read the sample description: Sample Description
Launch the sample with Set XML As String from TextArea: Open the Sample
Open the folder with Set XML As String from TextArea: Open Folder With Sample
JavaScript Set XML File Path
You can change path to XML File at a run-time and chart will be redrawn, in the sample below several XML Paths are placed into Combo Box - when you pick some file in Combo Box - chart it redrawn.
Read the sample description: Sample Description
Launch the sample with Set XML File Path: Open the Sample
Open the folder with Set XML File Path: Open Folder With Sample
Drill Down Charts Sample
You can use Set XML as string (or Set XML Path) methods with point click events to create drill down charts - in the sample when you click on a point one one chart - the chart below is redrawn (using random data):
Read the sample description: Sample Description
Launch the sample with Drill Down Charts: Open the Sample
Open the folder with Drill Down Charts: Open Folder With Sample
Handle Point Events
Using Point Events you can do certain actions on a page when user click, selects or hovers certain elements on the chart, in this events you can get all data about the chart and point.
Read the sample description: Sample Description
Launch the sample with Point Events handling: Open the Sample
Open the folder with Point Events handling: Open Folder With Sample
Handle Chart Draw/Render Event
Using Chart Draw/Render Event you can do certain actions basing on the data calculated by AnyChart Component:
Read the sample description: Sample Description
Launch the sample with Chart Draw/Render Event handling: Open the Sample
Open the folder with Chart Draw/Render Event handling: Open Folder With Sample