Adding, Removing, Changing, Hiding and Showing Series - AnyChart JavaScript Interactivity

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

Show or Hide Series Sample

In the first sample the use of showSeries(seriesId, isVisible) is shown. You can show hide series as you need.

Note: you can make a series to be invisible at loading time using visible attribute of <series> node. The series marked as invisible are not taken in account in any calculations and they are not returned in series collection or shown in legend.

The code that shows or hides series in this sample, see sample source code for more:

function chart2SetSeriesVisible(e) {
var target = e.target ? e.target : e.srcElement;
if (target.nodeType == 3) target = target.parentNode;
var seriesId = target.getAttribute("series");
var isVisible = target.checked;
chart2.showSeries(seriesId, isVisible);
chart2.refresh();
}

Adding Series and Adding Series At given Position Sample

In this sample you can see how to add new series with points to the chart.

Code used to add series is the following:

function addProductToChart3() {
var seriesName = prompt("Series name", "Product "+(chart3Info.Series.length+1));

var seriesData = "<series id='series"+(chart3Info.Series.length)+"' name='"+seriesName+"'>";

// Add series of Black Columns
// var seriesData = "<series color='Black' id='series"+(chart3Info.Series.length)+"' name='"+seriesName+"'>";

// Add series with marker enabled
// var seriesData = "<series id='series"+(chart3Info.Series.length)+"' name='"+seriesName+"'><marker enabled='true'/>";

for (var categoryName in chart3Info.Categories) {
var defaultValue = Math.round(Math.random()*700);
var value = prompt("Sales in "+categoryName, defaultValue);

seriesData += "<point id='"+categoryName+"' name='"+categoryName+"' y='"+value+"' />";
}

seriesData += "</series>";

chart3.addSeries(seriesData);

// To add series at given position use addSeriesAt method
// chart3.addSeriesAt(0, seriesData);

chart3.refresh();
buildChart3SeriesTable();
}

Editing the existing Series

To edit the existing Series use editSeries(seriesId, seriesData) function. Use "Edit" button in the sample below to see how it works.

Code used to edit series in this sample is the following:

function chart5EditSeries(e) {
var target = e.target ? e.target : e.srcElement;
if (target.nodeType == 3) target = target.parentNode;
var seriesId = target.getAttribute("series_id");
var seriesName = target.getAttribute("series_name");

var newSeriesName = prompt("Please enter new series name", seriesName);
var newSeriesNode = "<series name='"+newSeriesName+"' />";
chart5.updateSeries(seriesId, newSeriesNode);
chart5.refresh();
buildChart5SeriesTable();
}

Removing the Series

To remove the series from the chart use removeSeries(seriesId) function. Use "Remove" button in the sample below to see how it works.

The code used to remove series in this sample is the following, see HTML source for more:

function removeProduct(e) {
var target = e.target ? e.target : e.srcElement;
if (target.nodeType == 3) target = target.parentNode;
var seriesId = target.getAttribute("series");

chart6.removeSeries(seriesId);
chart6.refresh();
buildChart6SeriesTable();
}