Series Methods

This section describes the methods that can be used in code to manipulate the Series object.

clearSelection()

Unselects all the selected points of the series. The points are displayed in an initial style.

To learn about point selection, refer to the Selection Handling section.

Show Example:
jQuery

In this example, click a series to select it. Then, click it once again to deselect it. The deselection is performed using the clearSelection() method.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { country: 'China', y014: 320866959, y1564: 853191410, y65: 87774113 },
    { country: 'India', y014: 340419115, y1564: 626520945, y65: 47063757 },
    { country: 'United States', y014: 58554755, y1564: 182172625, y65: 34835293 },
    { country: 'Indonesia', y014: 68715705, y1564: 146014815, y65: 10053690 },
    { country: 'Brazil', y014: 50278034, y1564: 113391494, y65: 9190842 },
    { country: 'Russia', y014: 26465156, y1564: 101123777, y65: 18412243 }
];
var series = [
    { valueField: 'y014', name: '0-14 years' },
    { valueField: 'y1564', name: '15-64 years' },
    { valueField: 'y65', name: '65 years and older' }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'country'
        },
        series: series,
        title: 'Population: Age Structure (2000)',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        seriesSelectionMode: 'multiple',
        seriesClick: function (clickedSeries) {
            clickedSeries.fullState & 2 ? clickedSeries.clearSelection() : clickedSeries.select();
        }
    });
});

deselectPoint(point)

Deselects the specified point. The point is displayed in an initial style.

Parameters:
point: Point
The point to be deselected.

To learn about point selection, refer to the Selection Handling section.

Show Example:
jQuery

In this example, if you click a series, only points with the value equal to 20 or more will be selected. The second click on the series deselects all previously selected points using the deselectPoint(point) method.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { date: new Date(2013, 6, 1), daytime: 21, evening: 18 },
    { date: new Date(2013, 6, 2), daytime: 27, evening: 21 },
    { date: new Date(2013, 6, 3), daytime: 28, evening: 22 },
    { date: new Date(2013, 6, 4), daytime: 29, evening: 24 },
    { date: new Date(2013, 6, 5), daytime: 29, evening: 24 },
    { date: new Date(2013, 6, 6), daytime: 29, evening: 21 },
    { date: new Date(2013, 6, 7), daytime: 26, evening: 21 },
    { date: new Date(2013, 6, 8), daytime: 22, evening: 18 },
    { date: new Date(2013, 6, 9), daytime: 22, evening: 19 },
    { date: new Date(2013, 6, 10), daytime: 24, evening: 21 },
    { date: new Date(2013, 6, 11), daytime: 25, evening: 19 },
    { date: new Date(2013, 6, 12), daytime: 26, evening: 20 },
    { date: new Date(2013, 6, 13), daytime: 27, evening: 19 },
    { date: new Date(2013, 6, 14), daytime: 20, evening: 18 },
    { date: new Date(2013, 6, 15), daytime: 24, evening: 19 },
    { date: new Date(2013, 6, 16), daytime: 19, evening: 17 },
    { date: new Date(2013, 6, 17), daytime: 22, evening: 17 },
    { date: new Date(2013, 6, 18), daytime: 23, evening: 18 },
    { date: new Date(2013, 6, 19), daytime: 25, evening: 21 },
    { date: new Date(2013, 6, 20), daytime: 17, evening: 16 },
    { date: new Date(2013, 6, 21), daytime: 14, evening: 12 },
    { date: new Date(2013, 6, 22), daytime: 15, evening: 13 },
    { date: new Date(2013, 6, 23), daytime: 17, evening: 13 },
    { date: new Date(2013, 6, 24), daytime: 18, evening: 14 },
    { date: new Date(2013, 6, 25), daytime: 19, evening: 16 },
    { date: new Date(2013, 6, 26), daytime: 20, evening: 18 },
    { date: new Date(2013, 6, 27), daytime: 17, evening: 16 },
    { date: new Date(2013, 6, 28), daytime: 19, evening: 16 },
    { date: new Date(2013, 6, 29), daytime: 19, evening: 16 },
    { date: new Date(2013, 6, 30), daytime: 19, evening: 18 },
    { date: new Date(2013, 6, 31), daytime: 20, evening: 17 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'date',
            type: 'spline'
        },
        argumentAxis: {
            valueMarginsEnabled: false,
            label: { format: 'day' },
            tickInterval: { days: 1 },
            grid: { visible: true }
        },
        valueAxis: {
            label: {
                customizeText: function (e) {
                    return e.value + ' &deg;C';
                }
            }
        },
        tooltip: {
            argumentFormat: 'monthAndDay',
            enabled: true,
            customizeText: function (e) {
                return e.value + ' &deg;C on ' + e.argumentText;
            }
        },
        series: [
            { valueField: 'daytime', name: 'Daytime', color: 'skyblue' },
            { valueField: 'evening', name: 'Evening', color: 'royalblue' }
        ],
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        pointSelectionMode: 'multiple',
        seriesClick: function (clickedSeries) {
            $.each(clickedSeries.getAllPoints(), function (_, point) {
                if (point.originalValue >= 20) {
                    point.fullState & 2 ? clickedSeries.deselectPoint(point) : clickedSeries.selectPoint(point);
                }
            })
        }
    });
});

