Your search did not match any results.
Polar and Radar Charts

Periodic Data


This example illustrates the visualization of periodic data. To notify the widget that data is periodic, the period option of the argumentAxis is specified.

Copy to CodePen
$(function(){ $("#chart").dxPolarChart({ dataSource: dataSource, series: [{ type: "line", valueField: "val", name: "Function"}], legend: { visible: false }, commonSeriesSettings: { closed: false }, argumentAxis: { inverted: true, startAngle: 90, tickInterval: 45, period: 360 }, "export": { enabled: true }, title: "Archimedean Spiral" }); });
<!DOCTYPE html> <html xmlns=""> <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=""></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery-3.1.0.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="" /> <link rel="stylesheet" type="text/css" href="" /> <link rel="dx-theme" data-theme="generic.light" href="" /> <script src=""></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"></div> </div> </body> </html>
#chart { height: 440px; width: 100%; }
var dataSource = [{ arg: 0, val: 0 }, { arg: 720, val: 2 }];