Telerik UI for Windows 8 HTML

Scatter Line series are suitable for visualizing two-dimensional data on a Cartesian coordinate system. The two axes, X and Y, both represent data values. Each data point in the series is represented by a pair of values - the X value and the Y value. Data points are connected in a line.

chart-scatter-line-series

Defining a Scatter Line Series Declaratively

To define a Scatter Line series in HTML, add an object with type property set to "scatterLine" to the series array.

HTML Copy imageCopy
<div id="declarativeScatterLineChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{
            type: 'scatterLine', 
            data: [[10, 10], [15, 20], [20, 25], [32, 40], [43, 50], [55, 60], [60, 70], [70, 80]],
            name: 'Example' 
        }
]}">
</div>

Defining a Scatter Line Series Programmatically

To programmatically add a Scatter Line series to the chart, create a new Telerik.UI.Chart.ScatterLineSeries object and add it to the Telerik.UI.RadChart.series array. Finally, call refresh() to have the changes take effect.

JavaScript Copy imageCopy
var scatterLineSeriesChartCtrl = new Telerik.UI.RadChart(document.getElementById("scatterLineSeriesChart"));
var scatterLineSeries = new Telerik.UI.Chart.ScatterLineSeries();
scatterLineSeries.data = [[10, 10], [15, 20], [20, 25], [32, 40], [43, 50], [55, 60], [60, 70], [70, 80]];
scatterLineSeries.name = "Example";
scatterLineSeriesChartCtrl.series.push(scatterLineSeries);
scatterLineSeriesChartCtrl.refresh();

Configuring a Scatter Line Series

Apart from the common configuration settings listed in this article, there a few more specific ones that you can use to customize the look and behavior of the Scatter Line series.

The properties of the Scatter series fully apply to the Scatter Line series as well, so you can check them here. Additional settings are listed below.

Handling Missing Values

There are three different options to handle missing values in your chart when using a Line series. They are presented by the missingValues property, which accepts the following values:

  • gap: The line stops before missing point and continues after it (default value).

  • interpolate: The value is interpolated from neighboring points.

  • zero: The value is assumed to be zero.

In the example below the missing value is interpolated:

Handling Missing Values Example Copy imageCopy
<div id="missingValuesChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{
        type: 'scatterLine',
        xField: 'Year',
        yField: 'Value',
        missingValues: 'interpolate'
    }],
    dataSource: {
        data: [
                {Year:2001, Value:5000},
                {Year:2002, Value:7500},
                {Year:null, Value:9000},
                {Year:2004, Value:null},
                {Year:2005, Value:12000},
                {Year:2006, Value:18000},
                {Year:2007, Value:null},
                {Year:2008, Value:19000},
                {Year:null, Value:16000},
                {Year:2010, Value:null},
                {Year:2011, Value:18000}
        ] 
    }
}">
</div>

And this is the resulting chart:

Handling missing values

See Also