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.
96 lines
4.0 KiB
96 lines
4.0 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 src="../../../dojo/dojo.js" data-dojo-config="isDebug: true"></script> |
|
<script> |
|
|
|
dojo.require("dojox.charting.Chart"); |
|
dojo.require("dojox.charting.axis2d.Invisible"); |
|
dojo.require("dojox.charting.axis2d.Default"); |
|
dojo.require("dojox.charting.plot2d.Markers"); |
|
dojo.require("dojox.charting.themes.ThreeD"); |
|
|
|
makeObjects = function(){ |
|
dojo.query("button").style("disabled", true); |
|
|
|
var customTheme = dojox.charting.themes.ThreeD.clone(); |
|
customTheme.plotarea.fill = "#fed"; |
|
|
|
var chart1 = new dojox.charting.Chart("test1"). |
|
setTheme(customTheme). |
|
addAxis("x", {fixLower: "major", fixUpper: "major", natural: true, includeZero: true, majorTick: { length: -10}}). |
|
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: 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(); |
|
|
|
var chart2 = new dojox.charting.Chart("test2"). |
|
setTheme(customTheme). |
|
addAxis("x", {fixLower: "major", fixUpper: "major", natural: true, includeZero: true, majorTick: { length: 10}}). |
|
addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", natural: true, includeZero: true, majorTick: {length: -5}, minorTicks: false}). |
|
addPlot("p1", {type: "Markers"}). |
|
addPlot("p2", {type: "Markers"}). |
|
addPlot("p3", {type: "Markers"}). |
|
addSeries("Series A", [{x: 1, y: 1}, {x: 2, y: 2}, {x: 3, y: 1}], {plot: "p1"}). |
|
addSeries("Series B", [{x: 3, y: 2}, {x: 4, y: 3}, {x: 5, y: 2}], {plot: "p2"}). |
|
addSeries("Series C", [{x: 5, y: 3}, {x: 6, y: 4}, {x: 7, y: 3}], {plot: "p3"}). |
|
render(); |
|
|
|
var chart3 = new dojox.charting.Chart("test3"). |
|
setTheme(customTheme). |
|
addAxis("x", {type: "Invisible", fixLower: "major", fixUpper: "major", natural: true, includeZero: true}). |
|
addAxis("y", {type: "Invisible",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: 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(); |
|
|
|
var chart4 = new dojox.charting.Chart("test4"). |
|
setTheme(customTheme). |
|
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(); |
|
}; |
|
|
|
dojo.ready(makeObjects); |
|
|
|
</script> |
|
</head> |
|
<body> |
|
<h1>Testing Axes</h1> |
|
<!--<p><button onclick="makeObjects();">Go</button></p>--> |
|
<p>1: Shared axes and three series</p> |
|
<div id="test1" style="width: 200px; height: 200px;"></div> |
|
<p>2: Shared axes and three plots.</p> |
|
<div id="test2" style="width: 200px; height: 200px;"></div> |
|
<p>3: Like #1 but invisible axes.</p> |
|
<div id="test3" style="width: 200px; height: 200px;"></div> |
|
<p>4: Like #1 but no axes.</p> |
|
<div id="test4" style="width: 200px; height: 200px;"></div> |
|
<p>That's all Folks!</p> |
|
</body> |
|
</html>
|
|
|