Your search did not match any results.
Charts

Client-Side Data Processing

Documentation

The DevExtreme JavaScript UI components can get data from a remote storage and process it on the client. This demo shows the Chart component whose data source loads all data from a remote JSON file in one query. Afterwards, different filters are applied to this data depending on a value of the drop-down menu under the chart.

www.kaggle.com
Backend API
Copy to CodePen
Apply
Reset
$(() => { const source = new DevExpress.data.DataSource({ load() { return $.getJSON('../../../../data/monthWeather.json'); }, loadMode: 'raw', filter: ['t', '>', '2'], paginate: false, }); const palette = ['#c3a2cc', '#b7b5e0', '#e48cba']; let paletteIndex = 0; $('#chart').dxChart({ dataSource: source, title: 'Temperature in Seattle: October 2017', size: { height: 420, }, series: { argumentField: 'day', valueField: 't', type: 'bar', }, customizePoint() { const color = palette[paletteIndex]; paletteIndex = paletteIndex === 2 ? 0 : paletteIndex + 1; return { color, }; }, legend: { visible: false, }, export: { enabled: true, }, valueAxis: { label: { customizeText() { return `${this.valueText}&#176C`; }, }, }, loadingIndicator: { enabled: true, }, }); $('#choose-temperature').dxSelectBox({ dataSource: [2, 4, 6, 8, 9, 10, 11], value: 2, onValueChanged(data) { source.filter(['t', '>', data.value]); source.load(); }, }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.3/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/21.2.3/js/dx.all.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="chart-demo"> <div id="chart"></div> <div class="action"> <div class="label">Choose a temperature threshold, &deg;C: </div> <div id="choose-temperature"></div> </div> </div> </div> </body> </html>
.action { width: 330px; margin-top: 20px; display: flex; align-items: center; justify-content: space-between; } .action .dx-selectbox { width: 90px; }
[ { "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 } ]