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.
123 lines (117 loc) • 5.18 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]>
<!DOCTYPE HTML>
<html lang="en">
<head>
<![endif]>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing Axes</title>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/tests/css/dijitTests.css";
</style>
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, isDebug: true"></script>
<script type="text/javascript">
var chart1a, chart1b;
function rotationXChanged(value){
value = parseInt(value);
chart1a.getAxis("x").opt.rotation = value;
chart1a.dirty = true;
chart1a.render();
chart1b.getAxis("x").opt.rotation = value;
chart1b.dirty = true;
chart1b.render();
}
function rotationYChanged(value){
value = parseInt(value);
chart1a.getAxis("y").opt.rotation = value;
chart1a.dirty = true;
chart1a.render();
chart1b.getAxis("y").opt.rotation = value;
chart1b.dirty = true;
chart1b.render();
}
require(["dojo/ready", "dojox/charting/Chart", "dojox/charting/axis2d/Default",
"dojox/charting/plot2d/Markers", "dojox/charting/action2d/MouseZoomAndPan", "dojox/charting/Theme"],
function(ready, Chart, Default, Markers,
MouseZoomAndPan, Theme){
ready(function(){
var myLabelFunc = function(text, value){
return text+" make it even longer";
};
chart1a = new Chart("test1a").
addAxis("x", {fixLower: "major", fixUpper: "major", natural: true, includeZero: true, font: "14px helvetica",
minorTickStep: 0.5, labelFunc: myLabelFunc, rotation: 30}).
addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", natural: true, includeZero: true, labelFunc: myLabelFunc}).
addPlot("default", {type: Markers}).
addSeries("Series A", [{x: 1, y: 1}, {x: 2, y: 2}, {x: 3, y: 1}]).
addSeries("Series B", [{x: 3, y: 2}, {x: 4, y: 3}, {x: 5, y: 2}]).
addSeries("Series C", [{x: 5, y: 3}, {x: 6, y: 4}, {x: 7, y: 3}]).
render();
new MouseZoomAndPan(chart1a);
chart1b = new Chart("test1b").
addAxis("x", {fixLower: "major", fixUpper: "major", natural: true, includeZero: true, font: "14px helvetica",
minorTickStep: 0.5, labelFunc: myLabelFunc, rotation: 30, leftBottom: false}).
addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", natural: true, includeZero: true, labelFunc: myLabelFunc, leftBottom: false}).
addPlot("default", {type: Markers}).
addSeries("Series A", [{x: 1, y: 1}, {x: 2, y: 2}, {x: 3, y: 1}]).
addSeries("Series B", [{x: 3, y: 2}, {x: 4, y: 3}, {x: 5, y: 2}]).
addSeries("Series C", [{x: 5, y: 3}, {x: 6, y: 4}, {x: 7, y: 3}]).
render();
new MouseZoomAndPan(chart1b);
var chart2 = new Chart("test2").
addAxis("x", {fixLower: "major", fixUpper: "major", natural: true, includeZero: true, font: "14px helvetica",
majorTickStep: 2, minorTickStep: 1,
labels: [ {value: 0, text:"this is a very very long label"},
{ value: 1, text:"sm"},
{ value: 2, text:"short" },
{ value: 3, text: "minor" },
{ value: 4, text:"la" },
{ value: 5, text: "label" },
{ value: 6, text: "el" }
]}).
addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", natural: true, includeZero: true}).
addPlot("default", {type: Markers}).
addSeries("Series A", [{x: 0, y: 1}, {x: 2, y: 2}, {x: 4, y: 1}]).
addSeries("Series B", [{x: 2, y: 2}, {x: 4, y: 3}, {x: 6, y: 2}]).
addSeries("Series C", [{x: 4, y: 3}, {x: 6, y: 4}, {x: 8, y: 3}]).
render();
new MouseZoomAndPan(chart2);
var chart3 = new Chart("test3").
addAxis("x", {fixLower: "major", fixUpper: "major", natural: true, includeZero: true, font: "14px helvetica",
majorTickStep: 0.5, minorTickStep: 0.1 }).
addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", natural: true, includeZero: true}).
addPlot("default", {type: Markers}).
addSeries("Series A", [{x: 1, y: 1}, {x: 2, y: 2}, {x: 3, y: 1}]).
addSeries("Series B", [{x: 5, y: 2}, {x: 6, y: 3}, {x: 7, y: 2}]).
addSeries("Series C", [{x: 9, y: 3}, {x: 10, y: 4}, {x: 11, y: 3}]).
render();
new MouseZoomAndPan(chart3);
});
});
</script>
</head>
<body>
<h1>Testing Axes drop labels</h1>
<p>1: Axes with rotation & labelFunc</p>
X Axis Label Rotation: <input onchange="rotationXChanged(this.value)" value="30"/>
Y Axis Label Rotation: <input onchange="rotationYChanged(this.value)" value="0"/>
<div id="test1a" style="width: 600px; height: 400px;"></div>
<div id="test1b" style="width: 600px; height: 400px;"></div>
<p>2: Axes with labels array.</p>
<div id="test2" style="width: 600px; height: 200px;"></div>
<p>3: Numeric axis.</p>
<div id="test3" style="width: 320px; height: 180px;"></div>
<p>That's all Folks!</p>
</body>
</html>