Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Free Trial Buy
    Your search did not match any results.
    Charts

    Client-Side Data Processing

    Documentation

    The DevExtreme HTML5 UI components can get data from a remote storage and process it on the client. This demo shows the Chart UI 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.

    See more Hide details
    Prev Demo Next Demo
    weatherbase.com

    jQuery

    Angular

    Vue

    React

    AngularJS

    Knockout

    ASP.NET Core

    ASP.NET MVC

    Copy to CodePen
    Apply
    Reset
    window.onload = function() { var source = new DevExpress.data.DataSource({ load: function () { 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.responseText) { d.resolve(JSON.parse(xhr.responseText)); } }; xhr.send(); return d.promise(); }, loadMode: 'raw', filter: ['t', '>', '6'], paginate: false }); 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="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> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/20.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>
    #choose-temperature { float: right; } .action { width: 320px; margin-top: 20px; } .label { padding-top: 9px; }