Working with Data in JavaScript

• Overview
• Methods List
• Samples
• Working with Series
• Working with Points
• DataPlot Attributes - Updating Chart Texts
• Highlight, Select, Deselect
• Changes Application and Update Events

Overview

AnyChart is based on XML data input, but if you'd like to create Data Streaming or fully Client Size interactive applications you can use Java Script data manipulation options.

These methods allows you to add, remove or change the data points and data series in a single chart or in the chart that is a part of a dashboard. Also, you can higlight a point or a series, or select/deselect a point. Along with AJAX related functions you can create application that will give users the great option of run-time chart data editing.

Also, the special Dataplot Attributes can be used to update chart titles, footers and other texts on the chart.

Note: refresh() or view_refresh(viewId) method should be called to apply the changes made.

Note: If you want to change any series or point via JavaScript interaction - it should have unique (within data for series, and within series for points) id set in id attribute.

Methods List

This is the full list of available JavaScript methods used to manipulate data in AnyChart. As you can see the all method names and parameter names are selfdescriptive. Every method exists in "chart" mode and "view" mode. Use this table as the reference for all available methods and see samples in the next section to see how these methods are used.

Method	Description
Data manipulation
setPlotCustomAttribute (name, value)	Sets data plot custom attribute.
addSeries(seriesNode1, ...)	Adds series (multiple or single).
removeSeries(seriesId)	Removes the series.
addSeriesAt(index, seriesNode):void	Adds series to the given position.
updateSeries(seriesId, seriesNode):void	Changes the given series.
showSeries(seriesId, isVisible)	Shows/Hides the given series.
addPoint(seriesId, pointNode, ...)	Adds point(s) to the given series.
removePoint(seriesId, pointId):void	Removes the point from the given series.
addPointAt(seriesId, index, pointNode)	Adds point to the series at given position.
updatePoint(seriesId, pointId, pointNode)	Changes the given point.
refresh()	Applies the changes to the chart.
clear()	Removes all points and series from the chart.
All the same methods can be applied to a view in a dashboard
view_setPlotCustomAttribute(viewId, name, value)	Sets data plot custom attribute. (in the View)
view_addSeries(viewId, seriesNode,...)	Adds series (multiple or single). (in the View)
view_removeSeries(viewId, seriesId)	Removes the series. (in the View)
view_addSeriesAt(viewId, index, seriesNode)	Adds series to the given position. (in the View)
view_updateSeries(viewId, seriesId)	Changes the given series. (in the View)
view_showSeries(viewId, seriesId, isVisible)	Shows/Hides the given series. (in the View)
view_addPoint(viewId, seriesId, pointNode, ...)	Adds point(s) to the given series. (in the View)
view_removePoint(viewId, seriesId, pointId)	Removes the point from the given series. (in the View)
view_addPointAt(viewId, seriesId, index, pointNode)	Adds point to the series at given position. (in the View)
view_updatePoint(viewId, seriesId, pointId, pointNode)	Changes the given point. (in the View)
view_refresh(viewId)	Applies the changes to the chart. (in the View)
view_clear(viewId)	Removes all points and series from the chart. (in the View)
Interactivity Controls
highlightSeries(seriesId, highlighted)	Highlight/Dehighlight the series.
highlightPoint(seriesId, pointId, highlighted)	Highlight/Dehighlight the point.
highlightCategory(categoryName, highlighted)	Highlight/Dehighlight the category.
selectPoint(seriesId, pointId, selected)	Select/Deselect the point.
Interactivity Controls (in Views)
view_highlightSeries(viewId, seriesId, highlighted)	Highlight/Dehighlight the series. (in the View)
view_highlightPoint(viewId, seriesId, pointId, highlighted)	Highlight/Dehighlight the point. (in the View)
view_highlightCategory(viewId, categoryName, highlighted)	Highlight/Dehighlight the category. (in the View)
view_selectPoint(viewId, seriesId, pointId, selected)	Select/Deselect the point. (in the View)

Samples

Below you can find the description of the samples that show how Java Script Data Manipulation functions are used. You can locate the samples themselves in livesamples folder.

Working with Series

In this sample we will show how to add, remove, update and show/hide the data series in the chart, which means - demonstrate the work with the following methods:

Method	Parameters	Description
addSeries(seriesNode1, ...)	seriesNode1: String seriesNode2: String ...	Adds series. Please note, that several series can be added at once.
removeSeries(seriesId)	seriesId: String	Removes the series by the givent series id.
addSeriesAt(index, seriesNode):void	index: Number seriesNode: String	Adds series to the given position, indexing starts at zero.
updateSeries(seriesId, seriesNode):void	seriesId: String seriesNode: String	Changes the given series by the given id.
showSeries(seriesId, isVisible)	seriesId: String isVisible: Boolean	Shows/Hides the given series by the given id. Note: you can make a series to be invisible at loading time using visible attribute of <series> node.