getAllPoints()

Returns an array of all points in the series.

Return Value: Array
The points from the series point collection.

Show Example:
jQuery

In this example, the maximum point value in the clicked series is displayed. The series' getAllPoints() method is used to calculate the maximum value from all the points.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div style="height:25px;max-width:500px;margin:0px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <span id="selectionSpan" />
</div>
var dataSource = [
    { country: 'China', y014: 320866959, y1564: 853191410, y65: 87774113 },
    { country: 'India', y014: 340419115, y1564: 626520945, y65: 47063757 },
    { country: 'United States', y014: 58554755, y1564: 182172625, y65: 34835293 },
    { country: 'Indonesia', y014: 68715705, y1564: 146014815, y65: 10053690 },
    { country: 'Brazil', y014: 50278034, y1564: 113391494, y65: 9190842 },
    { country: 'Russia', y014: 26465156, y1564: 101123777, y65: 18412243 }
];
var series = [
    { valueField: 'y014', name: '0-14 years' },
    { valueField: 'y1564', name: '15-64 years' },
    { valueField: 'y65', name: '65 years and older' }
];

$(function () {
    $('#chartContainer').dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'country'
        },
        series: series,
        title: 'Population: Age Structure (2000)',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        seriesClick: function (clickedSeries) {
            var valueArray = [];
            $.each(clickedSeries.getAllPoints(), function (_, currentPoint) {
                valueArray.push(currentPoint.value);
            });
            valueArray.max = function () {
                return Math.max.apply(Math, valueArray);
            };
            $('#selectionSpan').html('Maximum value in the &#34;' + clickedSeries.name +
                '&#34; series: ' + valueArray.max());
        }
    });
});

getPointByArg(pointArg)

Gets a point from the series point collection based on the specified argument.

Parameters:
pointArg: Number|String|Date
The argument of the point to be found.
Return Value: Object
The point that is found by the specified argument.

If a point with the specified argument is not found, the function returns null.

Show Example:
jQuery

In this example, choose one of the countries using the radio buttons. Here, the getPointByArg(pointArg) method is used to select points according to the argument, which is the chosen country.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div style="height:80px;max-width:500px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    Choose a country: <br />
    <input type="radio" name="seriesArgument" value="China" /> China
    <input type="radio" name="seriesArgument" value="India" /> India
    <input type="radio" name="seriesArgument" value="United States" /> United States
    <input type="radio" name="seriesArgument" value="Indonesia" /> Indonesia
    <input type="radio" name="seriesArgument" value="Brazil" /> Brazil
    <input type="radio" name="seriesArgument" value="Russia" /> Russia <br />
</div>
var dataSource = [
    { country: 'China', y014: 320866959, y1564: 853191410, y65: 87774113 },
    { country: 'India', y014: 340419115, y1564: 626520945, y65: 47063757 },
    { country: 'United States', y014: 58554755, y1564: 182172625, y65: 34835293 },
    { country: 'Indonesia', y014: 68715705, y1564: 146014815, y65: 10053690 },
    { country: 'Brazil', y014: 50278034, y1564: 113391494, y65: 9190842 },
    { country: 'Russia', y014: 26465156, y1564: 101123777, y65: 18412243 }
];
var series = [
    { valueField: 'y014', name: '0-14 years' },
    { valueField: 'y1564', name: '15-64 years' },
    { valueField: 'y65', name: '65 years and older' }
];

