Customer Login
Sales: +1 (888) 845-1211(USA) or +44 20 7193 9444(Europe)

Home Products Technologies Download Buy Partners Support Company

AnyChart AnyStock AnyMap AnyGantt

ASP ASP.NET PHP JSP Adobe Flash Adobe Flex Oracle APEX Microsoft SharePoint Microsoft PowerPoint

AnyChart AnyStock AnyMap AnyGantt AnyChart for Oracle APEX AnyStock for Oracle APEX Licensing terms

AnyChart Stock Online HTML/JavaScript Samples Center

This section features several groups of samples, that show interaction between the chart and HTML page using AnyChart Stock JS API. Each sample is targeted on some exact feature or group of features, that might be useful in different situations.

Open any sample and you will find the detailed description of the sample, source code, list of used methods and links to related methods and documentation articles. Also you can download executable part of the sample as zip file. Learn more about the samples use in the documentation: Exploring the Samples article.

See below 96 ready-to-use samples, grouped by areas of use:

Annotations

Adding Annotations on Client-Side

This sample demonstrates adding annotations by user with default or custom settings.

Adding/Removing Annotations Programmatically

This sample demonstrates annotation adding and removing, also demonstrates an ability to remove selected annotation and all annotations on the chart.

Annotation Events Handling

This sample demonstrates how annotation events can be handled.

Get Annotation as JSON or XML

This sample demonstrates an ability to get an annotation configuration in JSON or XML format.

Get Annotation List as JSON or XML

This sample demonstrates an ability to get all annotations in JSON or XML format.

Select/Deselect Annotations Programmatically

This sample demonstrates an ability to select and deselect annotations in the chart.

Set Annotation List as JSON or XML

This sample demonstrates an ability to set annotation list in JSON or XML format.

Updating Existing Annotations

This sample demonstrates how to update an annotation appearance and properties.

Working with Annotations Using Context Menu

This sample demonstrates how you can work with annotations from the context menu.

Changing settings using Object Model

Adding/Removing Series

Adding series, data sets and data providers to the chart and removing them.

Changing Series Properties

Changing series type, name and color on-the-fly.

Changing Technical Indicators Parameters

Changing technical indicators parameters and visualization on-the-fly.

Series Comparison

Changing series comparison mode and comparison settings.

Showing/Hiding Charts

Showing and hiding charts dynamically using chart object model.

Showing/Hiding Series

Showing and hiding series dynamically using chart object model.

Showing/Hiding Technical Indicators

Showing and hiding technical indicators dynamically using chart object model.

Switching Data Grouping Interval

Changing data grouping using chart object model.

Switching Y Axis Scale Modes

Changing Y axis settings on-the-fly.

Obtaining Chart Object Model as JavaScript Object

Getting chart object model for the manipulation purposes.

View Elements Object Model

Getting chart elements settings from chart object model for the manipualtion purposes.

Working with Event Markers

Adding/Removing Event Markers

Adding event markers to the chart and removing them.

Navigating to an URL on Event Markers Click

Opening new web page on event marker click.

HTML Tooltips for Event Markers

Creating HTML based event marker tooltips.

HTML Tooltips for Event Markers with Hyperlinks

Creating HTML based event marker tooltips with hyperlinked text.

Simple HTML Tooltips for Event Markers

Creating simple HTML based event marker tooltips.

Getting Event Markers List in a Time Range

Get the list of event markers in the visible date time range and show them on the page.

Merged Event Markers Events Handling

Handling merged event markers events.

Selecting Event Markers Using JavaScript

Selecting and Deselecting event markers using JavaScript methods.

Showing/Hiding Event Markers Groups

Showing and hiding event markers groups dynamically using chart object model.

Showing/Hiding Event Markers using JavaScript

Showing and hiding event markers on the chart.

Updating Event Markers Visual Settings Using JavaScript

Changing event markers settings.

Real-time Data Streaming and Manipulations

AJAX Data Loading

Loading remote data using AJAX and appending it to a chart without reloading.

Inserting Data into a Data Set

Inserting new data to the data sets.

Data Manipulation Operations Grouping

Various data manipulation methods: adding, removal and update.

Real-Time Data Streaming

Creating charts with Real-Time Streaming.

Real-Time Data Streaming with Two Data Sets

Creating charts with Real-Time Streaming and several data sets.

Real-Time Data Streaming with a Simple Data Set

Simple streaming with one data set.

Dynamic Data Source

Using the external server script to obtain dynamic csv data.

Exporting CSV data

Getting values streamed to a dataset as CSV string.

Updating Data Set Values

Changing existing data values in the chart.

Updating Data Set Values along with Data Streaming

