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.
79 lines (77 loc) • 3.36 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]>
<title>Chart 2D</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="isDebug: true, async: true"></script>
<script type="text/javascript">
require([
"dojo/ready",
"dojo/dom",
"dojo/_base/Color",
"dojox/charting/Chart",
"dojox/charting/axis2d/Default",
"dojox/charting/plot2d/Lines",
"dojox/charting/plot2d/Grid"],
function(ready, dom, Color, Chart, Axis, Lines, Grid){
ready(function(){
var chart = new Chart(dom.byId("chart")).
addAxis("x", { fixLower: "minor", fixUpper: "minor", natural: true }).
addAxis("y", { vertical: true, fixLower: "major", fixUpper: "major", includeZero: true }).
addPlot("default", { type: Lines }).
addPlot("grid", { type: Grid, renderOnAxis: false, majorVLine: { color: "green", width: 3 }, majorHLine: { color: "red", width: 3 } }).
addSeries("Series A", [ 2, 1, 0.5, -1, -2 ] ).
render();
var color = new Color({ r:246, g:249, b:253, a:0.8 });
var color2 = new Color({ r:146, g:149, b:153, a:0.8 });
var chart = new Chart(dom.byId("chartH")).
addAxis("x", { fixLower: "minor", fixUpper: "minor", natural: true }).
addAxis("y", { vertical: true, fixLower: "major", fixUpper: "major", includeZero: true }).
addPlot("default", { type: Lines }).
addPlot("grid", { type: Grid, renderOnAxis: false, majorVLine: { color: color, width: 1 }, hMajorLines: false,
hFill: color, hAlternateFill: color2, hStripes: true }).
addSeries("Series A", [ 2, 1, 0.5, -1, -2 ] ).
render();
var chart = new Chart(dom.byId("chartV")).
addAxis("x", { fixLower: "minor", fixUpper: "minor", natural: true }).
addAxis("y", { vertical: true, fixLower: "major", fixUpper: "major", includeZero: true }).
addPlot("default", { type: Lines }).
addPlot("grid", { type: Grid, renderOnAxis: false, majorHLine: { color: color, width: 1 }, vMajorLines: false, vFill: color, vStripes: true }).
addSeries("Series A", [ 2, 1, 0.5, -1, -2 ] ).
render();
color = new Color({ r:246, g:249, b:253, a:0.3 });
var chart = new Chart(dom.byId("chartScot")).
addAxis("x", { fixLower: "minor", fixUpper: "minor", minorTickStep: 0.2 }).
addAxis("y", { vertical: true, fixLower: "major", fixUpper: "major", includeZero: true , minorTickStep: 0.2 }).
addPlot("default", { type: Lines }).
addPlot("grid", { type: Grid, renderOnAxis: false, hFill: color, vFill: color, hMajorLines: false, vMajorLines: false, hStripes: true, vStripes: true }).
addSeries("Series A", [ 2, 1, 0.5, -1, -2 ] ).
render();
});
});
</script>
</head>
<body>
<h1>Grid</h1>
<div id="chart" style="width:400px; height:300px"></div>
<div id="chartH" style="width:400px; height:300px"></div>
<div id="chartV" style="width:400px; height:300px"></div>
<div id="chartScot" style="width:400px; height:300px"></div>
</body>
</html>