Free Trial Buy
    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.

    See more Hide details
    Prev Demo Next Demo
    www.kaggle.com

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Backend API
    Copy to CodePen
    Apply
    Reset
    window.onload = function () { const source = new DevExpress.data.DataSource({ load() { const d = $.Deferred(); $('#chart').dxChart('instance').showLoadingIndicator(); const 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', '>', '2'], paginate: false, }); const palette = ['#c3a2cc', '#b7b5e0', '#e48cba']; let paletteIndex = 0; const viewModel = { chartOptions: { 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`; }, }, }, }, temperatureOptions: { dataSource: [2, 4, 6, 8, 9, 10, 11], value: 2, onValueChanged(data) { const 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/22.2.3/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/22.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" data-bind="dxChart: chartOptions"></div> <div class="action"> <div class="label">Choose a temperature threshold, &deg;C: </div> <div id="choose-temperature" data-bind="dxSelectBox: temperatureOptions"></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 } ]