Your search did not match any results.
Charts

Local Data Source

Documentation
In this demo, the Chart widget is populated with data taken from a simple JavaScript array. It is the easiest way to provide data for the widget, and it is the right choice if you do not need to get data from the server or update data dynamically.
Copy to Codepen
Apply
Reset
window.onload = function() { var viewModel = { chartOptions: { dataSource: populationData, legend: { visible: false }, series: { type: "bar" }, argumentAxis: { tickInterval: 10 }, valueAxis: { label: { format: { type: "millions" } } }, title: "World Population by Decade" } }; 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> <script src="data.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> </div> </body> </html>
#chart { height: 440px; width: 100%; }
var populationData = [{ arg: 1950, val: 2525778669 }, { arg: 1960, val: 3026002942 }, { arg: 1970, val: 3691172616 }, { arg: 1980, val: 4449048798 }, { arg: 1990, val: 5320816667 }, { arg: 2000, val: 6127700428 }, { arg: 2010, val: 6916183482 }];