Working with Points - AnyChart Interactivity (JavaScript)

Adding Points Sample

In this sample the table is build using data got from the chart and shows how to use addPoint function.

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

The following code is used to Add Point to the chart:

function addPoint() {

// get the quantity of the points
var newPointIndex = chart3.getInformation().Series[0].Points.length;

// prompt for the new point name
var monthName = prompt("Month", months[newPointIndex]);
if (monthName == null) return;

// prompt for the column value
var sales = prompt("Sales", Math.round(Math.random()*400));
if (sales == null) return;

// add point to the chart
// first parameter is the id of the series
// find it in anychart.xml

chart3.addPoint("productA", "<point id='"+monthName.toLowerCase()+"' name='"+monthName+"' y='"+sales+"' />");

// please note that you can provide other point XML
// settings in second parameter - see commented samples
// below and replace the addPoint code with it to see the results

// Add the 'Red' Column
// chart3.addPoint("productA", "<point color='Red' id='"+monthName.toLowerCase()+"' name='"+monthName+"' y='"+sales+"' />");

// Add the Column with Tooltip Turned On
// chart3.addPoint("productA", "<point id='"+monthName.toLowerCase()+"' name='"+monthName+"' y='"+sales+"' ><tooltip enabled='true'/></point>");

chart3.refresh();
}

Test it below and see HTML source for more.



Editing and Deleting Points Sample

In this sample the table is build using data got from the chart and shows how to use removePoint and updatePoint functions.

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

The following code is used to Edit Point in the chart:

chart4.updatePoint("productA", pointId, "<point y='"+sales+"' />");
chart4.refresh();

The following code is used to Remove Point from the chart:

chart4.removePoint("productA", pointId);
chart4.refresh();

Test it below and see HTML source for more.