$(function () {
    $('#chartContainer').dxChart({
        dataSource: dataSource,
        pointSelectionMode: 'multiple',
        commonSeriesSettings: {
            argumentField: 'country'
        },
        series: series,
        title: 'Population: Age Structure (2000)',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        }
    });

    $("input[name='seriesArgument']").change(function () {
        var chosenArgument = $(this).val();
        var chart = $('#chartContainer').dxChart('instance');
        chart.clearSelection();
        $.each(chart.getAllSeries(), function (_, currentSeries) {
            currentSeries.getPointByArg(chosenArgument).select();
        });
    });
});

getPointByPos(positionIndex)

Gets a point from the series point collection based on the specified point position.

Parameters:
positionIndex: Number
The index of the point to be found within the series point collection.
Return Value: Object
The point that is found by the specified position index.

Points in the series point collection are arranged as they go along the argument axis from left to right. Note that the series are numbered from zero in the series collection.

Show Example:
jQuery

In this example, choose one of the point indexes using the radio buttons. Here, the getPointByPos(positionIndex) method is used to select all points with the chosen index.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div style="height:80px;max-width:500px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    Choose the points' index: <br />
    <input type="radio" name="seriesIndex" value="0" /> 0
    <input type="radio" name="seriesIndex" value="1" /> 1
    <input type="radio" name="seriesIndex" value="2" /> 2
    <input type="radio" name="seriesIndex" value="3" /> 3
    <input type="radio" name="seriesIndex" value="4" /> 4
    <input type="radio" name="seriesIndex" value="5" /> 5 <br />
</div>
var dataSource = [
    { country: 'China', y014: 320866959, y1564: 853191410, y65: 87774113 },
    { country: 'India', y014: 340419115, y1564: 626520945, y65: 47063757 },
    { country: 'United States', y014: 58554755, y1564: 182172625, y65: 34835293 },
    { country: 'Indonesia', y014: 68715705, y1564: 146014815, y65: 10053690 },
    { country: 'Brazil', y014: 50278034, y1564: 113391494, y65: 9190842 },
    { country: 'Russia', y014: 26465156, y1564: 101123777, y65: 18412243 }
];
var series = [
    { valueField: 'y014', name: '0-14 years' },
    { valueField: 'y1564', name: '15-64 years' },
    { valueField: 'y65', name: '65 years and older' }
];

$(function () {
    $('#chartContainer').dxChart({
        dataSource: dataSource,
        pointSelectionMode: 'multiple',
        commonSeriesSettings: {
            argumentField: 'country'
        },
        series: series,
        title: 'Population: Age Structure (2000)',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        }
    });

    $("input[name='seriesIndex']").change(function () {
        var chosenIndex = +$(this).val();
        var chart = $('#chartContainer').dxChart('instance');
        chart.clearSelection();
        $.each(chart.getAllSeries(), function (_, currentSeries) {
            currentSeries.getPointByPos(chosenIndex).select();
        });
    });
});

isHovered()

Provides information about the hover state of a series.

Return Value: true|false
Hover state of a series.

When a series is hovered over, this method returns true. Otherwise, the returned value is false.

To learn more about point and series hover operation, refer to the Hover Handling topic.

Show Example:
jQuery

Hover over a series on the chart and information about the maximum point value of this series will appear under the chart. When the series that has been hovered over is hovered out, this information disappears. This behavior is achieved using the isHovered() method of the hovered series.

<div id="chartContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
<div style="height:20px;max-width:800px;margin:0px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:12px;text-align:center">
    <span id="selectionSpan" />
</div>
var dataSource = [
    { country: 'China', y014: 320866959, y1564: 853191410, y65: 87774113 },
    { country: 'India', y014: 340419115, y1564: 626520945, y65: 47063757 },
    { country: 'United States', y014: 58554755, y1564: 182172625, y65: 34835293},
    { country: 'Indonesia', y014: 68715705, y1564: 146014815, y65: 10053690},
    { country: 'Brazil', y014: 50278034, y1564: 113391494, y65: 9190842},
    { country: 'Russia', y014: 26465156, y1564: 101123777, y65: 18412243}
];
 
