Note: Refresh() or View_Refresh(viewId) method should be called to apply the changes made.
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();
}
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();
}
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();
}
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();
}