You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
5.1 KiB
122 lines
5.1 KiB
<!--[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>
|
|
|