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.
145 lines (144 loc) • 4.22 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]>
<html lang="en">
<head>
<![endif]>
<title>Threshold Indicator</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript" src="../../../dojo/dojo.js"
data-dojo-config="isDebug: true"></script>
<script type="text/javascript">
require(["dojo/ready", "dojox/charting/Chart", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/Default",
"dojox/charting/action2d/MouseZoomAndPan", "dojox/charting/plot2d/Indicator", "dojox/charting/action2d/PlotAction"],
function(ready, Chart, Axis, Plot, MouseZoomAndPan, Indicator, PlotAction){
ready(function(){
var chart = new Chart("chart", { margins : {l :20, t:30, b:10, r: 50} });
chart.addAxis("x", {
type : Axis,
font: "normal normal normal 14pt Tahoma",
fixLower : "minor",
natural : true,
stroke : "gray",
majorTick : {
color : "red",
length : 4
},
minorTick : {
color : "blue",
length : 2
}
});
chart.addAxis("y", {
vertical : true,
font: "normal normal normal 14pt Tahoma",
min : 0,
max : 100,
majorTickStep : 10,
minorTickStep : 5,
stroke : "gray",
majorTick : {
stroke : "black",
length : 4
},
minorTick : {
stroke : "gray",
length : 2
}
});
chart.addPlot("default", {
type : Plot
});
chart.addPlot("thresholdh", {
type: Indicator,
vertical: false,
lineStroke: { color: "red", style: "ShortDash"},
stroke: null,
outline: null,
fill: null,
offset: { y: -7, x: -10 },
values: 15
});
chart.addPlot("thresholdv", {
type: Indicator,
lineStroke: { color: "blue", style: "ShortDash"},
stroke: null,
outline: null,
fill: null,
offset: { y: -7, x: 0 },
values: 5
});
chart.addPlot("thresholdhb", {
type: Indicator,
vertical: false,
lineStroke: { color: "red", style: "ShortDash"},
stroke: null,
outline: null,
fill: null,
offset: { y: -7, x: 10 },
start: true,
values: [35]
});
chart.addPlot("thresholdvb", {
type: Indicator,
lineStroke: { color: "blue", style: "ShortDash"},
stroke: null,
outline: null,
fill: null,
start: true,
offset: { y: -7, x: -40 },
labels: "markers",
values: [20]
});
chart.addPlot("thresholdual", {
type: Indicator,
vertical: false,
lineStroke: { color: "blue", width: 2},
color: "red",
stroke: null,
outline: null,
fill: null,
offset: { y: -7, x: -10 },
lineFill: [0, 10, 50, 0.4],
values: [50, 90]
});
chart.addSeries("markers 1", [ 8, 17, 30 ], { plot: "thresholdvb" });
chart.addSeries("markers 2", [ 8, 17, 30 ], { plot: "thresholdhb" });
chart.addSeries("Series A", [ 8, 7, 3, 2, 5, 7, 9, 10, 2, 10, 14, 16,
29, 13, 16, 15, 20, 19, 15, 12, 24, 20, 20, 26, 28, 26, 28, 14,
24, 29, 31, 35, 37, 31, 35, 37, 37, 36, 31, 30, 50, 49, 42, 46,
44, 40, 47, 43, 48, 47, 51, 52, 52, 51, 54, 57, 58, 50, 54, 51,
74, 68, 67, 62, 62, 65, 61, 66, 65, 62, 74, 78, 78, 77, 74, 62,
72, 74, 70, 78, 84, 83, 85, 86, 86, 89, 89, 85, 86, 86, 98, 73,
93, 91, 92, 92, 99, 93, 94, 92 ]);
new MouseZoomAndPan(chart, "default", { axis: "x" });
var action = new PlotAction(chart, "thresholdh");
action.process = function(o){
if(o.type == "onclick"){
console.log("down on thresholdh");
}
};
action.connect();
chart.render();
});
})
</script>
</head>
<body class="tundra" style="height: 100%; width: 100%">
<div id="chart" style="width: 100%; height: 100%;"></div>
</body>
</html>