JavaScript Events

• Overview
• Point Events
• Sample - Handling Point Events
• Sample - Handling Map Region Events
• Chart Events
• Sample - Handling Chart Events
• List of Values Available in Point Events
• pointClick, pointMouseOver, pointSelect
• pointMouseOut
• List of Values Available in Chart Events
• render, renderView
• drawView
• create, draw

Overview

AnyChart dispatches a lot of chart events that can be handled within JavScript Code, the most convenient way to use this feature - use AnyChart JavaScript Integration Library.

When event is dispatched AnyChart passes a lot of data about the chart, so you can define what point was clicked and do some actions using this information.

In this tutorial we will list all available events, explain when they are dispatched and what data is avaialble in them. There are also several samples showing how to create event handler and how to use data coming from AnyChart.

addEventListener method of JavaScript Library is used to set event handler:

The following event parameter values (events) are available:

Point Events

Point events can be used to get data about point when user clicks,selects or hovers certain point on the chart.

pointClick, pointMouseOver and pointSelect recieve all information about the point, series, category and data plot, full list of available fields can be found in the end this article.

To add point event listener you should add the following code:

Where onPointClick is a function that will handle an event, this function must have one parameter of Object type, which returns event data:

In the sample below you will find all you need to know to create own point events handlers.

Sample - Handling Point Events

In this sample we will add one chart to the page that will receive data from XML file and add handler to all point events, in event handlers we will read data point name, value and one custom attribute - these values will be diplayed on the page.

Launch the sample with Point Events handling: Open the Sample

Download the sample with Point Events handling: Download the Sample

In the sample page we create a table and place <div> tags in cells that will be used to hold chart and point data recieved, like that:

Chart container:

Point info container:

Then we will add code to body onload event that will load charts when page is loaded:

init function will create new chart, set handlers and write chart to the page:

And here is a sample handler function:

Here it is, you can see in the sample that info is read and placed on the page, you can implement any custom logic based on chart data output, study all available fields - you may find them useful.

Sample - Handling Map Regions Events

In this sample we will add one map to the page that will receive data from XML file and add handlers to all point events, in event handlers we will read region name, value and custom attributes - these values will be displayed on the page.

The idea of the sample is the same as in Point Events sample above, read it if you have questions about this sample.

One important difference between chart and map events samples is that maps sample uses allow_multiple_select feature to allow collecting data about several regions selected.

The Map Region events sample can be used as a draft for creating ZIP, Fips, State, County ot Country Selector control for your web-systems.

Launch the sample with Map Region Events handling: Open the Sample

Download the sample with Map Region Events handling: Download the Sample

Chart Events

You can handle chart creation/draw events to check when chart is loaded and displayed, moreover in render events you can read all chart data and process it how you like, for example output data in other way on the page.

render and renderView events receive all chart data: chart titles, data sereis array, data points array and all precalculated values, you will find full list an the end of this article.

Note that when you update chart or dashboard view using these JS Data Manipulation methods - no render or renderView occurs, only refresh or refreshView.

To add chart event listener you should add the following code:

Where onChartRender is a function that will handle an event, this function must have one parameter of Object type:

In the sample below you will find all you need to know to create own chart events handlers.

Sample - Handling Chart Events

In this sample we will add one chart to the page that will receive data from XML file and add handler to chart render event, in event handler we will read all chart data and store it in a variable, then this variable will be used to show all chart data on the page.

Launch the sample with Chart Draw/Render Event handling: Open the Sample

Download the with Chart Draw/Render Event handling: Download the Sample

First we will create layout for chart and chart info:

Second, we will add code to body onload event that will load charts when page is loaded:

Then we will create init function that will place a chart on the page and set chart render event handler:

Event listener look like that:

And, finally, here is a code of showChartData function, that will put chart dat on a page. This function uses a variable that stores all chart info (chartData was assigned in render event handler), it iterates throigh Series array, and Points array in each of the series:

Here it is, you can see in the sample that info is read and placed on the page, you can implement any custom logic based on chart data output, study all available fields - you may find them useful.

List of Values Available in Point Events

pointClick, pointMouseOver, pointSelect

Point data fields

Point Series Data Fields

Point Category Data Fields

Point Data Plot Fields

Point Y-Axis Fields

Point X-Axis Fields

pointMouseOut

No data available for pointMouseOut - it can be used to undo actions done on pointMouseOver.

List of Values Available in Chart Events

There are two cases in chart events: you single chart mode and dashboard mode.

If you want to get all information about chart you need to invoke something like:

data = chart.getInformation();

and then use collections listed below.

render, renderView events

Render can receive all chart data as if it is a single chart.

Dashboard mode:

Single chart mode:

drawView

Draw view receives only view field that hold the name of the view.

create, draw

Create and Draw events do not receive any data.