Data Manipulation

Overview

AnyChart html5 charting library gives you the ability to create, read, update and delete charts in real-time without full reloading and redrawing - our charts can be changed fast and in a flexible manner.

You can solve the following tasks using some easy-in-use Java Script methods:

Data-Stream - you can add some new data to the end of a data set while optional removing some data from its beginning.

Add - you can add one or several points to the end of the data set.

Meta-add - you can add some metadata to the chart.

Update - you can change the values of the existing points.

Remove - you can remove any point from a data set.

Insert - you can add one or several points between the existing points.

This article shows how to solve each of these tasks.

Note: this article contains information on data mapping and series data managing. Information about managing chart's series and series visual appearance can be found in Series Manipulation article.

Add

AnyChart allows to adjust chart at any moment after it is displayed. To add an element into a data set, use append() method. Here is the example:

Note: Append method helps to add information only at the end of the data set. To add information into any position see .insert() method section below.

Meta-add

Adding custom data is nice function, but charts have to be as useful and informative as possible. Any point of a chart may contain meta information. If you want some meta information to be available when a part of a chart is hovered over, that's how your code will look like:

Data Streaming

Data Streaming adds and/or removes points sequentially, usually by timer. To stream data we can use two methods described above: append() and remove(). In the sample below we set event on button click which appends a new data point with random value and removes first data point.