857 lines
28 KiB
HTML
857 lines
28 KiB
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>
|
|
<!-- NOTE: This test uses amd style modules and loading, but must run in sync loading mode because it uses DTL which does not work async-->
|
|
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: true, async: true"></script>
|
|
<script type="text/javascript">
|
|
require([
|
|
"dojo/_base/array",
|
|
"dojo/dom",
|
|
"dojo/dom-style",
|
|
"dojo/ready",
|
|
"dojox/charting/Chart",
|
|
"dojox/charting/themes/Shrooms",
|
|
"dojox/charting/themes/PlotKit/blue",
|
|
"dojox/charting/themes/PlotKit/cyan",
|
|
"dojox/charting/themes/PlotKit/green",
|
|
"dojox/charting/themes/Ireland",
|
|
"dojox/charting/themes/SageToLime",
|
|
"dojox/charting/themes/Minty",
|
|
"dojox/charting/themes/Tufte",
|
|
"dojox/dtl",
|
|
"dojox/dtl/Context",
|
|
"dojox/dtl/tag/logic",
|
|
"dojox/charting/axis2d/Default",
|
|
"dojox/charting/plot2d/Default",
|
|
"dojox/charting/plot2d/Areas",
|
|
"dojox/charting/plot2d/Markers",
|
|
"dojox/charting/plot2d/MarkersOnly",
|
|
"dojox/charting/plot2d/StackedLines",
|
|
"dojox/charting/plot2d/StackedAreas",
|
|
"dojox/charting/plot2d/Bars",
|
|
"dojox/charting/plot2d/ClusteredBars",
|
|
"dojox/charting/plot2d/StackedBars",
|
|
"dojox/charting/plot2d/ClusteredColumns",
|
|
"dojox/charting/plot2d/StackedColumns",
|
|
"dojox/charting/plot2d/Bubble",
|
|
"dojox/charting/plot2d/Grid",
|
|
"dojox/charting/plot2d/Candlesticks",
|
|
"dojox/charting/plot2d/OHLC",
|
|
"dojox/charting/plot2d/Scatter"],
|
|
function(arr, dom, domStyle, ready, Chart, Shrooms, blue, cyan, green, Ireland, SageToLime, Minty, Tufte,
|
|
dtl, Context){
|
|
|
|
charts = [
|
|
{
|
|
description: "Clustered columns with positive and negative values, readable theme.",
|
|
makeChart: function(node){
|
|
(new Chart(node)).
|
|
setTheme(Tufte).
|
|
addAxis("x", { fixLower: "minor", fixUpper: "minor", natural: true }).
|
|
addAxis("y", { vertical: true, fixLower: "major", fixUpper: "major", includeZero: true }).
|
|
addPlot("default", { type: "ClusteredColumns", gap: 10 }).
|
|
addSeries("Series A", [ 2, 1, 0.5, -1, -2 ] ).
|
|
addSeries("Series B", [ -2, -1, -0.5, 1, 2 ] ).
|
|
addSeries("Series C", [ 1, 0.5, -1, -2, -3 ] ).
|
|
addSeries("Series D", [ 0.7, 1.5, -1.2, -1.25, 3 ] ).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Bubble chart, green theme.",
|
|
makeChart: function(node){
|
|
(new dojox.charting.Chart(node)).
|
|
setTheme(dojox.charting.themes.SageToLime).
|
|
addPlot("default", { type: "Bubble", shadow: {dx: 1, dy: 1, width: 2, color: [0, 0, 0, 0.3]} }).
|
|
addAxis("x", {
|
|
min: 0,
|
|
max: 6,
|
|
majorTick: { stroke: "black", length: 3 },
|
|
minorTick: { stroke: "gray", length: 3 }
|
|
}).
|
|
addAxis("y", {
|
|
vertical: true,
|
|
min: 0,
|
|
max: 10,
|
|
majorTick: { stroke: "black", length: 3 },
|
|
minorTick: { stroke: "gray", length: 3 }
|
|
}).
|
|
addSeries("Series A", [
|
|
{ x: 0.5, y: 5, size: 1.4 },
|
|
{ x: 1.5, y: 1.5, size: 4.5 },
|
|
{ x: 2, y: 9, size:1.5 },
|
|
{ x: 5, y: 0.3, size:0.8 }
|
|
]).
|
|
addSeries("Series B", [
|
|
{ x: 0.3, y: 8, size: 2.5 },
|
|
{ x: 4, y: 6, size:1.1 },
|
|
{ x: 5.5, y: 2, size: 3.2 }
|
|
]).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Lines, calculated labels",
|
|
makeChart: function(node){
|
|
(new dojox.charting.Chart(node)).
|
|
addAxis("x", {
|
|
majorLabels: true,
|
|
minorLabels: true,
|
|
includeZero: true,
|
|
minorTicks: false,
|
|
microTicks: false,
|
|
majorTickStep: 2,
|
|
htmlLabels: true,
|
|
labelFunc: function(value){
|
|
return value + " s";
|
|
},
|
|
maxLabelSize: 30,
|
|
fixUpper: "major", fixLower: "major",
|
|
majorTick: { length: 3 }
|
|
}).
|
|
addAxis("y", {
|
|
labelFunc: function(value){
|
|
return value + " thingers";
|
|
},
|
|
maxLabelSize: 50,
|
|
vertical: true,
|
|
// htmlLabels: false,
|
|
microTicks: true,
|
|
minorTicks: true,
|
|
majorTick: { stroke: "black", length: 3 }
|
|
}).
|
|
addSeries("Series A", [ 1, 2, 1, 2, 1, 2, 1 ]).
|
|
addSeries("Series B", [ 2, 1, 2, 1, 2, 1, 2 ]).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Lines, pre-computed labels",
|
|
makeChart: function(node){
|
|
(new dojox.charting.Chart(node)).
|
|
addAxis("x", {
|
|
majorLabels: true,
|
|
minorLabels: true,
|
|
includeZero: true,
|
|
minorTicks: false,
|
|
microTicks: false,
|
|
majorTickStep: 2,
|
|
labels: [
|
|
{ value: 0, text: "nada" },
|
|
{ value: 2, text: "2 units" },
|
|
{ value: 4, text: "4 units" },
|
|
{ value: 8, text: "2*4 units" }
|
|
],
|
|
htmlLabels: true,
|
|
fixUpper: "major", fixLower: "major",
|
|
majorTick: { length: 3 }
|
|
}).
|
|
addAxis("y", {
|
|
labels: [
|
|
{ value: 0, text: "nada" },
|
|
{ value: 1.1, text: "hrmm" },
|
|
{ value: 1.2, text: "?" },
|
|
{ value: 2, text: "2!" }
|
|
],
|
|
vertical: true,
|
|
// htmlLabels: false,
|
|
microTicks: true,
|
|
minorTicks: true,
|
|
majorTick: { stroke: "black", length: 3 }
|
|
}).
|
|
addSeries("Series A", [ 1, 2, 1, 2, 1, 2, 1 ]).
|
|
addSeries("Series B", [ 2, 1, 2, 1, 2, 1, 2 ]).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Defaults: lines, no axes.",
|
|
makeChart: function(node){
|
|
(new dojox.charting.Chart(node)).
|
|
addSeries("Series A", [ 1, 2, 1, 2, 1, 2, 1 ]).
|
|
addSeries("Series B", [ 2, 1, 2, 1, 2, 1, 2 ]).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Defaults: lines, no axes, and custom strokes.",
|
|
makeChart: function(node){
|
|
(new dojox.charting.Chart(node)).
|
|
addSeries("Series A", [ 1, 2, 1, 2, 1, 2, 1 ], {stroke: "red"}).
|
|
addSeries("Series B", [ 2, 1, 2, 1, 2, 1, 2 ], {stroke: "blue"}).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Areas, Happy theme, no axes.",
|
|
makeChart: function(node){
|
|
(new dojox.charting.Chart(node)).
|
|
addPlot("default", {type: "Areas", tension:"X"}).
|
|
setTheme(Shrooms).
|
|
addSeries("Series A", [1, 2, 0.5, 1.5, 1, 2.8, 0.4]).
|
|
addSeries("Series B", [2.6, 1.8, 2, 1, 1.4, 0.7, 2]).
|
|
addSeries("Series C", [6.3, 1.8, 3, 0.5, 4.4, 2.7, 2]).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Areas, no axes, custom strokes and fills.",
|
|
makeChart: function(node){
|
|
(new dojox.charting.Chart(node)).
|
|
addPlot("default", {type: "Areas"}).
|
|
addSeries("Series A",
|
|
[1, 2, 1, 2, 1, 2, 1],
|
|
{
|
|
stroke: {color: "red", width: 2 },
|
|
fill: "lightpink"
|
|
}
|
|
).
|
|
addSeries("Series B",
|
|
[ 2, 1, 2, 1, 2, 1, 2 ],
|
|
{
|
|
stroke: { color: "blue", width: 2 },
|
|
fill: "lightblue"
|
|
}
|
|
).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Lines, axes, blue theme.",
|
|
makeChart: function(node){
|
|
(new dojox.charting.Chart(node)).
|
|
setTheme(blue).
|
|
addAxis("x").
|
|
addAxis("y", {vertical: true}).
|
|
addSeries("Series A", [1, 2, 1, 2, 1, 2, 1]).
|
|
addSeries("Series B", [2, 1, 2, 1, 2, 1, 2]).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Lines, axes (aligned on minor ticks), cyan theme.",
|
|
makeChart: function(node){
|
|
(new Chart(node)).
|
|
setTheme(cyan).
|
|
addAxis("x", {
|
|
fixLower: "minor", fixUpper: "minor"
|
|
}).
|
|
addAxis("y", {
|
|
vertical: true, fixLower: "minor", fixUpper: "minor"
|
|
}).
|
|
addSeries("Series A", [1, 2, 1, 2, 1, 2, 1]).
|
|
addSeries("Series B", [2, 1, 2, 1, 2, 1, 2]).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Lines, axes (aligned on major ticks), green theme.",
|
|
makeChart: function(node){
|
|
(new Chart(node)).
|
|
setTheme(green).
|
|
addAxis("x", {
|
|
fixLower: "major", fixUpper: "major"
|
|
}).
|
|
addAxis("y", {
|
|
vertical: true, fixLower: "major", fixUpper: "major"
|
|
}).
|
|
addSeries("Series A", [1, 2, 1, 2, 1, 2, 1]).
|
|
addSeries("Series B", [2, 1, 2, 1, 2, 1, 2]).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Lines and markers, no axes, purple theme, custom min/max.",
|
|
makeChart: function(node){
|
|
(new Chart(node)).
|
|
setTheme(SageToLime).
|
|
addPlot("default", {type: "Markers"}).
|
|
addSeries("Series A", [1, 2, 1, 2, 1, 2, 1], {min: 0, max: 3}).
|
|
addSeries("Series B", [2, 1, 2, 1, 2, 1, 2]).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Markers only, no axes, custom theme, custom markers, custom min/max.",
|
|
makeChart: function(node){
|
|
(new Chart(node)).
|
|
addPlot("default", { type: "MarkersOnly" }).
|
|
addSeries("Series A",
|
|
[ 1, 2, 1, 2, 1, 2, 1 ],
|
|
{
|
|
min: 0,
|
|
max: 3,
|
|
stroke: {color: "red", width: 2},
|
|
fill: "red",
|
|
marker: "m-3,0 c0,-4 6,-4 6,0 m-6,0 c0,4 6,4 6,0"
|
|
}
|
|
).
|
|
addSeries("Series B",
|
|
[ 2, 1, 2, 1, 2, 1, 2 ],
|
|
{
|
|
stroke: {color: "blue", width: 2},
|
|
fill: "blue",
|
|
marker: "m-3,-3 l0,6 6,0 0,-6 z"
|
|
}
|
|
).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Lines and markers, shadows, no axes, custom theme, custom markers, custom min/max.",
|
|
makeChart: function(node){
|
|
(new Chart(node)).
|
|
addPlot("default", {
|
|
type: "Markers", shadow: {dx: 1, dy: 1, width: 2, color: [0, 0, 0, 0.3]}
|
|
}).
|
|
addSeries("Series A",
|
|
[ 1, 2, 1, 2, 1, 2, 1 ],
|
|
{
|
|
min: 0,
|
|
max: 3,
|
|
stroke: {color: "red", width: 2, join: "round"},
|
|
fill: "red",
|
|
marker: "m-3,0 c0,-4 6,-4 6,0 m-6,0 c0,4 6,4 6,0"
|
|
}
|
|
).
|
|
addSeries("Series B",
|
|
[ 2, 1, 2, 1, 2, 1, 2 ],
|
|
{
|
|
stroke: {color: "blue", width: 2, join: "round"},
|
|
fill: "blue",
|
|
marker: "m-3,-3 l0,6 6,0 0,-6 z"
|
|
}
|
|
).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Stacked lines, markers, shadows, no axes, custom strokes, fills, and markers.",
|
|
makeChart: function(node){
|
|
(new Chart(node)).
|
|
addPlot("default", {
|
|
type: "StackedLines",
|
|
markers: true,
|
|
tension:"S",
|
|
shadow: {dx: 1, dy: 1, width: 2, color: [0, 0, 0, 0.3]}
|
|
}).
|
|
addSeries("Series A",
|
|
[ 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6 ],
|
|
{
|
|
stroke: { color: "red", width: 2 },
|
|
fill: "lightpink",
|
|
marker: "m-3,-3 l0,6 6,0 0,-6 z"
|
|
}
|
|
).
|
|
addSeries("Series B",
|
|
[ 1, 1.6, 1.3, 1.4, 1.1, 1.5, 1.1 ],
|
|
{
|
|
stroke: { color: "blue", width: 2 },
|
|
fill: "lightblue",
|
|
marker: "m-3,0 c0,-4 6,-4 6,0 m-6,0 c0,4 6,4 6,0"
|
|
}
|
|
).
|
|
addSeries("Series C",
|
|
[ 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6 ],
|
|
{
|
|
stroke: { color: "green", width: 2 },
|
|
fill: "lightgreen",
|
|
marker: "m0,-3 l3,3 -3,3 -3,-3 z"
|
|
}
|
|
).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Stacked areas, axes (aligned on major ticks), custom strokes and fills.",
|
|
makeChart: function(node){
|
|
(new Chart(node)).
|
|
addAxis("x", {fixLower: "major", fixUpper: "major"}).
|
|
addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", min: 0}).
|
|
addPlot("default", { type: "StackedAreas", tension:"S" }).
|
|
addSeries("Series A",
|
|
[ -2, 1.1, 1.2, 1.3, 1.4, 1.5, -1.6 ],
|
|
{ stroke: {color: "red", width: 2}, fill: "lightpink" }
|
|
).
|
|
addSeries("Series B",
|
|
[ 1, 1.6, 1.3, 1.4, 1.1, 1.5, 1.1 ],
|
|
{ stroke: {color: "blue", width: 2}, fill: "lightblue" }
|
|
).
|
|
addSeries("Series C",
|
|
[ 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6 ],
|
|
{ stroke: {color: "green", width: 2}, fill: "lightgreen" }
|
|
).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Candlesticks with gaps, custom strokes and fills, optional mid points.",
|
|
makeChart: function(node){
|
|
(new Chart(node)).
|
|
addPlot("default", {type: "Candlesticks", gap: 1}).
|
|
addAxis("x", {fixLower: "major", fixUpper: "major", includeZero: true}).
|
|
addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", natural: true}).
|
|
addSeries("Series A", [
|
|
{ open: 20, close: 16, high: 22, low: 8 },
|
|
{ open: 16, close: 22, high: 26, low: 6, mid: 18 },
|
|
{ open: 22, close: 18, high: 22, low: 11, mid: 21 },
|
|
{ open: 18, close: 29, high: 32, low: 14, mid: 27 },
|
|
{ open: 29, close: 24, high: 29, low: 13, mid: 27 },
|
|
{ open: 24, close: 8, high: 24, low: 5 },
|
|
{ open: 8, close: 16, high: 22, low: 2 },
|
|
{ open: 16, close: 12, high: 19, low: 7 },
|
|
{ open: 12, close: 20, high: 22, low: 8 },
|
|
{ open: 20, close: 16, high: 22, low: 8 },
|
|
{ open: 16, close: 22, high: 26, low: 6, mid: 18 },
|
|
{ open: 22, close: 18, high: 22, low: 11, mid: 21 },
|
|
{ open: 18, close: 29, high: 32, low: 14, mid: 27 },
|
|
{ open: 29, close: 24, high: 29, low: 13, mid: 27 },
|
|
{ open: 24, close: 8, high: 24, low: 5 },
|
|
{ open: 8, close: 16, high: 22, low: 2 },
|
|
{ open: 16, close: 12, high: 19, low: 7 },
|
|
{ open: 12, close: 20, high: 22, low: 8 },
|
|
{ open: 20, close: 16, high: 22, low: 8 },
|
|
{ open: 16, close: 22, high: 26, low: 6 },
|
|
{ open: 22, close: 18, high: 22, low: 11 },
|
|
{ open: 18, close: 29, high: 32, low: 14 },
|
|
{ open: 29, close: 24, high: 29, low: 13 },
|
|
{ open: 24, close: 8, high: 24, low: 5 },
|
|
{ open: 8, close: 16, high: 22, low: 2 },
|
|
{ open: 16, close: 12, high: 19, low: 7 },
|
|
{ open: 12, close: 20, high: 22, low: 8 },
|
|
{ open: 20, close: 16, high: 22, low: 8 }
|
|
],
|
|
{ stroke: { color: "green" }, fill: "lightgreen" }
|
|
).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Open/High/Low/Close with gaps, custom strokes and fills.",
|
|
makeChart: function(node){
|
|
(new Chart(node)).
|
|
addPlot("default", {type: "OHLC", gap: 2}).
|
|
addAxis("x", {fixLower: "major", fixUpper: "major", includeZero: true}).
|
|
addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", natural: true}).
|
|
addSeries("Series A", [
|
|
{ open: 20, close: 16, high: 22, low: 8 },
|
|
{ open: 16, close: 22, high: 26, low: 6 },
|
|
{ open: 22, close: 18, high: 22, low: 11 },
|
|
{ open: 18, close: 29, high: 32, low: 14 },
|
|
{ open: 29, close: 24, high: 29, low: 13 },
|
|
{ open: 24, close: 8, high: 24, low: 5 },
|
|
{ open: 8, close: 16, high: 22, low: 2 },
|
|
{ open: 16, close: 12, high: 19, low: 7 },
|
|
{ open: 12, close: 20, high: 22, low: 8 },
|
|
{ open: 20, close: 16, high: 22, low: 8 },
|
|
{ open: 16, close: 22, high: 26, low: 6 },
|
|
{ open: 22, close: 18, high: 22, low: 11 },
|
|
{ open: 18, close: 29, high: 32, low: 14 },
|
|
{ open: 29, close: 24, high: 29, low: 13 },
|
|
{ open: 24, close: 8, high: 24, low: 5 },
|
|
{ open: 8, close: 16, high: 22, low: 2 },
|
|
{ open: 16, close: 12, high: 19, low: 7 },
|
|
{ open: 12, close: 20, high: 22, low: 8 },
|
|
{ open: 20, close: 16, high: 22, low: 8 },
|
|
{ open: 16, close: 22, high: 26, low: 6 },
|
|
{ open: 22, close: 18, high: 22, low: 11 },
|
|
{ open: 18, close: 29, high: 32, low: 14 },
|
|
{ open: 29, close: 24, high: 29, low: 13 },
|
|
{ open: 24, close: 8, high: 24, low: 5 },
|
|
{ open: 8, close: 16, high: 22, low: 2 },
|
|
{ open: 16, close: 12, high: 19, low: 7 },
|
|
{ open: 12, close: 20, high: 22, low: 8 },
|
|
{ open: 20, close: 16, high: 22, low: 8 }
|
|
],
|
|
{ stroke: { color: "blue" }, fill: "blue" }
|
|
).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Columns, no axes, custom strokes and fills.",
|
|
makeChart: function(node){
|
|
(new Chart(node)).
|
|
addPlot("default", {type: "Columns"}).
|
|
addSeries("Series A", [ 1, 2, 3, 4, 5 ], { stroke: { color: "red" }, fill: "lightpink" }).
|
|
addSeries("Series B", [ 5, 4, 3, 2, 1 ], { stroke: {color: "blue"}, fill: "lightblue" }).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Columns with gaps beetwen them, vertical axis aligned on major ticks, custom strokes, fills.",
|
|
makeChart: function(node){
|
|
(new Chart(node)).
|
|
addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major"}).
|
|
addPlot("default", {type: "Columns", gap: 2}).
|
|
addSeries("Series A", [ 1, 2, 3, 4, 5 ], { stroke: {color: "red"}, fill: "lightpink" }).
|
|
addSeries("Series B", [ 5, 4, 3, 2, 1 ], { stroke: {color: "blue"}, fill: "lightblue" }).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Stacked columns, no axes, custom strokes and fills.",
|
|
makeChart: function(node){
|
|
(new Chart(node)).
|
|
addPlot("default", {type: "StackedColumns"}).
|
|
addSeries("Series A", [ 1, 2, 3, 4, 5 ], {stroke: { color: "red" }, fill: "lightpink" }).
|
|
addSeries("Series B", [ 2, 1, 2, 1, 2 ], {stroke: { color: "blue" }, fill: "lightblue" }).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Bars, axes aligned on major ticks, no minor ticks, custom strokes and fills.",
|
|
makeChart: function(node){
|
|
(new Chart(node)).
|
|
addAxis("x", {fixLower: "major", fixUpper: "major", includeZero: true}).
|
|
addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", natural: true}).
|
|
addPlot("default", {type: "Bars"}).
|
|
addSeries("Series A",
|
|
[1, 2, 3, 4, 5],
|
|
{ stroke: {color: "red"}, fill: "lightpink" }
|
|
).
|
|
addSeries("Series B",
|
|
[5, 4, 3, 2, 1],
|
|
{ stroke: {color: "blue"}, fill: "lightblue" }
|
|
).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Stacked bars, no axes, custom strokes and fills.",
|
|
makeChart: function(node){
|
|
(new Chart(node)).
|
|
addPlot("default", {type: "StackedBars"}).
|
|
addSeries("Series A", [ 1, 2, 3, 4, 5 ], { stroke: { color: "red" }, fill: "lightpink" }).
|
|
addSeries("Series B", [ 2, 1, 2, 1, 2 ], { stroke: { color: "blue" }, fill: "lightblue" }).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Clustered columns, custom axes, custom strokes, fills, and gap.",
|
|
makeChart: function(node){
|
|
(new Chart(node)).
|
|
addAxis("x", {
|
|
fixLower: "minor", fixUpper: "minor", natural: true
|
|
}).
|
|
addAxis("y", {
|
|
vertical: true, fixLower: "major", fixUpper: "major", includeZero: true
|
|
}).
|
|
addPlot("default", {type: "ClusteredColumns", gap: 10}).
|
|
addSeries("Series A",
|
|
[ 1, 2, 3, 4, 5 ],
|
|
{ stroke: {color: "red"}, fill: "lightpink" }
|
|
).
|
|
addSeries("Series B", [5, 4, 3, 2, 1], {stroke: {color: "blue"}, fill: "lightblue"}).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Clustered bars, custom axes, custom strokes, fills, and gap.",
|
|
makeChart: function(node){
|
|
(new Chart(node)).
|
|
addAxis("x", {fixLower: "major", fixUpper: "major", includeZero: true}).
|
|
addAxis("y", {vertical: true, fixLower: "minor", fixUpper: "minor", natural: true}).
|
|
addPlot("default", { type: "ClusteredBars", gap: 5 }).
|
|
addSeries("Series A", [ 1, 2, 3, 4, 5 ], { stroke: { color: "red" }, fill: "lightpink" }).
|
|
addSeries("Series B", [ 2, 1, 2, 1, 2 ], { stroke: { color: "blue" }, fill: "lightblue" }).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Columns with gaps beetwen them, grids, custom strokes, fills, axes.",
|
|
makeChart: function(node){
|
|
(new Chart(node)).
|
|
addAxis("x", { fixLower: "minor", fixUpper: "minor", natural: true }).
|
|
addAxis("y", {
|
|
vertical: true,
|
|
fixLower: "major",
|
|
fixUpper: "major",
|
|
minorTicks: false,
|
|
includeZero: true
|
|
}).
|
|
addPlot("front_grid", { type: "Grid", hMajorLines: true, vMajorLines: false }).
|
|
addPlot("default", { type: "Columns", gap: 10 }).
|
|
addPlot("back_grid", { type: "Grid", hMajorLines: false, vMajorLines: true }).
|
|
addSeries("Series A",
|
|
[ 1, 2, 3, 4, 5 ],
|
|
{ stroke: { color: "red" }, fill: "lightpink" }
|
|
).
|
|
addSeries("Series B",
|
|
[ 5, 4, 3, 2, 1 ],
|
|
{ stroke: { color: "blue" }, fill: "lightblue" }
|
|
).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Columns with gaps beetwen them, grids, custom strokes, fills, axes, with min=0, max=8, and manually specified ticks on the vertical axis.",
|
|
makeChart: function(node){
|
|
(new Chart(node)).
|
|
addAxis("x", {fixLower: "minor", fixUpper: "minor", natural: true}).
|
|
addAxis("y", {
|
|
vertical: true, fixLower: "major", fixUpper: "major",
|
|
includeZero: true, min: 0, max: 8, minorLabels: false,
|
|
majorTicks: true, minorTicks: true, microTicks: false,
|
|
majorTickStep: 2, minorTickStep: 1, microTickStep: 0.5
|
|
}).
|
|
addPlot("front_grid", {
|
|
type: "Grid", hMajorLines: true, vMajorLines: false
|
|
}).
|
|
addPlot("default", {type: "Columns", gap: 10}).
|
|
addPlot("back_grid", {
|
|
type: "Grid", hMajorLines: false, vMajorLines: true
|
|
}).
|
|
addSeries("Series A",
|
|
[ 1, 2, 3, 4, 5 ],
|
|
{ stroke: {color: "red"}, fill: "lightpink" }
|
|
).
|
|
addSeries("Series B",
|
|
[ 5, 4, 3, 2, 1 ],
|
|
{ stroke: {color: "blue"}, fill: "lightblue" }
|
|
).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Columns with positive and negative values, axes, and grid.",
|
|
makeChart: function(node){
|
|
(new Chart(node)).
|
|
addAxis("x").
|
|
addAxis("y", { vertical: true }).
|
|
addPlot("default", { type: "Columns", gap: 10 }).
|
|
addPlot("grid", { type: "Grid" }).
|
|
addSeries("Series A",
|
|
[ 2, 1, 0.5, -1, -2 ],
|
|
{ stroke: {color: "red"}, fill: "lightpink" }
|
|
).
|
|
addSeries("Series B",
|
|
[ -2, -1, -0.5, 1, 2 ],
|
|
{ stroke: {color: "blue"}, fill: "lightblue" }
|
|
).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Clustered columns with positive and negative values, axes, and grid.",
|
|
makeChart: function(node){
|
|
(new Chart(node)).
|
|
addAxis("x").
|
|
addAxis("y", { vertical: true }).
|
|
addPlot("default", { type: "ClusteredColumns", gap: 10 }).
|
|
addPlot("grid", { type: "Grid" }).
|
|
addSeries("Series A",
|
|
[ 2, 1, 0.5, -1, -2 ],
|
|
{ stroke: {color: "red"}, fill: "lightpink" }
|
|
).
|
|
addSeries("Series B",
|
|
[ -2, -1, -0.5, 1, 2 ],
|
|
{ stroke: {color: "blue"}, fill: "lightblue" }
|
|
).
|
|
addSeries("Series C",
|
|
[ 1, 0.5, -1, -2, -3 ],
|
|
{ stroke: {color: "green"}, fill: "lightgreen" }
|
|
).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Bars with positive and negative values, axes, and grid.",
|
|
makeChart: function(node){
|
|
(new Chart(node)).
|
|
addAxis("x").
|
|
addAxis("y", { vertical: true }).
|
|
addPlot("default", { type: "Bars", gap: 10 }).
|
|
addPlot("grid", { type: "Grid" }).
|
|
addSeries("Series A",
|
|
[ 2, 1, 0.5, -1, -2 ],
|
|
{ stroke: {color: "red"}, fill: "lightpink" }
|
|
).
|
|
addSeries("Series B",
|
|
[ -2, -1, -0.5, 1, 2 ],
|
|
{ stroke: {color: "blue"}, fill: "lightblue" }
|
|
).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Clustered bars with positive and negative values, axes, and grid.",
|
|
makeChart: function(node){
|
|
(new Chart(node)).
|
|
addAxis("x").
|
|
addAxis("y", { vertical: true }).
|
|
addPlot("default", { type: "ClusteredBars", gap: 10 }).
|
|
addPlot("grid", { type: "Grid" }).
|
|
addSeries("Series A",
|
|
[ 2, 1, 0.5, -1, -2 ],
|
|
{ stroke: { color: "red" }, fill: "lightpink" }
|
|
).
|
|
addSeries("Series B",
|
|
[ -2, -1, -0.5, 1, 2 ],
|
|
{ stroke: { color: "blue" }, fill: "lightblue" }
|
|
).
|
|
addSeries("Series C",
|
|
[ 1, 0.5, -1, -2, -3 ],
|
|
{ stroke: { color: "green" }, fill: "lightgreen" }
|
|
).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Default lines with 2D data, custom axis, red theme.",
|
|
makeChart: function(node){
|
|
(new Chart(node)).
|
|
setTheme(Minty).
|
|
addAxis("x", {
|
|
min: 0,
|
|
max: 6,
|
|
majorTick: { stroke: "black", length: 3 },
|
|
minorTick: { stroke: "gray", length: 3 }
|
|
}).
|
|
addAxis("y", {
|
|
vertical: true,
|
|
min: 0,
|
|
max: 10,
|
|
majorTick: { stroke: "black", length: 3 },
|
|
minorTick: { stroke: "gray", length: 3 }
|
|
}).
|
|
addSeries("Series A", [
|
|
{ x: 0.5, y: 5 },
|
|
{ x: 1.5, y: 1.5 },
|
|
{ x: 2, y: 9 },
|
|
{ x: 5, y: 0.3 }
|
|
]).
|
|
addSeries("Series B", [
|
|
{ x: 0.3, y: 8 },
|
|
{ x: 4, y: 6 },
|
|
{ x: 5.5, y: 2 }
|
|
]).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Scatter chart, custom axis, purple theme.",
|
|
makeChart: function(node){
|
|
(new Chart(node)).
|
|
setTheme(dojox.charting.themes.Ireland).
|
|
addPlot("default", {type: "Scatter"}).
|
|
addAxis("x", {
|
|
min: 0,
|
|
max: 6,
|
|
majorTick: { stroke: "black", length: 3 },
|
|
minorTick: { stroke: "gray", length: 3 }
|
|
}).
|
|
addAxis("y", {
|
|
vertical: true,
|
|
min: 0,
|
|
max: 10,
|
|
majorTick: { stroke: "black", length: 3 },
|
|
minorTick: { stroke: "gray", length: 3 }
|
|
}).
|
|
addSeries("Series A", [
|
|
{ x: 0.5, y: 5 },
|
|
{ x: 1.5, y: 1.5 },
|
|
{ x: 2, y: 9 },
|
|
{ x: 5, y: 0.3 }
|
|
]).
|
|
addSeries("Series B", [
|
|
{ x: 0.3, y: 8 },
|
|
{ x: 4, y: 6 },
|
|
{ x: 5.5, y: 2 }
|
|
]).
|
|
render();
|
|
}
|
|
},
|
|
{
|
|
description: "Markers, lines, 2D data, custom axis, blue theme.",
|
|
makeChart: function(node){
|
|
(new Chart(node)).
|
|
setTheme(dojox.charting.themes.PlotKit.blue).
|
|
addPlot("default", {
|
|
type: "Default",
|
|
lines: true,
|
|
markers: true,
|
|
tension: 2
|
|
}).
|
|
addAxis("x", {
|
|
min: 0,
|
|
max: 6,
|
|
majorTick: { stroke: "black", length: 3 },
|
|
minorTick: { stroke: "gray", length: 3 }
|
|
}).
|
|
addAxis("y", {
|
|
vertical: true,
|
|
min: 0,
|
|
max: 10,
|
|
majorTick: { stroke: "black", length: 3 },
|
|
minorTick: { stroke: "gray", length: 3 }
|
|
}).
|
|
addSeries("Series A", [
|
|
{ x: 0.5, y: 5 },
|
|
{ x: 1.5, y: 1.5 },
|
|
{ x: 2, y: 9 },
|
|
{ x: 5, y: 0.3 }
|
|
]).
|
|
addSeries("Series B", [
|
|
{ x: 0.3, y: 8 },
|
|
{ x: 4, y: 6 },
|
|
{ x: 5.5, y: 2 }
|
|
]).
|
|
render();
|
|
}
|
|
}
|
|
];
|
|
var now = function(){
|
|
return (new Date()).getTime();
|
|
};
|
|
|
|
|
|
ready(function(){
|
|
var defaultStyle = { width: "400px", height: "200px" };
|
|
var tmpl = new dtl.Template(dom.byId("template").value);
|
|
var context = new Context({ charts: charts });
|
|
dom.byId("charts").innerHTML = tmpl.render(context);
|
|
|
|
arr.forEach(charts, function(item, idx){
|
|
var start = now();
|
|
var n = dom.byId("chart_"+idx);
|
|
domStyle.set(n, item.style||defaultStyle);
|
|
item.makeChart(n);
|
|
console.debug((now()-start), "ms to create:", (idx+1)+":", item.description);
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<textarea id="template" style="display: none;">
|
|
{% for item in charts %}
|
|
<p>{{ forloop.counter }}: {{ item.description }}</p>
|
|
<div id="chart_{{ forloop.counter0 }}"></div>
|
|
{% endfor %}
|
|
</textarea>
|
|
|
|
<h1>Chart 2D</h1>
|
|
|
|
<div id="charts"></div>
|
|
</body>
|
|
</html>
|