var series = [
    { valueField: 'y014', name: '0-14 years' },
    { valueField: 'y1564', name: '15-64 years' },
    { valueField: 'y65', name: '65 years and older' }
];

$("#chartContainer").dxChart({
    dataSource: dataSource,
    commonSeriesSettings: {
        argumentField: 'country'
    },
    series: series,
    title: 'Population: Age Structure (2000)',
    legend: {
        horizontalAlignment: 'center',
        verticalAlignment: 'bottom'
    },
    seriesHoverChanged: function (hoveredSeries) {
        if (hoveredSeries.isHovered()) {
            var valueArray = [];
            $.each(hoveredSeries.getAllPoints(), function (_, currentPoint) {
                valueArray.push(currentPoint.value);
            });
            valueArray.max = function () {
                return Math.max.apply(Math, valueArray);
            };
            $('#selectionSpan').html('Maximum value in the &#34;' + hoveredSeries.name + '&#34; series: ' + valueArray.max());
        } else {
            $('#selectionSpan').html('');
        }
    }
});

isSelected()

Provides information about the selection state of a series.

Return Value: true|false
Selection state of a series.

When a series is selected, this method returns true. Otherwise, the returned value is false.

You can select a series using its select() method. To learn more about point and series selection, refer to the Selection Handling topic.

View Demo

Show Example:
jQuery

Click a series on the chart to select this series. Information about the maximum point value of the selected series will appear under the chart. Click this series again and the information will disappear. This behavior is achieved using the isSelected() method of the clicked series.

<div id="chartContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
<div style="height:20px;max-width:800px;margin:0px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:12px;text-align:center">
    <span id="selectionSpan" />
</div>
var dataSource = [
    { country: 'China', y014: 320866959, y1564: 853191410, y65: 87774113 },
    { country: 'India', y014: 340419115, y1564: 626520945, y65: 47063757 },
    { country: 'United States', y014: 58554755, y1564: 182172625, y65: 34835293},
    { country: 'Indonesia', y014: 68715705, y1564: 146014815, y65: 10053690},
    { country: 'Brazil', y014: 50278034, y1564: 113391494, y65: 9190842},
    { country: 'Russia', y014: 26465156, y1564: 101123777, y65: 18412243}
];
 
var series = [
    { valueField: 'y014', name: '0-14 years' },
    { valueField: 'y1564', name: '15-64 years' },
    { valueField: 'y65', name: '65 years and older' }
];

$("#chartContainer").dxChart({
    dataSource: dataSource,
    commonSeriesSettings: {
        argumentField: 'country'
    },
    series: series,
    title: 'Population: Age Structure (2000)',
    legend: {
        horizontalAlignment: 'center',
        verticalAlignment: 'bottom'
    },
    seriesClick: function (clickedSeries) {
        clickedSeries.fullState & 2 ? clickedSeries.clearSelection() : clickedSeries.select();
    },
    seriesSelectionChanged: function (selectedSeries) {
        if (selectedSeries.isSelected()) {
            var valueArray = [];
            $.each(selectedSeries.getAllPoints(), function (_, currentPoint) {
                valueArray.push(currentPoint.value);
            });
            valueArray.max = function () {
                return Math.max.apply(Math, valueArray);
            };
            $('#selectionSpan').html('Maximum value in the &#34;' + selectedSeries.name + '&#34; series: ' + valueArray.max());
        } else {
            $('#selectionSpan').html('');
        }
    }
});

select()

Selects the series. The series is displayed in a 'selected' style until another series is selected or the current series is deselected programmatically.

To learn about series selection, refer to the Selection Handling section.

Show Example:
jQuery

In the example below, click a series to select it. Then, click it once again to deselect it. The selection is performed using the select() method.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { country: 'China', y014: 320866959, y1564: 853191410, y65: 87774113 },
    { country: 'India', y014: 340419115, y1564: 626520945, y65: 47063757 },
    { country: 'United States', y014: 58554755, y1564: 182172625, y65: 34835293 },
    { country: 'Indonesia', y014: 68715705, y1564: 146014815, y65: 10053690 },
    { country: 'Brazil', y014: 50278034, y1564: 113391494, y65: 9190842 },
    { country: 'Russia', y014: 26465156, y1564: 101123777, y65: 18412243 }
];
var series = [
    { valueField: 'y014', name: '0-14 years' },
    { valueField: 'y1564', name: '15-64 years' },
    { valueField: 'y65', name: '65 years and older' }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'country'
        },
        series: series,
        title: 'Population: Age Structure (2000)',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        seriesSelectionMode: 'multiple',
        seriesClick: function (clickedSeries) {
            clickedSeries.fullState & 2 ? clickedSeries.clearSelection() : clickedSeries.select();
        }
    });
});

