JavaScript API Overview

Overview

When you work with AnyChart Stock in web pages, one of the main things to know and use is JavaScript library that is shipped with the component. AnyChart Stock JS library provide Java Script API that gives you an ability to use, manipulate and manage AnyChart Stock Component in a most effective way.

This section highlights main areas of AnyChart Stock JavaScript Library application and use.

to top

AnyChartStock.js Library

AnyChart Stock JavaScript Library is shipped as a single JS file that can be found in product distributive set or any downloadable sample.

Library makes working with Flash component on the page much easier, provides various ways for embedding and connecting HTML page with chart component.

You can read library source code at:

Basic library usage is described at:

Library itself is actually one class: AnyChartStock, and all its properties, methods and events are listed and described at:

to top

JavaScript API Features

AnyChart Stock JavaScript Library provides a lot of useful methods and options, allowing developer to solve a wide range of tasks.

To demonstrate and explain these features we have created a special Samples Center, where you can find a demo for almost all parts of the library. This samples center can be found at:

Section below lists most significant features of the library and tasks they allow to solve.

to top

Embed chart into the page

AnyChart Stock Library provides special methods that allow to embed chart into the page in a way that allows this content to be viewed in all browser and any page structure, these methods are very safe and handy. Also, you can alter size and visibility after embedding and safely remove chart from the page.

Learn more about embedding at:

Samples can be found at:

to top

Setting chart configuration

AnyChart Stock allows you to set chart configuration in XML or JSON format, they are equivalent and you can decide which one to use depending on your technology choice.

Initial chart configuration can be set:

1) As file, which can be either static file on server or server-side script. This option is described in:

2) As XML string or JavaScript Object with JSON structure. This option is described at:

Samples can be found at:

to top

Real time chart reconfiguration

When chart is embedded and shown on the page you can still alter its configurations and settings without full page reloading. This reconfiguration can be also done using XML/JSON files or XML String/JavaScript Object.

Also, here you can use special options for XML String/JavaScript Object updates, which allow you to update only the part of chart configuration to speed up chart update and avoid full redraw.

Reconfiguration is described at:

Samples can be found at:

to top

Chart modification using chart object model

Unique and very handy feature of AnyChart is the ability to work with object model of chart configuration.

When chart is added to the page and its initial configuration is set using XML or JSON, you can get access to object model of chart configuration, which is updatable - so you can change any settings via altering this object model.

Working with object model is described in the following article:

And samples can be found at:

to top

Real time data streaming and manipulations

AnyChart Stock JavaScript Library allows you to organize live data streaming, do periodical chart update, update existing points, insert data portions into existing data sets and use AJAX to load and add new data to the chart.

All these options are described in the special article:

Detailed samples can be found at:

to top

Handling chart events

AnyChart Stock supports handling of different events that are generated by the component in its lifecycle.

Handling chart events and full list of events can be found at:

Samples with events handlers can be found at:

to top

Real time Event markers manipulations

Event markers are very important and informative, and they are a special entity, so AnyChart Stock JavaScript Library provides several handy methods for the most useful operations with Event Markers: fast add/remove, show/hide, select/deselect and altering settings for a single Event Marker or a group.

Please take a look at samples that demonstrate working with Event Markers:

to top

Getting chart data

Whether you want to create custom controls, show additional data on the page or synchronize chart with the application - you need to get the current chart data. AnyChart Stock gives you this ability and you can read the data from the series, technical indicators and event markers.

Some special things about getting actual chart information is described in:

Please take a look at samples that demonstrate these options:

to top

Export and Printing

A chart can be exported as a static image in the PNG or JPG format or as a PDF document with an embedded static image of the chart or a fully interactive functional chart, as user sees it on the page, and, of course, chart can be printed - these features are available to the end user via context menu of the chart.

Developer can invoke these features programmatically, with ability to alter export/printing settings. Please see samples at:

to top

Scaling and Scrolling

You can control selected range and zooming level using two special methods, they allow you to create custom navigation controls:

These methods are demonstrated in two samples in AnyChart Stock Online HTML/JavaScript Samples Center:

Online HTML/JavaScript Sample
External Synchronized Event Markers List
Obtaining event markers custom attributes values.

Online HTML/JavaScript Sample
Custom HTML Range Selector
Creating custom HTML based range selector using timeline navigation methods.

to top

Create custom HTML chart controls

If built-in controls do not satisfy your needs or you miss some functionality, then AnyChart Stock Java Script Library can help you to create your own custom controls with added functionality.

Using events fired by different chart elements and a set of methods that allow to read and change chart properties, you can easily create a custom legend, tooltip, range selector or any other control you need.

Sample article below describes how to create custom HTML tooltips for Event Markers:

Several samples of custom HTML controls can be found at:

to top