JavaScript Library Described

Overview

In the Simple Gantt Chart Sample we've used the following code to embed AnyGantt Flash Gantt into web-page:

<script type="text/javascript" language="javascript">
//<![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:

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.

to top

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

to top

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)
Default: "Waiting for data..."

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.

to top

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.

to top

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.

to top

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

to top

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

to top

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

to top

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

to top

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

to top

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

to top

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

to top

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

to top