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.
176 lines
5.8 KiB
176 lines
5.8 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>Chart2D Title</title> |
|
<style type="text/css"> |
|
@import "../../../dojo/resources/dojo.css"; |
|
@import "../../../dijit/tests/css/dijitTests.css"; |
|
@import "../../../dijit/themes/tundra/tundra.css"; |
|
|
|
.axisTitleRotation90 { |
|
transform: rotate(90deg); |
|
-o-transform: rotate(90deg); |
|
-webkit-transform: rotate(90deg); |
|
-moz-transform: rotate(90deg); |
|
} |
|
.axisTitleRotation180 { |
|
transform: rotate(180deg); |
|
-o-transform: rotate(180deg); |
|
-webkit-transform: rotate(180deg); |
|
-moz-transform: rotate(180deg); |
|
} |
|
.axisTitleRotation270 { |
|
transform: rotate(-90deg); |
|
-o-transform: rotate(-90deg); |
|
-webkit-transform: rotate(-90deg); |
|
-moz-transform: rotate(-90deg); |
|
} |
|
</style> |
|
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script> |
|
<script type="text/javascript"> |
|
|
|
dojo.require("dojox.charting.Chart"); |
|
dojo.require("dojox.charting.axis2d.Default"); |
|
dojo.require("dojox.charting.plot2d.Lines"); |
|
dojo.require("dojox.charting.plot2d.Markers"); |
|
dojo.require("dojox.charting.plot2d.Columns"); |
|
dojo.require("dojox.charting.themes.PlotKit.blue"); |
|
dojo.require("dojox.charting.themes.PlotKit.cyan"); |
|
dojo.require("dojox.charting.themes.PlotKit.green"); |
|
dojo.require("dojox.charting.themes.PlotKit.orange"); |
|
dojo.require("dojox.charting.themes.PlotKit.purple"); |
|
dojo.require("dojox.charting.themes.PlotKit.red"); |
|
dojo.require("dijit.form.Button"); |
|
dojo.require("dijit.form.NumberSpinner"); |
|
dojo.require("dojo.parser"); |
|
var chart1; |
|
|
|
updateAxis = function(){ |
|
var gap = dijit.byId("axisTitleGap").get("value"), |
|
rotation = dijit.byId("rotation").get("value"), |
|
orientation = dojo.byId("orientation").value || "axis"; |
|
chart1.addAxis("x", { |
|
title: "Quarter of 2010", |
|
titleGap: gap, |
|
titleFontColor: "orange", |
|
titleOrientation: orientation, |
|
rotation: rotation, |
|
includeZero: true, natural: true, fixLower: "major", fixUpper: "major", |
|
labels: [ |
|
{value: 0, text: ""},{value: 1, text: "1 Qtr"},{value: 2, text: "2 Qtr"}, |
|
{value: 3, text: "3 Qtr"},{value: 4, text: "4 Qtr"},{value: 5, text: "End"} |
|
] |
|
}). |
|
addAxis("y", { |
|
title: "Revenue(million)", |
|
titleGap: gap, |
|
titleFontColor: "orange", |
|
titleOrientation: orientation, |
|
rotation: rotation, |
|
vertical: true, includeZero: true, natural: true, fixLower: "major", fixUpper: "major", majorTickStep: 2, |
|
labels: [ |
|
{value: 0, text: ""},{value: 1, text: "One"},{value: 2, text: "Two"}, |
|
{value: 3, text: "Three"},{value: 4, text: "Four"},{value: 5, text: "Five"},{value: 6, text: "Six"} |
|
] |
|
}). |
|
addAxis("x2", { |
|
title: "Quarter of 2010", |
|
titleGap: gap, |
|
titleFontColor: "blue", |
|
titleOrientation: orientation, |
|
rotation: rotation, |
|
leftBottom: false, |
|
includeZero: true, natural: true, fixLower: "major", fixUpper: "major" |
|
}). |
|
addAxis("y2", { |
|
title: "Quantity(ton)", |
|
titleGap: gap, |
|
titleFontColor: "blue", |
|
titleOrientation: orientation, |
|
rotation: rotation, |
|
leftBottom: false, |
|
vertical: true, includeZero: true, natural: true, fixLower: "major", fixUpper: "major", majorTickStep: 2 |
|
}). |
|
render(); |
|
}; |
|
|
|
makeObjects = function(){ |
|
chart1 = new dojox.charting.Chart("test1"). |
|
addPlot("default", {type: "Lines"}). |
|
addSeries("Series A", [3, 5, 3, 4, 2], {stroke: {color: "orange"}, fill: "yellow"}). |
|
addPlot("default2", {type: "Columns", gap: 15, hAxis: "x2", vAxis: "y2"}). |
|
addSeries("Series B", [12, 8, 15, 20], {plot: "default2", stroke: {color: "blue"}, fill: "lightblue"}); |
|
updateAxis(); |
|
|
|
var chart2 = new dojox.charting.Chart("test2"). |
|
addAxis("x", { |
|
title: "Month of 2010", |
|
titleGap: 20, |
|
titleFont: "normal normal normal 10pt Arial", |
|
titleFontColor: "green", |
|
titleOrientation: "away", |
|
rotation: 30, |
|
includeZero: true, natural: true, fixLower: "major", fixUpper: "major", |
|
labels: [ |
|
{value: 0, text: ""},{value: 1, text: "Jan"},{value: 2, text: "Feb"}, |
|
{value: 3, text: "Mar"},{value: 4, text: "Aprl"},{value: 5, text: "May"} |
|
] |
|
}). |
|
addAxis("y", { |
|
title: "Production(Quantity)", |
|
titleGap: 15, |
|
titleFont: "normal normal normal 10pt Arial", |
|
titleFontColor: "orange", |
|
titleOrientation: "axis", |
|
vertical: true, includeZero: true, natural: true, |
|
fixLower: "major", fixUpper: "major", majorTickStep: 30000 |
|
}). |
|
addPlot("default", {type: "Markers"}). |
|
addSeries("Series A", [200000, 80000, 120000, 140000, 150000], {stroke: {color: "red"}, fill: "lightpink"}). |
|
addSeries("Series B", [30000, 60000, 90000, 120000, 200000], {stroke: {color: "blue"}, fill: "lightblue"}). |
|
render(); |
|
}; |
|
|
|
dojo.addOnLoad(makeObjects); |
|
|
|
|
|
|
|
|
|
</script> |
|
</head> |
|
<body class="tundra"> |
|
<h1>Chart2D Titles</h1> |
|
<p>Column chart with axis title</p> |
|
<p> |
|
Axis Title Gap: |
|
<input dojoType="dijit.form.NumberSpinner" id="axisTitleGap" value="15" constraints="{min: 0, max: 50, fractional: false}" style="width: 8em;"> |
|
|
|
Axis Rotation |
|
<input dojoType="dijit.form.NumberSpinner" id="rotation" value="0" constraints="{min: 0, max: 360, fractional: false}" style="width: 8em;"> |
|
|
|
<select id="orientation"> |
|
<option value="axis">axis title facing the axis</option> |
|
<option value="away">axis title facing away</option> |
|
</select> |
|
|
|
<button dojoType="dijit.form.Button" onClick="updateAxis()">Apply</button> |
|
</p> |
|
<div id="test1" style="width: 500px; height: 400px;"></div> |
|
<p>Line chart with customized axis title</p> |
|
<div id="test2" style="width: 500px; height: 400px;"></div> |
|
</body> |
|
</html>
|
|
|