JavaScript Library Described
Overview
In the Simple Chart Sample we've used the following code to embed AnyChart Flash Chart into web-page:
//<![CDATA[
AnyChart.renderingType = anychart.RenderingType.FLASH_ONLY;
var chart = new AnyChart('./swf/AnyChart.swf');
chart.width = 700;
chart.height = 300;
chart.setXMLFile('./anychart.xml');
chart.write();
//]]>
</script>
This is the most easy and convenient way to add charts to a web-page and this functionality is provided by AnyChart Javascript Integration Library.
This library is a set of JavaScript Functions that make using of AnyChart much easier, it allows:
- Easy and quick chart embedding.
- Interaction with the chart.
- Version test for Adobe™ Flash Player.
- AnyChart 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 chart embedding and easy interaction with the embedded chart.
AnyChart 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.
AnyChart JavaScript Library Reference
This library is intended to make embedding of the chart into web page easier, you have just to specify where swf file is located, set height and width of the chart and set where and how chart should get data.
AnyChart 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 chart objects to be embedded into the page, you will find constructors in any page that use library.
| Constructor | Parameters | Description |
|---|---|---|
| AnyChart() | Creates new 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 chart using specified swf file and preloader files. Read more: About preloader.swf |
| AnyChart(swf, preloader, id) | swf: String - path to swf file |
Creates new chart using specified swf file and preloader files and assigns a custom chart id (you may need this if you use chart inside a portlet). |
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 chart. |
| id:String (read-only) | Unique chart id. Can be used with getChartById method. |
| width:String | Chart width. |
| height:String | Chart height. |
| messages | Object that containes chart messages. Read more in Preloader tutorial. |
| 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 charts widths, heights - and don't set them for every chart you create an the page.
| Property | Description |
|---|---|
| swfFile:String | Default AnyChart swf file. |
| preloaderSWFFile:String | Default AnyChart Preloader swf file. |
| useBrowserResize:Boolean | Use browser resize event (makes chart resize faster, when chart is resizable) |
| width:String | Default chart width. |
| height:String | Default chart height. |
| messages | Object that containes chart messages. Read more in Preloader tutorial. |
| renderingType | Rendering type: Flash or HTML5, or both. Read more at: HTML5 Migration Guide: Rendering Options. |
Methods
Methods allow to set chart data from string, file, put chart into the page or certain element on the page. And to make interactions with 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 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(width, height) Returns: String |
width:Number - optional width of image. height:Number - optional height of image. |
Gets base64 encoded png chart screenshot of given size. If width and height are omitted - current chart size is used. |
| 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 Chart As Image. |
|
| printChart() | Runs "Print Chart" dialog. | |
| getInformation() | Returns an object holding all data from chart. Read more in Chart Render Events. |
|
| Scroll Related Functions go below, please refer to: Scroll and Zoom Tutorial for more information. | ||
| scrollXTo(xValue) Returns: null |
xValue:Number - x scroll to value | Scrolls X Axis to the given value - if scroll is enabled. |
| scrollYTo(yValue) Returns: null |
yValue:Number - y scroll to value | Scrolls Y Axis to the given value - if scroll is enabled. |
| scrollTo(xValue, yValue) Returns: null |
xValue:Number - x scroll to value, yValue:Number - y scroll to value. |
Scrolls both X and Y Axes to the given values - if scroll is enabled. |
| viewScrollXTo(viewName, xValue):void | viewName:String, xValue:Number | Scrolls X Axis in the given View to the given value - if scroll is enabled. |
| viewScrollYTo(viewName, yValue) Returns: null |
viewName:String, yValue:Number | Scrolls Y Axis in the given View to the given value - if scroll is enabled. |
| viewScrollTo(viewName, xValue, yValue) Returns: null |
viewName:String, xValue:Number, yValue:Number | Scrolls both X and Y Axes in the given View to the given values - if scroll is enabled. |
| setXZoom(xZoomSettings) Returns: null |
xZoomSettings:Object | Sets X Zoom attributes via JS object. |
| setYZoom(yZoomSettings) Returns: null |
yZoomSettings:Object | Sets Y Zoom attributes via JS object. |
| setZoom(xZoomSettings, yZoomSettings) Returns: null |
xZoomSettings:Object, yZoomSettings:Object | Sets X and Y Zoom attributes via JS object. |
| setViewXZoom(viewName, xZoomSettings) Returns: null |
viewName:String, xZoomSettings:Object | Sets X Zoom attributes in the given View via JS object. |
| setViewYZoom(viewName, yZoomSettings) Returns: null |
viewName:String, yZoomSettings:Object | Sets Y Zoom attributes in the given View via JS object. |
| setViewZoom(viewName, xZoomSettings, yZoomSettings) Returns: null |
viewName:String, xZoomSettings:Object, yZoomSettings:Object | Sets X and Zoom attributes in the given View via JS object. |
| getXScrollInfo | Gets object with X axis zoom start and range lenght. | |
| getYScrollInfo | Gets object with Y axis zoom start and range lenght. | |
| getViewXScrollInfo | viewName:String | Gets object with X axis zoom in the given view start and range lenght. |
| getViewYScrollInfo | viewName:String | Gets object with Y axis zoom in the given view start and range lenght. |
Static Methods
You can get certain chart created before by its id. Id of th 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 charts to the web page
If you want to put several charts on one page you can use either AnyChart Dashboards or 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
Download the sample with several charts on the page sample: Download the 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
Download the sample 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
Download the with Set XML As String from TextArea: Download the 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
Dowmload the sample with Set XML File Path: Download the 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
Download the sample with Drill Down Charts: Download the 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
Download the with Point Events handling: Download the 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
Download the sample with Chart Draw/Render Event handling:Download the Sample