Your search did not match any results.
Charts

Client-Side Data Processing

The Chart component can get data from a remote storage and process it on the client side. To implement this functionality, assign a DataSource object to the Chart dataSource property.

In the DataSource, implement a CustomStore. Switch the CustomStore to the raw loadMode and load all data from the server in the load function as shown in the demo. Set the paginate property to false to prevent data from partitioning. You can also apply filter to the received values. In this demo, select different values of the drop-down menu under the chart to apply different filters.

Once you load the data, specify the series type and its nested options: argumentField and valueField, so the component can determine which object fields in the data source indicate Chart arguments and values.

www.kaggle.com
Backend API
Copy to CodeSandBox
Apply
Reset
import React from 'react'; import DataSource from 'devextreme/data/data_source'; import CustomStore from 'devextreme/data/custom_store'; import Chart, { ValueAxis, Label, Legend, Series, Size, Export, LoadingIndicator, } from 'devextreme-react/chart'; import SelectBox from 'devextreme-react/select-box'; class App extends React.Component { constructor(props) { super(props); this.temperature = [2, 4, 6, 8, 9, 10, 11]; this.palette = ['#c3a2cc', '#b7b5e0', '#e48cba']; this.paletteIndex = 0; this.monthWeather = new DataSource({ store: new CustomStore({ load: () => fetch('../../../../data/monthWeather.json') .then((e) => e.json()) .catch(() => { throw new Error('Data Loading Error'); }), loadMode: 'raw', }), filter: ['t', '>', '2'], paginate: false, }); this.customizePoint = () => { const color = this.palette[this.paletteIndex]; this.paletteIndex = this.paletteIndex === 2 ? 0 : this.paletteIndex + 1; return { color }; }; this.changeTemperature = (e) => { this.monthWeather.filter(['t', '>', e.value]); this.monthWeather.load(); }; } customizeLabel(e) { return `${e.valueText}${'&#176C'}`; } render() { return ( <div id="chart-demo"> <Chart title="Temperature in Seattle: October 2017" dataSource={this.monthWeather} customizePoint={this.customizePoint}> <Size height={420} /> <ValueAxis> <Label customizeText={this.customizeLabel} /> </ValueAxis> <Series argumentField="day" valueField="t" type="bar" /> <Legend visible={false} /> <Export enabled={true} /> <LoadingIndicator enabled={true} /> </Chart> <div className="action"> <div className="label">Choose a temperature threshold, &deg;C: </div> <SelectBox id="choose-temperature" dataSource={this.temperature} defaultValue={2} onValueChanged={this.changeTemperature} /> </div> </div> ); } } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app'), );
<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.js"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
.action { width: 330px; margin-top: 20px; display: flex; align-items: center; justify-content: space-between; } .action .dx-selectbox { width: 90px; }
window.config = { transpiler: 'plugin-babel', meta: { 'devextreme/localization.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, defaultExtension: 'js', map: { 'react': 'npm:react@17.0.2/umd/react.development.js', 'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.8.1/prop-types.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@22.1.5/cjs', 'devextreme-react': 'npm:devextreme-react@22.1.5', 'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.5.16/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.63/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.32/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11', 'inferno': 'npm:inferno@7.4.4/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat@7.4.11/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.11/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class@7.4.11/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras@7.4.11/dist/inferno-extras.min.js', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', // Prettier 'prettier/standalone': 'npm:prettier@2.7.1/standalone.js', 'prettier/parser-html': 'npm:prettier@2.7.1/parser-html.js', }, packages: { 'devextreme': { defaultExtension: 'js', }, 'devextreme-react': { main: 'index.js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.11/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, react: true, }, }; System.config(window.config);
[ { "day": "1", "t": 11 }, { "day": "2", "t": 7 }, { "day": "3", "t": 6 }, { "day": "4", "t": 8 }, { "day": "5", "t": 7 }, { "day": "6", "t": 7 }, { "day": "7", "t": 11 }, { "day": "8", "t": 9 }, { "day": "9", "t": 5 }, { "day": "10", "t": 8 }, { "day": "11", "t": 6 }, { "day": "12", "t": 9 }, { "day": "13", "t": 8 }, { "day": "14", "t": 6 }, { "day": "15", "t": 6 }, { "day": "16", "t": 6 }, { "day": "17", "t": 10 }, { "day": "18", "t": 9 }, { "day": "19", "t": 12 }, { "day": "20", "t": 9 }, { "day": "21", "t": 8 }, { "day": "22", "t": 13 }, { "day": "23", "t": 9 }, { "day": "24", "t": 7 }, { "day": "25", "t": 6 }, { "day": "26", "t": 11 }, { "day": "27", "t": 8 }, { "day": "28", "t": 7 }, { "day": "29", "t": 9 }, { "day": "30", "t": 7 }, { "day": "31", "t": 3 } ]