Please open the sample and read comments on the sample page and in sample source code.

Note: refresh() or view_refresh(viewId) method should be called to apply the changes made.

Launch the sample with JavaScript - Working with Series Sample: Open the Sample

Download the sample with JavaScript - Working with Series Sample: Download the Sample

Working with Points

In this sample we will show how to add, remove, update and show/hide the point in the chart, which means - demonstrate the work with the following methods:

Method	Parameters	Description
addPoint(seriesId, pointNode, ...)	seriesId: String pointNode1: String pointNode2: String ...	Adds point to the given series, note that several points can be added at once.
removePoint(seriesId, pointId):void	seriesId: String pointId: String	Removes the point from the given series by the given point id.
addPointAt(seriesId, index, pointNode)	seriesId: String index: Number pointNode: String	Adds point to the series at given position, indexing starts at zero.
updatePoint(seriesId, pointId, pointNode)	seriesId: String pointId: String pointNode: String	Changes the given point in the given series.
updatePointWithAnimation(seriesId, pointId, newValue,animationSettings)	seriesId: String pointId: String newValue: Object animationSettings: Object	Changes point value animating the process.

Please open the sample and read comments on the sample page and in sample source code.

Note: refresh() or view_refresh(viewId) method should be called to apply the changes made.

Launch the sample with JavaScript - Working with Points Sample: Open the Sample

Download the sample with JavaScript - Working with Points Sample: Download the Sample

Launch the sample with updatePointWithAnimation: Open the Sample

Download the sample with updatePointWithAnimation: Download the Sample

DataPlot Attributes - Updating Chart Texts

You can change so called data plot attributes using JavaScript Methods. Data plot attributes can be used in chart titles, so you can change the chart title in order to reflect data changes.

So, we will demonstrate the work of the following method:

Method	Parameters	Description
setPlotCustomAttribute (name, value)	name: String value: String	Sets data plot custom attribute by the given name.

To define custom data plot attributes you should add <attributes> node in <data> like shown in XML below:

As you can see - actual chart title and footer are not set, instead - placeholder are used in texts, and this placeholders are custom data attributes. The XML shown above would produce the chart like that:

You can change these attributes using setPlotCustomAttribute (or view_setPlotCustomAttribute) - and when you update the attribute - the associated text is changed too.

Note: refresh() or view_refresh(viewId) method should be called to apply the changes made.

Please open the sample and read comments on the sample page and in sample source code.

Launch the sample with JavaScript - Working with Data Plot Attributes: Open the Sample

Download the sample with JavaScript - Working with Data Plot Attributes: Download the Sample

Highlight, Select, Deselect

You can use JavaScript to highlight/dehighlight the series, point or category. Also you can select or deselect the point. These features allow you to show the data in the chart when user performs some action on the page.

The following methods are used for that:

Method	Parameters	Description
highlightSeries(seriesId, highlighted)	seriesId: String highlighted: Boolean	Highligth/Dehighlight the series.
highlightPoint(seriesId, pointId, highlighted)	seriesId: String pointId: String highlighted: Boolean	Highligth/Dehighlight the point.
highlightCategory(categoryName, highlighted)	categoryName: String highlighted: Boolean	Highligth/Dehighlight the category.
selectPoint(seriesId, pointId, selected)	seriesId: String pointId: String selected: Boolean	Select/Deselect the point.

Please open the sample and read comments on the sample page and in sample source code. In this sample the interactive table is created from data get from chart. This interactive table allows user to:

• Hover the name of the month in table to highlight Month Category in the Chart.
• Hover the name of the product in table to color the series.
• Hover the cell in the table to color the column in the chart.
• Нover the point the chart to color the cell in the table.
• Click the cell in the table to select the column in the chart.

Launch the sample with JavaScript - Highlight, Select, Deselect: Open the Sample

Download the sample with JavaScript - Highlight, Select, Deselect: Download the Sample

Changes Application and Update Events

Any time you change anything in the chart using any of the methods mentioned in this tutorial you have to apply changes using refresh method.

Another important note is the fact that when chart is created you can track this using render event (read more about render event), but when you update chart data using methods described in this document you can track this using refresh event.

Method	Description
refresh()	Applies the changes to the chart.

Launch the sample with JavaScript - Changes Application and Update Events: Open the Sample

Download the sample with JavaScript - Changes Application and Update Events: Download the Sample