Your search did not match any results.
Charts

Client-Side Data Processing

Documentation
The DevExtreme HTML5 Widgets can get data from a remote storage and process it on the client. This demo shows the Chart widget 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.
Copy to Codepen
Apply
Reset
window.onload = function() { var source = new DevExpress.data.DataSource({ load: function (loadOptions) { var d = $.Deferred(); $('#chart').dxChart('instance').showLoadingIndicator(); var xhr = new XMLHttpRequest(); xhr.open("GET", "../../../../data/monthWeather.json", true); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { var data = JSON.parse(xhr.responseText), filteredData = DevExpress.data .query(data) .filter(loadOptions.filter) .toArray(); d.resolve(filteredData); } }; xhr.send(); return d.promise(); }, filter: ['t', '>', '6'] }); var palette = ["#c3a2cc", "#b7b5e0", "#e48cba"], paletteIndex = 0; var viewModel = { chartOptions: { dataSource: source, title: 'Temperature in Barcelona: January 2012', size: { height: 420 }, series: { argumentField: 'day', valueField: 't', type: 'bar' }, customizePoint: function () { var color = palette[paletteIndex]; paletteIndex = paletteIndex === 2 ? 0 : paletteIndex + 1; return { color: color }; }, legend: { visible: false }, "export": { enabled: true }, valueAxis: { label: { customizeText: function () { return this.valueText + '&#176C'; } } } }, temperatureOptions: { dataSource: [6, 7, 8, 9, 10, 11, 12], width: 70, value: 6, onValueChanged: function (data) { var t = data.value; source.filter(['t', '>', t]); source.load(); } } }; ko.applyBindings(viewModel, document.getElementById("chart-demo")); };
<!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="js/jquery-3.1.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.5/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" data-bind="dxChart: chartOptions"></div> <div class="action"> <div id="choose-temperature" data-bind="dxSelectBox: temperatureOptions"></div> <div class="label">Choose a temperature threshold, &deg;C: </div> </div> </div> </div> </body> </html>
#chart-demo { width: 100%; } #choose-temperature { float: right; } .action { width: 320px; margin-top: 20px; } .label { padding-top: 9px; }