Configuration dataPrepareSettings

Processes data before visualizing it.

Type: Object

checkTypeForAllData

Validates the type of each value coming from the data source.

Type: Boolean
Default Value: false

Use this option when values in your data source are of a different type, and you need all of them to be visualized on a single axis.

If this option is set to true, the type of each value is checked, and the axis type is chosen optimally to display all the values. Otherwise, only the type of the first value is checked, and the axis type is chosen according to the type of this value. In this case, the values that cannot be cast to a data type supported by the axis will be ignored.

NOTE: Because the type check affects widget performance, keep this option set to false when you have a vast data source with values of the same type, and this type is known beforehand.

See Also
  • argumentAxis | argumentType - casts arguments to a specified data type.
  • valueAxis | valueType - casts values to a specified data type.
Show Example:
jQuery

Toggle the check box below to switch between the values of the checkTypeForAllData option. Note that here the data source contains values of different types. When the checkTypeForAllData option is on, both the axes become discrete in order to display the specific values like r on the argument axis or b on the value axis. When the checkTypeForAllData option is off, the argument axis is continuous because the first argument in the data source is numeric, while the value axis is discrete because the first value in the data source is string. In this case, the { 'r', 10 } series point is ignored, because the argument cannot be cast to the numeric type to be displayed on the continuous argument axis.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="checkboxContainer" style="height:20px;width:200px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <input type="checkbox" id="checkTypeForAllDataCheckbox" checked> Enable Checking Type
</div>
var dataSource = [
    { arg: 1, val: '5' },
    { arg: '6', val: 8 },
    { arg: 3.5, val: 'b' },
    { arg: 'r', val: 10 },
    { arg: '8.4', val: '8.5' }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'arg',
            type: 'spline'
        },
        series: [{ valueField: 'val' }],
        dataPrepareSettings: {
            checkTypeForAllData: true
        }
    });

    $('#checkTypeForAllDataCheckbox').change(function () {
        var chart = $('#chartContainer').dxChart('instance');
        chart.option({
            dataPrepareSettings: { checkTypeForAllData: this.checked }
        });
    });
});

convertToAxisDataType

Converts data coming from a data source into a data type supported by the axis.

Type: Boolean
Default Value: true

If this option is set to true, all data will be converted into a data type supported by the axis. You can specify this data type using the argumentAxis | argumentType and valueAxis | valueType options. Otherwise, it will be determined automatically on the base of the first data source value.

NOTE: We recommend you to keep this option set to true in order to prevent the chart from behaving incorrectly. However, since the type conversion affects widget performance, it may be useful to set this option to false if you have a vast data source with values of the same type, and this type is known beforehand.

Show Example:
jQuery

In this example, the convertToAxisDataType option is set to true in order to convert the string values from the data source into the numeric format.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { arg: 1, val: 5 },
    { arg: '6', val: 8 },
    { arg: 3.5, val: '4' },
    { arg: '15', val: 10 },
    { arg: '8.4', val: '8.5' }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'arg',
            type: 'spline'
        },
        series: [{ valueField: 'val' }],
        dataPrepareSettings: {
            convertToAxisDataType: true
        }
    });
});

sortingMethod

Specifies the sorting order in which series points should be drawn.

Type: Boolean| function(a,b)
Function parameters:
a: Object
A series point.
Object structure:
The argument of the series point.
The value of the series point.
b: Object
A series point.
Object structure:
The argument of the series point.
The value of the series point.
Return Value: Number
Indicates whether a should be drawn before b.
Default Value: true

When this option is set to true, the series points are drawn in order of increasing argument. Otherwise, the order of drawing the series points is the same as the order of objects in the data source.

NOTE: We recommend setting this option to false if objects in the data source are already sorted properly. This will improve widget performance.

Alternatively, you can specify the drawing order using a comparison function. It accepts two parameters that represent two series points and should return the value on which the order will depend. For example, assume that A and B are two series points. If the function returns a value less than 0, point A will be drawn before point B. If the function returns a value greater than 0, point A will be drawn after point B. If the function returns 0, the drawing order of A and B remains unchanged.

NOTE: When the argumentType is 'string', the sortingMethod option does not accept Boolean values. However, you can still apply sorting using a comparison function. Alternatively, use categories to perform the same task.

Show Example:
jQuery

In this example, the series points are sorted in ascending order by values, using the function assigned to the sortingMethod option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { arg: 1, val: 5 },
    { arg: 6, val: 8 },
    { arg: 3.5, val: 4 },
    { arg: 14, val: 3 },
    { arg: 8.4, val: 8.5 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'arg',
            type: 'spline'
        },
        series: [{ valueField: 'val' }],
        dataPrepareSettings: {
            sortingMethod: function (a, b) {
                return a.val - b.val;
            }
        }
    });
});