JavaScript/jQuery Chart - Loading Indicator
When the Chart visualizes local data, loading is instant. But when the Chart is bound to a remote data source, loading may take a considerable amount of time. To keep the viewer's attention, the Chart can display a loading indicator.
To activate the loading indicator, assign true to the loadingIndicator.enabled property. When activated, the indicator will be displayed or hidden automatically as the chart's data is updated.
jQuery
JavaScript
$(function() {
$("#chartContainer").dxChart({
// ...
loadingIndicator: {
enabled: true
}
});
});Angular
HTML
TypeScript
<dx-chart ... >
<dxo-loading-indicator [enabled]="true"></dxo-loading-indicator>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxChartModule
],
// ...
})Vue
App.vue
<template>
<DxChart ... >
<DxLoadingIndicator
:enabled="true"
/>
</DxChart>
</template>
<script>
import DxChart, {
DxLoadingIndicator
} from 'devextreme-vue/chart';
export default {
components: {
DxChart,
DxLoadingIndicator
}
}
</script>React
App.js
import React from 'react';
import Chart, {
LoadingIndicator
} from 'devextreme-react/chart';
class App extends React.Component {
render() {
return (
<Chart ... >
<LoadingIndicator
enabled={true}
/>
</Chart>
);
}
}
export default App;If you need to show or hide the loading indicator at runtime, call the showLoadingIndicator() or hideLoadingIndicator() method.
jQuery
JavaScript
var chart = $("#chartContainer").dxChart("instance");
chart.showLoadingIndicator();
chart.hideLoadingIndicator();Angular
TypeScript
import { ..., ViewChild } from "@angular/core";
import { DxChartModule, DxChartComponent } from "devextreme-angular";
// ...
export class AppComponent {
@ViewChild(DxChartComponent, { static: false }) chart: DxChartComponent;
// Prior to Angular 8
// @ViewChild(DxChartComponent) chart: DxChartComponent;
showLoadingIndicator () {
this.chart.instance.showLoadingIndicator();
};
hideLoadingIndicator () {
this.chart.instance.hideLoadingIndicator();
};
}
@NgModule({
imports: [
// ...
DxChartModule
],
// ...
})Vue
App.vue
<template>
<DxChart
ref="chart"
... >
</DxChart>
</template>
<script>
import DxChart from 'devextreme-vue/chart';
export default {
components: {
DxChart
},
methods: {
showLoadingIndicator () {
this.$refs.chart.instance.showLoadingIndicator();
},
hideLoadingIndicator () {
this.$refs.chart.instance.hideLoadingIndicator();
}
}
}
</script>React
App.js
import React from 'react';
import Chart from 'devextreme-react/chart';
class App extends React.Component {
constructor(props) {
super(props);
this.chartRef = React.createRef();
this.showLoadingIndicator = function() {
this.chartRef.current.instance.showLoadingIndicator();
}
this.hideLoadingIndicator = function() {
this.chartRef.current.instance.hideLoadingIndicator();
}
}
render() {
return (
<Chart ref={this.chartRef} ... >
</Chart>
);
}
}
export default App;See Also
Feedback