JavaScript/jQuery Chart - dataPrepareSettings
The following code shows the dataPrepareSettings declaration syntax:
jQuery
$(function() {
$("#chartContainer").dxChart({
// ...
dataPrepareSettings: {
sortingMethod: false
}
});
});Angular
<dx-chart ... >
<dxo-data-prepare-settings
[sortingMethod]="false">
</dxo-data-prepare-settings>
</dx-chart>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
// ...
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxChartModule } from 'devextreme-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DxChartModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }Vue
<template>
<DxChart ... >
<DxDataPrepareSettings
:sorting-method="false"
/>
</DxChart>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxChart, {
DxDataPrepareSettings
} from 'devextreme-vue/chart';
export default {
components: {
DxChart,
DxDataPrepareSettings
},
data() {
// ...
}
}
</script>React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import Chart, {
DataPrepareSettings
} from 'devextreme-react/chart';
class App extends React.Component {
render() {
return (
<Chart ... >
<DataPrepareSettings
sortingMethod={false}
/>
</Chart>
);
}
}
export default App;checkTypeForAllData
Use this property 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 property 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.
See Also
- argumentAxis.argumentType - casts arguments to a specified data type.
- valueAxis.valueType - casts values to a specified data type.
convertToAxisDataType
If this property 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 properties. Otherwise, it will be determined automatically on the base of the first data source value.
sortingMethod
When this property 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.
Alternatively, you can use a comparison function to specify the drawing order. The function accepts two data source objects and should return the value on which the order depends. For example, A and B objects represent two series points. If the function returns a value less than 0, point A is drawn before point B. If the function returns a value greater than 0, point A is drawn after point B. If the function returns 0, the drawing order of A and B remains unchanged.
The following code sorts string arguments in alphabetical order:
jQuery
$(function() {
$("#chartContainer").dxChart({
// ...
dataPrepareSettings: {
sortingMethod(a, b) {
return a.arg.localeCompare(b.arg);
}
}
});
});Angular
<dx-chart ... >
<dxo-data-prepare-settings
[sortingMethod]="alphabetical">
</dxo-data-prepare-settings>
</dx-chart>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
alphabetical(a, b) {
return a.arg.localeCompare(b.arg);
}
}Vue
<template>
<DxChart ... >
<DxDataPrepareSettings
:sorting-method="alphabetical"
/>
</DxChart>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxChart, {
DxDataPrepareSettings
} from 'devextreme-vue/chart';
export default {
components: {
DxChart,
DxDataPrepareSettings,
},
data() {
// ...
},
methods: {
alphabetical(a, b) {
return a.arg.localeCompare(b.arg);
}
}
}
</script>React
import React from 'react';
import Chart, {
DataPrepareSettings
} from 'devextreme-react/chart';
const alphabetical = (a, b) => {
return a.arg.localeCompare(b.arg);
}
function App() {
render() {
return (
<Chart ... >
<DataPrepareSettings
sortingMethod={alphabetical}
/>
</Chart>
);
}
}
export default App;