Changing existing data values in the chart and creating data streaming.

Manual Update of Data Set Values

Manual altering of series values in the chart.

Miscellaneous

Very simple chart sample that uses minimal configuration and basic embedding.

Progress and Status Messages Customization

Customizing progress and status messages.

Disabling Chart Interactivity on Startup

Disabling chart interactivity on chart load.

Enabling and Disabling Chart Interactivity

Enabling and disabling chart interactivity by request.

Synchronizing charts selected range

Synchronizing selected range changes of two charts on the page.

Switching Chart to the Waiting State

Showing any custom message on the chart.

Embedding, Resizing, Hiding and Removing Charts

Changing Chart Size

Setting chart size in pixels or percents .

Flash Player Detection

Detecting the presence of the required Flash Player.

Removing Chart object and/or Flash Object from the page.

Chart Resizing Modes

Chart resizing modes demonstration.

Showing/Hiding Chart on the Page

Showing and hiding chart flash object on the page.

Chart Embedding with the Use of jQuery

Writing chart into the DOM object using jQuery.

Basic Chart Embedding

Writing chart into the HTML page by container id.

Events handling

Chart Mouse Events Handling

Handling mouse events.

Custom Context Menu Items Handling

Working with custom context menu items.

Event Markers Events Handling

Handling event markers mouse events.

Handling onSelectedRangeChange Event

Handling timeline selected range change events.

Custom HTML Controls

Creating Chart HTML Tooltip

Creating custom HTML tooltip for data points and getting data from the chart.

Custom HTML Range Selector

Creating custom HTML based range selector using timeline navigation methods.

External Synchronized Event Markers List

Obtaining event markers custom attributes values.

Obtaining Actual Chart Information

Get Y-Axes Information

Demonstrates obtaining of an Y-Axis scale minimum, maximum and interval values.

Getting Current Data Grouping Interval

Getting current data grouping information.

Getting Global and Selected Date Ranges

Getting current and global timeline ranges.

Getting Candlestick and OHLC Series Values

Getting OHLC and Candlestick series data from the chart.

Getting Value Changes

Getting value change data in comparison scale mode.

Getting Series Custom Values

Getting custom column value from series data provider.

Getting Percent Changes Values

Getting percent value change data in comparison scale mode.

Getting Single Value from the Series

Getting simple series value.

Getting Technical Indicators Values

Getting technical indicator values.

Getting Range Based Series Values

Getting range based series values.

Image Export, PDF Export and Printing

Exporting as Interactive PDF Using JavaScript

Exporting chart as Interactive PDF with custom settings using exporting methods.

Exporting as JPG Using JavaScript

Exporting chart as JPEG image with custom settings using exporting methods.

Exporting as PDF Using JavaScript

Exporting chart as static PDF with custom settings using exporting methods.

Exporting as PNG using JavaScript

Exporting chart as PNG image with custom settings using exporting methods.

Automatic Chart Exporting

Exporting chart PNG image and saving it to server automatically on chart draw.

Initiating Chart Export Using JavaScript

Initiating chart export to JPEG, PNG, PDF or Interactive PDF.

Export Chart as PNG Image to Server

Exporting chart image and sending it to server upon request.

Export Chart as Base64 Encoded String

Getting exported chart as base64 encoded string.

Exporting Chart as Interactive PDF Document into Base64 Encoded String

Exporting chart as Interactive PDF with custom settings into base64 encoded string.

Exporting Chart as JPG into Base64 Encoded String

Exporting chart as JPEG image with custom settings into base64 encoded string.

Exporting Chart as PDF Document into Base64 Encoded String

Exporting chart as static PDF with custom settings into base64 encoded string.

Exporting Chart as PNG into Base64 Encoded String

Exporting chart as PNG image with custom settings into base64 encoded string.

Printing chart and changing printing settings.

Component Configuration Options

Dynamic Server-Side Configuration Script

Using parametrized dynamic server-side script as chart configuration XML file.

Using setJSONFile Method

Changing chart configuration using several JSON files.

Setting Component Config as JSON File

Setting chart configuration using JSON file.

Using setXMLFile Method

Changing chart configuration using several XML files.

Setting Component Config as XML File

Setting chart configuration using XML file.

Event Markers from RSS (JSON)

Loading events RSS and showing them as event markers on the chart. Event markers are configured using JSON.

Event Markers from RSS (XML)

Loading events RSS and showing them as event markers on the chart. Event markers are configured using XML.

Using setConfig with JSON

Setting chart configuration using JSON object.

Using setConfig with XML String

Setting chart configuration using XML string.

Using setSettings with JS

Changing chart settings using JavaScript object.

Using setSettings with XML

Changing chart settings using XML string.