selectPoint(point)

Selects the specified point. The point is displayed in a 'selected' style.

Parameters:
point: Point
The point to be selected.

For information on point selection, refer to the Selection Handling section.

Show Example:
jQuery

In this example, if you click a series, only points with the value equal to 20 or more will be selected using the selectPoint(point) method. The second click on the series deselects all previously selected points.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { date: new Date(2013, 6, 1), daytime: 21, evening: 18 },
    { date: new Date(2013, 6, 2), daytime: 27, evening: 21 },
    { date: new Date(2013, 6, 3), daytime: 28, evening: 22 },
    { date: new Date(2013, 6, 4), daytime: 29, evening: 24 },
    { date: new Date(2013, 6, 5), daytime: 29, evening: 24 },
    { date: new Date(2013, 6, 6), daytime: 29, evening: 21 },
    { date: new Date(2013, 6, 7), daytime: 26, evening: 21 },
    { date: new Date(2013, 6, 8), daytime: 22, evening: 18 },
    { date: new Date(2013, 6, 9), daytime: 22, evening: 19 },
    { date: new Date(2013, 6, 10), daytime: 24, evening: 21 },
    { date: new Date(2013, 6, 11), daytime: 25, evening: 19 },
    { date: new Date(2013, 6, 12), daytime: 26, evening: 20 },
    { date: new Date(2013, 6, 13), daytime: 27, evening: 19 },
    { date: new Date(2013, 6, 14), daytime: 20, evening: 18 },
    { date: new Date(2013, 6, 15), daytime: 24, evening: 19 },
    { date: new Date(2013, 6, 16), daytime: 19, evening: 17 },
    { date: new Date(2013, 6, 17), daytime: 22, evening: 17 },
    { date: new Date(2013, 6, 18), daytime: 23, evening: 18 },
    { date: new Date(2013, 6, 19), daytime: 25, evening: 21 },
    { date: new Date(2013, 6, 20), daytime: 17, evening: 16 },
    { date: new Date(2013, 6, 21), daytime: 14, evening: 12 },
    { date: new Date(2013, 6, 22), daytime: 15, evening: 13 },
    { date: new Date(2013, 6, 23), daytime: 17, evening: 13 },
    { date: new Date(2013, 6, 24), daytime: 18, evening: 14 },
    { date: new Date(2013, 6, 25), daytime: 19, evening: 16 },
    { date: new Date(2013, 6, 26), daytime: 20, evening: 18 },
    { date: new Date(2013, 6, 27), daytime: 17, evening: 16 },
    { date: new Date(2013, 6, 28), daytime: 19, evening: 16 },
    { date: new Date(2013, 6, 29), daytime: 19, evening: 16 },
    { date: new Date(2013, 6, 30), daytime: 19, evening: 18 },
    { date: new Date(2013, 6, 31), daytime: 20, evening: 17 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'date',
            type: 'spline'
        },
        argumentAxis: {
            valueMarginsEnabled: false,
            label: { format: 'day' },
            tickInterval: { days: 1 },
            grid: { visible: true }
        },
        valueAxis: {
            label: {
                customizeText: function (e) {
                    return e.value + ' &deg;C';
                }
            }
        },
        tooltip: {
            argumentFormat: 'monthAndDay',
            enabled: true,
            customizeText: function (e) {
                return e.value + ' &deg;C on ' + e.argumentText;
            }
        },
        series: [
            { valueField: 'daytime', name: 'Daytime', color: 'skyblue' },
            { valueField: 'evening', name: 'Evening', color: 'royalblue' }
        ],
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        pointSelectionMode: 'multiple',
        seriesClick: function (clickedSeries) {
            $.each(clickedSeries.getAllPoints(), function (_, point) {
                if (point.originalValue >= 20) {
                    point.fullState & 2 ? clickedSeries.deselectPoint(point) : clickedSeries.selectPoint(point);
                }
            })
        }
    });
});