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.

View Demo

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',
        onSeriesClick: function (info) {
            var clickedSeries = info.target;
            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,
            customizeTooltip: function (point) {
                return {
                    text: point.value + ' &deg;C on ' + point.argumentText
                };
            }
        },
        series: [
            { valueField: 'daytime', name: 'Daytime', color: 'skyblue' },
            { valueField: 'evening', name: 'Evening', color: 'royalblue' }
        ],
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        pointSelectionMode: 'multiple',
        onSeriesClick: function (info) {
            var clickedSeries = info.target;
            $.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'
        },
        onSeriesClick: function (info) {
            var valueArray = [];
            var clickedSeries = info.target;
            $.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());
        }
    });
});

getColor()

Gets the color of a particular series.

Return Value: String
The color of a series.

Show Example:
jQuery

In this example, you can get a series' color by clicking it. The color will be displayed at the bottom of the chart.

<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:'Segoe UI', 'Helvetica Neue', Helvetica, Verdana, san-serif;font-size:16px;text-align:center; margin-top:5px">
    <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'
        },
        onSeriesClick: function (info) {
            var clickedSeries = info.target;
            var seriesColor = clickedSeries.getColor();
            $('#selectionSpan').html("The color of the clicked series is <font style='background:" + seriesColor + "'>&nbsp;&nbsp;&nbsp;</font> " + seriesColor);
        }
    });
});

getPointByArg(pointArg)

Deprecated

Use the getPointsByArg(pointArg) method instead.

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.

View Demo

Show Example:
jQuery

In this example, choose one of the countries using the radio buttons. Here, the getPointsByArg(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.getPointsByArg(chosenArgument)[0].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();
        });
    });
});

getPointsByArg(pointArg)

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

Parameters:
pointArg: Number|String|Date
The argument of the point(s) to be found.
Return Value: Array
The points that are found by the specified argument.

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

getVisiblePoints()

Returns visible series points.

Return Value: Array
Visible points.

Use this method to get points that lay within the visible range defined by the min and max options of an axis. This method is also useful if you need to obtain the points displayed when data aggregation is applied.

NOTE: If a chart series or its points are not displayed as hidden from code, the getVisiblePoints() method called for this series still returns points that lay within the visible range as if these points were visible.

hide()

Hides a series.

This method hides a series at runtime. To specify a series hidden at design-time, set the series | visible option to false.

NOTE: When the series is invisible, the marker of its legend item is faded.

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'
    },
    onSeriesHoverChanged: function (info) {
        var hoveredSeries = info.target;
        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.

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'
    },
    onSeriesClick: function (info) {
        var clickedSeries = info.target;
        clickedSeries.isSelected() ? clickedSeries.clearSelection() : clickedSeries.select();
    },
    onSeriesSelectionChanged: function (info) {
        var selectedSeries = info.target;
        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('');
        }
    }
});

isVisible()

Provides information about the visibility state of a series.

Return Value: Boolean
Visibility state of a series.

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

You can make a series visible using its show() method, or hide a series using its hide() method.

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.

View Demo

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',
        onSeriesClick: function (info) {
            var clickedSeries = info.target;
            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,
            customizeTooltip: function (point) {
                return {
                    text: point.value + ' &deg;C on ' + point.argumentText
                };
            }
        },
        series: [
            { valueField: 'daytime', name: 'Daytime', color: 'skyblue' },
            { valueField: 'evening', name: 'Evening', color: 'royalblue' }
        ],
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        pointSelectionMode: 'multiple',
        onSeriesClick: function (info) {
            var clickedSeries = info.target;
            $.each(clickedSeries.getAllPoints(), function (_, point) {
                if (point.originalValue >= 20) {
                    point.fullState & 2 ? clickedSeries.deselectPoint(point) : clickedSeries.selectPoint(point);
                }
            })
        }
    });
});

show()

Makes a particular series visible.