dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
63 lines (60 loc) • 2.21 kB
HTML
<!--[if IE 7]>
<!DOCTYPE>
<html lang="en">
<head>
<![endif]-->
<!--[if IE 8]>
<!DOCTYPE>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<![endif]-->
<![if gte IE 9]>
<html lang="en">
<head>
<![endif]>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test a Spider Chart with a single series</title>
<style type="text/css">
@import "../../../../dojo/resources/dojo.css";
@import "../../../../dijit/themes/claro/claro.css";
</style>
<script type="text/javascript" src="../../../../dojo/dojo.js" data-dojo-config="isDebug: true, has:{'dojo-bidi': true}"></script>
<script type="text/javascript">
require(["dojo/ready", "dojox/charting/Chart", "dojox/charting/plot2d/Spider", "dojox/charting/themes/PlotKit/blue",
"dijit/Tooltip", "dojox/charting/axis2d/Base"], function(ready, Chart, Spider, blue, Tooltip, Base){
ready(function(){
var chart = new Chart("test");
chart.setTheme(blue);
chart.addPlot("default", {
type: Spider,
labelOffset: -10,
axisColor: "lightgray",
spiderColor: "silver",
seriesFillAlpha: 0.2,
spiderOrigin: 0.16,
markerSize: 3,
precision: 0
});
var data= [ {"Sales":73,"Marketing":226,"Development":125,"Administration":135,"Support":105},
{"Sales":73,"Marketing":206,"Development":155,"Administration":235,"Support":87},
{"Sales":53,"Marketing":326,"Development":225,"Administration":145,"Support":55} ];
// we define several axis (optional step for the general case)
chart.addAxis("Sales", { type: Base, min: 0, max: 100 });
chart.addAxis("Marketing", { type: Base, min: 100, max: 400});
chart.addAxis("Development", { type: Base, min: 0, max: 250 });
chart.addAxis("Administration", { type: Base, min: 0, max: 250});
chart.addAxis("Support", { type: Base, min: 0, max:150 });
chart.setDir("rtl");
// we add a single series, without axis definitions we won't be able to compute data axis min/max
chart.addSeries("China", {data: data[0] }, { fill: "blue" });
chart.render();
});
});
</script>
</head>
<body class="claro">
<div id="test" style="width: 500px; height: 500px;"></div>
</body>
</html>