/trunk/api/js/dojo1.0/dojox/charting/tests/test_chart2d_updating.html |
---|
New file |
0,0 → 1,80 |
<html> |
<head> |
<title>Chart 2D</title> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
<style type="text/css"> |
@import "../../../dojo/resources/dojo.css"; |
@import "../../../dijit/tests/css/dijitTests.css"; |
</style> |
<!-- |
The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend |
<script type="text/javascript" src="Silverlight.js"></script> |
--> |
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> |
<script type="text/javascript" src="../../lang/functional.js"></script> |
<script type="text/javascript" src="../Theme.js"></script> |
<script type="text/javascript" src="../scaler.js"></script> |
<script type="text/javascript" src="../Chart2D.js"></script> |
<script type="text/javascript"> |
dojo.require("dojox.charting.Chart2D"); |
dojo.require("dojox.charting.themes.PlotKit.orange"); |
var chart, limit = 10, magnitude = 30; |
var randomValue = function(){ |
return Math.random() * magnitude; |
}; |
var makeSeries = function(len){ |
var s = []; |
do{ |
s.push(randomValue()); |
}while(s.length < len); |
return s; |
}; |
var seriesA = makeSeries(limit), |
seriesB = makeSeries(limit), |
seriesC = makeSeries(limit); |
var makeObjects = function(){ |
chart = new dojox.charting.Chart2D("test"); |
chart.setTheme(dojox.charting.themes.PlotKit.orange); |
chart.addAxis("x", {fixLower: "minor", natural: true, min: 1, max: limit}); |
chart.addAxis("y", {vertical: true, min: 0, max: 30, majorTickStep: 5, minorTickStep: 1}); |
chart.addPlot("default", {type: "Areas"}); |
chart.addSeries("Series A", seriesA); |
chart.addSeries("Series B", seriesB); |
chart.addSeries("Series C", seriesC); |
chart.addPlot("grid", {type: "Grid", hMinorLines: true}); |
chart.render(); |
setInterval("updateTest()", 200); |
}; |
var updateTest = function(){ |
seriesA.shift(); |
seriesA.push(randomValue()); |
chart.updateSeries("Series A", seriesA); |
seriesB.shift(); |
seriesB.push(randomValue()); |
chart.updateSeries("Series B", seriesB); |
seriesC.shift(); |
seriesC.push(randomValue()); |
chart.updateSeries("Series C", seriesC); |
chart.render(); |
}; |
dojo.addOnLoad(makeObjects); |
</script> |
</head> |
<body> |
<h1>Chart 2D Updating Data</h1> |
<p>Areas, orange theme, axes, grid. Very crude example to show a chart with updating values.</p> |
<div id="test" style="width: 400px; height: 400px;"></div> |
</body> |
</html> |
/trunk/api/js/dojo1.0/dojox/charting/tests/test_pie2d.html |
---|
New file |
0,0 → 1,94 |
<html> |
<head> |
<title>Pie 2D</title> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
<style type="text/css"> |
@import "../../../dojo/resources/dojo.css"; |
@import "../../../dijit/tests/css/dijitTests.css"; |
</style> |
<!-- |
The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend |
<script type="text/javascript" src="Silverlight.js"></script> |
--> |
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> |
<script type="text/javascript" src="../../lang/functional.js"></script> |
<script type="text/javascript" src="../../lang/utils.js"></script> |
<script type="text/javascript" src="../Theme.js"></script> |
<script type="text/javascript" src="../scaler.js"></script> |
<script type="text/javascript" src="../Element.js"></script> |
<script type="text/javascript" src="../plot2d/Pie.js"></script> |
<script type="text/javascript" src="../Chart2D.js"></script> |
<script type="text/javascript"> |
dojo.require("dojox.charting.Chart2D"); |
dojo.require("dojox.charting.themes.PlotKit.blue"); |
dojo.require("dojox.charting.themes.PlotKit.green"); |
makeObjects = function(){ |
var chart1 = new dojox.charting.Chart2D("test1"); |
chart1.setTheme(dojox.charting.themes.PlotKit.blue); |
chart1.addPlot("default", { |
type: "Pie", |
font: "normal normal bold 12pt Tahoma", |
fontColor: "white", |
labelOffset: 40 |
}); |
chart1.addSeries("Series A", [4, 2, 1, 1]); |
chart1.render(); |
var chart2 = new dojox.charting.Chart2D("test2"); |
chart2.setTheme(dojox.charting.themes.PlotKit.blue); |
chart2.addPlot("default", { |
type: "Pie", |
font: "normal normal bold 12pt Tahoma", |
fontColor: "black", |
labelOffset: -25, |
precision: 0 |
}); |
chart2.addSeries("Series A", [4, 2, 1, 1]); |
chart2.render(); |
var chart3 = new dojox.charting.Chart2D("test3"); |
chart3.setTheme(dojox.charting.themes.PlotKit.green); |
chart3.addPlot("default", { |
type: "Pie", |
font: "normal normal bold 10pt Tahoma", |
fontColor: "white", |
labelOffset: 25, |
radius: 90 |
}); |
chart3.addSeries("Series A", [4, 2, 1, 1]); |
chart3.render(); |
var chart4 = new dojox.charting.Chart2D("test4"); |
chart4.setTheme(dojox.charting.themes.PlotKit.green); |
chart4.addPlot("default", { |
type: "Pie", |
font: "normal normal bold 10pt Tahoma", |
fontColor: "black", |
labelOffset: -25, |
radius: 90 |
}); |
chart4.addSeries("Series A", [4, 2, 1, 1]); |
chart4.render(); |
}; |
dojo.addOnLoad(makeObjects); |
</script> |
</head> |
<body> |
<h1>Pie 2D</h1> |
<!--<p><button onclick="makeObjects();">Go</button></p>--> |
<p>1: Pie with internal labels.</p> |
<div id="test1" style="width: 400px; height: 400px;"></div> |
<p>2: Pie with external labels and precision=0.</p> |
<div id="test2" style="width: 400px; height: 400px;"></div> |
<p>3/4: Two pies with internal and external labels with a constant radius.</p> |
<table border="1"><tr> |
<td><div id="test3" style="width: 300px; height: 300px;"></div></td> |
<td><div id="test4" style="width: 300px; height: 300px;"></div></td> |
</tr></table> |
<p>That's all Folks!</p> |
</body> |
</html> |
/trunk/api/js/dojo1.0/dojox/charting/tests/_color.js |
---|
New file |
0,0 → 1,82 |
if(!dojo._hasResource["dojox.charting.tests._color"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. |
dojo._hasResource["dojox.charting.tests._color"] = true; |
dojo.provide("dojox.charting.tests._color"); |
dojo.require("dojox.charting._color"); |
/* |
Note that there are some minor inaccuracies that |
can be introduced for comparison purposes; the |
formulae used in Photoshop may produce *slightly* |
different numbers. But numbers will be off by |
1, if at all. |
*/ |
(function(){ |
var dxc=dojox.charting; |
var rgb=[ |
{ r:0x4f, g:0xc8, b:0xd6 }, |
{ r:0x40, g:0x9e, b:0x02 }, |
{ r:0xff, g:0xfb, b:0x85 }, |
{ r:0x7b, g:0x5a, b:0x7d } |
]; |
var hsb=[ |
{ h:186, s:63, b: 84 }, |
{ h: 96, s:99, b: 62 }, |
{ h: 58, s:48, b:100 }, |
{ h:297, s:28, b: 49 } |
]; |
tests.register("dojox.charting.tests._util", [ |
function testToHsb(t){ |
var c=rgb[0]; |
var oHsb=dxc._color.toHsb(c.r, c.g, c.b); |
t.assertEqual(hsb[0].h, oHsb.h); |
t.assertEqual(hsb[0].s, oHsb.s); |
t.assertEqual(hsb[0].b, oHsb.b); |
var c=rgb[1]; |
var oHsb=dxc._color.toHsb(c.r, c.g, c.b); |
t.assertEqual(hsb[1].h, oHsb.h); |
t.assertEqual(hsb[1].s, oHsb.s); |
t.assertEqual(hsb[1].b, oHsb.b); |
var c=rgb[2]; |
var oHsb=dxc._color.toHsb(c.r, c.g, c.b); |
t.assertEqual(hsb[2].h, oHsb.h); |
t.assertEqual(hsb[2].s, oHsb.s); |
t.assertEqual(hsb[2].b, oHsb.b); |
var c=rgb[3]; |
var oHsb=dxc._color.toHsb(c.r, c.g, c.b); |
t.assertEqual(hsb[3].h, oHsb.h); |
t.assertEqual(hsb[3].s, oHsb.s); |
t.assertEqual(hsb[3].b, oHsb.b); |
}, |
function testFromHsb(t){ |
var c1=dxc._color.fromHsb(hsb[0].h, hsb[0].s, hsb[0].b); |
var c2=rgb[0]; |
t.assertEqual(c1.r, c2.r); |
t.assertEqual(c1.g, c2.g); |
t.assertEqual(c1.b, c2.b); |
var c1=dxc._color.fromHsb(hsb[1].h, hsb[1].s, hsb[1].b); |
var c2=rgb[1]; |
t.assertEqual(c1.r, c2.r); |
t.assertEqual(c1.g, c2.g); |
t.assertEqual(c1.b, c2.b); |
var c1=dxc._color.fromHsb(hsb[2].h, hsb[2].s, hsb[2].b); |
var c2=rgb[2]; |
t.assertEqual(c1.r, c2.r); |
t.assertEqual(c1.g, c2.g); |
t.assertEqual(c1.b, c2.b); |
var c1=dxc._color.fromHsb(hsb[3].h, hsb[3].s, hsb[3].b); |
var c2=rgb[3]; |
t.assertEqual(c1.r, c2.r); |
t.assertEqual(c1.g, c2.g); |
t.assertEqual(c1.b, c2.b); |
} |
]); |
})(); |
} |
/trunk/api/js/dojo1.0/dojox/charting/tests/test_bars.html |
---|
New file |
0,0 → 1,65 |
<html> |
<head> |
<title>Bar chart</title> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
<style type="text/css"> |
@import "../../../dojo/resources/dojo.css"; |
@import "../../../dijit/tests/css/dijitTests.css"; |
</style> |
<!-- |
The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend |
<script type="text/javascript" src="Silverlight.js"></script> |
--> |
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> |
<script type="text/javascript" src="../Chart3D.js"></script> |
<script type="text/javascript" src="../plot3d/Base.js"></script> |
<script type="text/javascript" src="../plot3d/Bars.js"></script> |
<script type="text/javascript"> |
dojo.require("dojox.charting.Chart3D"); |
dojo.require("dojox.charting.plot3d.Bars"); |
makeObjects = function(){ |
var m = dojox.gfx3d.matrix; |
var chart = new dojox.charting.Chart3D("test", |
{ |
lights: [{direction: {x: 5, y: 5, z: -5}, color: "white"}], |
ambient: {color:"white", intensity: 2}, |
specular: "white" |
}, |
[m.cameraRotateXg(10), m.cameraRotateYg(-10), m.scale(0.8), m.cameraTranslate(-50, -50, 0)] |
); |
var plot1 = new dojox.charting.plot3d.Bars(500, 500, {gap: 10, material: "yellow"}); |
plot1.setData([1,2,3,2,1,2,3,4,5]); |
chart.addPlot(plot1); |
var plot2 = new dojox.charting.plot3d.Bars(500, 500, {gap: 10, material: "red"}); |
plot2.setData([2,3,4,3,2,3,4,5,5]); |
chart.addPlot(plot2); |
var plot3 = new dojox.charting.plot3d.Bars(500, 500, {gap: 10, material: "blue"}); |
plot3.setData([3,4,5,4,3,4,5,5,5]); |
chart.addPlot(plot3); |
chart.generate().render(); |
//dojo.byId("out1").value = dojo.byId("test").innerHTML; |
//dojo.byId("out2").value = dojox.gfx.utils.toJson(surface, true); |
}; |
dojo.addOnLoad(makeObjects); |
</script> |
</head> |
<body> |
<h1>Bar chart</h1> |
<div id="test" style="width: 500px; height: 500px;"></div> |
<!-- |
<p><button onclick="makeObjects();">Go</button></p> |
<p><textarea id="out1" cols="40" rows="5"></textarea></p> |
<p><textarea id="out2" cols="40" rows="5"></textarea></p> |
--> |
<p>That's all Folks!</p> |
</body> |
</html> |
/trunk/api/js/dojo1.0/dojox/charting/tests/test_chart2d.html |
---|
New file |
0,0 → 1,338 |
<html> |
<head> |
<title>Chart 2D</title> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
<style type="text/css"> |
@import "../../../dojo/resources/dojo.css"; |
@import "../../../dijit/tests/css/dijitTests.css"; |
</style> |
<!-- |
The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend |
<script type="text/javascript" src="Silverlight.js"></script> |
--> |
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> |
<script type="text/javascript" src="../../lang/functional.js"></script> |
<script type="text/javascript" src="../../lang/utils.js"></script> |
<script type="text/javascript" src="../Theme.js"></script> |
<script type="text/javascript" src="../scaler.js"></script> |
<script type="text/javascript" src="../Element.js"></script> |
<script type="text/javascript" src="../axis2d/common.js"></script> |
<script type="text/javascript" src="../axis2d/Base.js"></script> |
<script type="text/javascript" src="../axis2d/Default.js"></script> |
<script type="text/javascript" src="../plot2d/common.js"></script> |
<script type="text/javascript" src="../plot2d/Base.js"></script> |
<script type="text/javascript" src="../plot2d/Default.js"></script> |
<script type="text/javascript" src="../plot2d/Lines.js"></script> |
<script type="text/javascript" src="../plot2d/Areas.js"></script> |
<script type="text/javascript" src="../plot2d/Markers.js"></script> |
<script type="text/javascript" src="../plot2d/MarkersOnly.js"></script> |
<script type="text/javascript" src="../plot2d/Scatter.js"></script> |
<script type="text/javascript" src="../plot2d/Stacked.js"></script> |
<script type="text/javascript" src="../plot2d/StackedLines.js"></script> |
<script type="text/javascript" src="../plot2d/StackedAreas.js"></script> |
<script type="text/javascript" src="../plot2d/Columns.js"></script> |
<script type="text/javascript" src="../plot2d/StackedColumns.js"></script> |
<script type="text/javascript" src="../plot2d/ClusteredColumns.js"></script> |
<script type="text/javascript" src="../plot2d/Bars.js"></script> |
<script type="text/javascript" src="../plot2d/StackedBars.js"></script> |
<script type="text/javascript" src="../plot2d/ClusteredBars.js"></script> |
<script type="text/javascript" src="../plot2d/Grid.js"></script> |
<script type="text/javascript" src="../plot2d/Pie.js"></script> |
<script type="text/javascript" src="../Chart2D.js"></script> |
<script type="text/javascript"> |
dojo.require("dojox.charting.Chart2D"); |
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"); |
makeObjects = function(){ |
var chart1 = new dojox.charting.Chart2D("test1"); |
chart1.addSeries("Series A", [1, 2, 1, 2, 1, 2, 1]); |
chart1.addSeries("Series B", [2, 1, 2, 1, 2, 1, 2]); |
chart1.render(); |
var chart2 = new dojox.charting.Chart2D("test2"); |
chart2.addSeries("Series A", [1, 2, 1, 2, 1, 2, 1], {stroke: "red"}); |
chart2.addSeries("Series B", [2, 1, 2, 1, 2, 1, 2], {stroke: "blue"}); |
chart2.render(); |
var chart3 = new dojox.charting.Chart2D("test3"); |
chart3.addPlot("default", {type: "Areas"}); |
chart3.setTheme(dojox.charting.themes.PlotKit.orange); |
chart3.addSeries("Series A", [1, 2, 0.5, 1.5, 1, 2.8, 0.4]); |
chart3.addSeries("Series B", [2.6, 1.8, 2, 1, 1.4, 0.7, 2]); |
chart3.addSeries("Series C", [6.3, 1.8, 3, 0.5, 4.4, 2.7, 2]); |
chart3.render(); |
var chart4 = new dojox.charting.Chart2D("test4"); |
chart4.addPlot("default", {type: "Areas"}); |
chart4.addSeries("Series A", [1, 2, 1, 2, 1, 2, 1], {stroke: {color: "red", width: 2}, fill: "lightpink"}); |
chart4.addSeries("Series B", [2, 1, 2, 1, 2, 1, 2], {stroke: {color: "blue", width: 2}, fill: "lightblue"}); |
chart4.render(); |
var chart5 = new dojox.charting.Chart2D("test5"); |
chart5.setTheme(dojox.charting.themes.PlotKit.blue); |
chart5.addAxis("x"); |
chart5.addAxis("y", {vertical: true}); |
chart5.addSeries("Series A", [1, 2, 1, 2, 1, 2, 1]); |
chart5.addSeries("Series B", [2, 1, 2, 1, 2, 1, 2]); |
chart5.render(); |
var chart6 = new dojox.charting.Chart2D("test6"); |
chart6.setTheme(dojox.charting.themes.PlotKit.cyan); |
chart6.addAxis("x", {fixLower: "minor", fixUpper: "minor"}); |
chart6.addAxis("y", {vertical: true, fixLower: "minor", fixUpper: "minor"}); |
chart6.addSeries("Series A", [1, 2, 1, 2, 1, 2, 1]); |
chart6.addSeries("Series B", [2, 1, 2, 1, 2, 1, 2]); |
chart6.render(); |
var chart7 = new dojox.charting.Chart2D("test7"); |
chart7.setTheme(dojox.charting.themes.PlotKit.green); |
chart7.addAxis("x", {fixLower: "major", fixUpper: "major"}); |
chart7.addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major"}); |
chart7.addSeries("Series A", [1, 2, 1, 2, 1, 2, 1]); |
chart7.addSeries("Series B", [2, 1, 2, 1, 2, 1, 2]); |
chart7.render(); |
var chart8 = new dojox.charting.Chart2D("test8"); |
chart8.setTheme(dojox.charting.themes.PlotKit.purple); |
chart8.addPlot("default", {type: "Markers"}); |
chart8.addSeries("Series A", [1, 2, 1, 2, 1, 2, 1], {min: 0, max: 3}); |
chart8.addSeries("Series B", [2, 1, 2, 1, 2, 1, 2]); |
chart8.render(); |
var chart9 = new dojox.charting.Chart2D("test9"); |
chart9.addPlot("default", {type: "MarkersOnly"}); |
chart9.addSeries("Series A", [1, 2, 1, 2, 1, 2, 1], {min: 0, max: 3, stroke: {color: "red", width: 2}, marker: "m-3,0 c0,-4 6,-4 6,0 m-6,0 c0,4 6,4 6,0"}); |
chart9.addSeries("Series B", [2, 1, 2, 1, 2, 1, 2], {stroke: {color: "blue", width: 2}, marker: "m-3,-3 l0,6 6,0 0,-6 z"}); |
chart9.render(); |
var chart10 = new dojox.charting.Chart2D("test10"); |
chart10.addPlot("default", {type: "Markers", shadows: {dx: 2, dy: 2, dw: 2}}); |
chart10.addSeries("Series A", [1, 2, 1, 2, 1, 2, 1], {min: 0, max: 3, stroke: {color: "red", width: 2, join: "round"}, marker: "m-3,0 c0,-4 6,-4 6,0 m-6,0 c0,4 6,4 6,0"}); |
chart10.addSeries("Series B", [2, 1, 2, 1, 2, 1, 2], {stroke: {color: "blue", width: 2, join: "round"}, marker: "m-3,-3 l0,6 6,0 0,-6 z"}); |
chart10.render(); |
var chart11 = new dojox.charting.Chart2D("test11"); |
chart11.addPlot("default", {type: "StackedLines", markers: true, shadows: {dx: 2, dy: 2, dw: 2}}); |
chart11.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"}); |
chart11.addSeries("Series B", [1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6], {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"}); |
chart11.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"}); |
chart11.render(); |
var chart12 = new dojox.charting.Chart2D("test12"); |
chart12.addAxis("x", {fixLower: "major", fixUpper: "major"}); |
chart12.addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major"}); |
chart12.addPlot("default", {type: "StackedAreas"}); |
chart12.addSeries("Series A", [1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6], {stroke: {color: "red", width: 2}, fill: "lightpink"}); |
chart12.addSeries("Series B", [1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6], {stroke: {color: "blue", width: 2}, fill: "lightblue"}); |
chart12.addSeries("Series C", [1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6], {stroke: {color: "green", width: 2}, fill: "lightgreen"}); |
chart12.render(); |
var chart13 = new dojox.charting.Chart2D("test13"); |
chart13.addPlot("default", {type: "Columns"}); |
chart13.addSeries("Series A", [1, 2, 3, 4, 5], {stroke: {color: "red"}, fill: "lightpink"}); |
chart13.addSeries("Series B", [5, 4, 3, 2, 1], {stroke: {color: "blue"}, fill: "lightblue"}); |
chart13.render(); |
var chart14 = new dojox.charting.Chart2D("test14"); |
chart14.addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major"}); |
chart14.addPlot("default", {type: "Columns", gap: 2}); |
chart14.addSeries("Series A", [1, 2, 3, 4, 5], {stroke: {color: "red"}, fill: "lightpink"}); |
chart14.addSeries("Series B", [5, 4, 3, 2, 1], {stroke: {color: "blue"}, fill: "lightblue"}); |
chart14.render(); |
var chart15 = new dojox.charting.Chart2D("test15"); |
chart15.addPlot("default", {type: "StackedColumns"}); |
chart15.addSeries("Series A", [1, 2, 3, 4, 5], {stroke: {color: "red"}, fill: "lightpink"}); |
chart15.addSeries("Series B", [2, 1, 2, 1, 2], {stroke: {color: "blue"}, fill: "lightblue"}); |
chart15.render(); |
var chart16 = new dojox.charting.Chart2D("test16"); |
chart16.addAxis("x", {fixLower: "major", fixUpper: "major", includeZero: true}); |
chart16.addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", natural: true}); |
chart16.addPlot("default", {type: "Bars"}); |
chart16.addSeries("Series A", [1, 2, 3, 4, 5], {stroke: {color: "red"}, fill: "lightpink"}); |
chart16.addSeries("Series B", [5, 4, 3, 2, 1], {stroke: {color: "blue"}, fill: "lightblue"}); |
chart16.render(); |
var chart17 = new dojox.charting.Chart2D("test17"); |
chart17.addPlot("default", {type: "StackedBars"}); |
chart17.addSeries("Series A", [1, 2, 3, 4, 5], {stroke: {color: "red"}, fill: "lightpink"}); |
chart17.addSeries("Series B", [2, 1, 2, 1, 2], {stroke: {color: "blue"}, fill: "lightblue"}); |
chart17.render(); |
var chart18 = new dojox.charting.Chart2D("test18"); |
chart18.addAxis("x", {fixLower: "minor", fixUpper: "minor", natural: true}); |
chart18.addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", includeZero: true}); |
chart18.addPlot("default", {type: "ClusteredColumns", gap: 2}); |
chart18.addSeries("Series A", [1, 2, 3, 4, 5], {stroke: {color: "red"}, fill: "lightpink"}); |
chart18.addSeries("Series B", [5, 4, 3, 2, 1], {stroke: {color: "blue"}, fill: "lightblue"}); |
chart18.render(); |
var chart19 = new dojox.charting.Chart2D("test19"); |
chart19.addAxis("x", {fixLower: "major", fixUpper: "major", includeZero: true}); |
chart19.addAxis("y", {vertical: true, fixLower: "minor", fixUpper: "minor", natural: true}); |
chart19.addPlot("default", {type: "ClusteredBars", gap: 2}); |
chart19.addSeries("Series A", [1, 2, 3, 4, 5], {stroke: {color: "red"}, fill: "lightpink"}); |
chart19.addSeries("Series B", [5, 4, 3, 2, 1], {stroke: {color: "blue"}, fill: "lightblue"}); |
chart19.render(); |
var chart20 = new dojox.charting.Chart2D("test20"); |
chart20.addAxis("x", {fixLower: "minor", fixUpper: "minor", natural: true}); |
chart20.addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", minorTicks: false, includeZero: true}); |
chart20.addPlot("front_grid", {type: "Grid", hMajorLines: true, vMajorLines: false}); |
chart20.addPlot("default", {type: "Columns", gap: 2}); |
chart20.addPlot("back_grid", {type: "Grid", hMajorLines: false, vMajorLines: true}); |
chart20.addSeries("Series A", [1, 2, 3, 4, 5], {stroke: {color: "red"}, fill: "lightpink"}); |
chart20.addSeries("Series B", [5, 4, 3, 2, 1], {stroke: {color: "blue"}, fill: "lightblue"}); |
chart20.render(); |
var chart21 = new dojox.charting.Chart2D("test21"); |
chart21.addAxis("x", {fixLower: "minor", fixUpper: "minor", natural: true}); |
chart21.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}); |
chart21.addPlot("front_grid", {type: "Grid", hMajorLines: true, vMajorLines: false}); |
chart21.addPlot("default", {type: "Columns", gap: 2}); |
chart21.addPlot("back_grid", {type: "Grid", hMajorLines: false, vMajorLines: true}); |
chart21.addSeries("Series A", [1, 2, 3, 4, 5], {stroke: {color: "red"}, fill: "lightpink"}); |
chart21.addSeries("Series B", [5, 4, 3, 2, 1], {stroke: {color: "blue"}, fill: "lightblue"}); |
chart21.render(); |
var chart22 = new dojox.charting.Chart2D("test22"); |
chart22.addAxis("x"); |
chart22.addAxis("y", {vertical: true}); |
chart22.addPlot("default", {type: "Columns", gap: 2}); |
chart22.addPlot("grid", {type: "Grid"}); |
chart22.addSeries("Series A", [2, 1, 0.5, -1, -2], {stroke: {color: "red"}, fill: "lightpink"}); |
chart22.addSeries("Series B", [-2, -1, -0.5, 1, 2], {stroke: {color: "blue"}, fill: "lightblue"}); |
chart22.render(); |
var chart23 = new dojox.charting.Chart2D("test23"); |
chart23.addAxis("x"); |
chart23.addAxis("y", {vertical: true}); |
chart23.addPlot("default", {type: "ClusteredColumns", gap: 2}); |
chart23.addPlot("grid", {type: "Grid"}); |
chart23.addSeries("Series A", [2, 1, 0.5, -1, -2], {stroke: {color: "red"}, fill: "lightpink"}); |
chart23.addSeries("Series B", [-2, -1, -0.5, 1, 2], {stroke: {color: "blue"}, fill: "lightblue"}); |
chart23.addSeries("Series C", [1, 0.5, -1, -2, -3], {stroke: {color: "green"}, fill: "lightgreen"}); |
chart23.render(); |
var chart24 = new dojox.charting.Chart2D("test24"); |
chart24.addAxis("x"); |
chart24.addAxis("y", {vertical: true}); |
chart24.addPlot("default", {type: "Bars", gap: 2}); |
chart24.addPlot("grid", {type: "Grid"}); |
chart24.addSeries("Series A", [2, 1, 0.5, -1, -2], {stroke: {color: "red"}, fill: "lightpink"}); |
chart24.addSeries("Series B", [-2, -1, -0.5, 1, 2], {stroke: {color: "blue"}, fill: "lightblue"}); |
chart24.render(); |
var chart25 = new dojox.charting.Chart2D("test25"); |
chart25.addAxis("x"); |
chart25.addAxis("y", {vertical: true}); |
chart25.addPlot("default", {type: "ClusteredBars", gap: 2}); |
chart25.addPlot("grid", {type: "Grid"}); |
chart25.addSeries("Series A", [2, 1, 0.5, -1, -2], {stroke: {color: "red"}, fill: "lightpink"}); |
chart25.addSeries("Series B", [-2, -1, -0.5, 1, 2], {stroke: {color: "blue"}, fill: "lightblue"}); |
chart25.addSeries("Series C", [1, 0.5, -1, -2, -3], {stroke: {color: "green"}, fill: "lightgreen"}); |
chart25.render(); |
var chart26 = new dojox.charting.Chart2D("test26"); |
chart26.setTheme(dojox.charting.themes.PlotKit.red); |
chart26.addAxis("x", {min: 0, max: 6, majorTick: {stroke: "black", length: 3}, minorTick: {stroke: "gray", length: 3}}); |
chart26.addAxis("y", {vertical: true, min: 0, max: 10, majorTick: {stroke: "black", length: 3}, minorTick: {stroke: "gray", length: 3}}); |
chart26.addSeries("Series A", [{x: 0.5, y: 5}, {x: 1.5, y: 1.5}, {x: 2, y: 9}, {x: 5, y: 0.3}]); |
chart26.addSeries("Series B", [{x: 0.3, y: 8}, {x: 4, y: 6}, {x: 5.5, y: 2}]); |
chart26.render(); |
var chart27 = new dojox.charting.Chart2D("test27"); |
chart27.setTheme(dojox.charting.themes.PlotKit.purple); |
chart27.addPlot("default", {type: "Scatter"}); |
chart27.addAxis("x", {min: 0, max: 6, majorTick: {stroke: "black", length: 3}, minorTick: {stroke: "gray", length: 3}}); |
chart27.addAxis("y", {vertical: true, min: 0, max: 10, majorTick: {stroke: "black", length: 3}, minorTick: {stroke: "gray", length: 3}}); |
chart27.addSeries("Series A", [{x: 0.5, y: 5}, {x: 1.5, y: 1.5}, {x: 2, y: 9}, {x: 5, y: 0.3}]); |
chart27.addSeries("Series B", [{x: 0.3, y: 8}, {x: 4, y: 6}, {x: 5.5, y: 2}]); |
chart27.render(); |
var chart28 = new dojox.charting.Chart2D("test28"); |
chart28.setTheme(dojox.charting.themes.PlotKit.blue); |
chart28.addPlot("default", {type: "Default", lines: true, markers: true}); |
chart28.addAxis("x", {min: 0, max: 6, majorTick: {stroke: "black", length: 3}, minorTick: {stroke: "gray", length: 3}}); |
chart28.addAxis("y", {vertical: true, min: 0, max: 10, majorTick: {stroke: "black", length: 3}, minorTick: {stroke: "gray", length: 3}}); |
chart28.addSeries("Series A", [{x: 0.5, y: 5}, {x: 1.5, y: 1.5}, {x: 2, y: 9}, {x: 5, y: 0.3}]); |
chart28.addSeries("Series B", [{x: 0.3, y: 8}, {x: 4, y: 6}, {x: 5.5, y: 2}]); |
chart28.render(); |
}; |
dojo.addOnLoad(makeObjects); |
</script> |
</head> |
<body> |
<h1>Chart 2D</h1> |
<!--<p><button onclick="makeObjects();">Go</button></p>--> |
<p>1: Defaults: lines, no axes.</p> |
<div id="test1" style="width: 400px; height: 400px;"></div> |
<p>2: Defaults: lines, no axes, and custom strokes.</p> |
<div id="test2" style="width: 400px; height: 400px;"></div> |
<p>3: Areas, orange theme, no axes.</p> |
<div id="test3" style="width: 400px; height: 400px;"></div> |
<p>4: Areas, no axes, custom strokes and fills.</p> |
<div id="test4" style="width: 400px; height: 400px;"></div> |
<p>5: Lines, axes, blue theme.</p> |
<div id="test5" style="width: 400px; height: 400px;"></div> |
<p>6: Lines, axes (aligned on minor ticks), cyan theme.</p> |
<div id="test6" style="width: 400px; height: 400px;"></div> |
<p>7: Lines, axes (aligned on major ticks), green theme.</p> |
<div id="test7" style="width: 400px; height: 400px;"></div> |
<p>8: Lines and markers, no axes, purple theme, custom min/max.</p> |
<div id="test8" style="width: 200px; height: 200px;"></div> |
<p>9: Markers only, no axes, custom theme, custom markers, custom min/max.</p> |
<div id="test9" style="width: 200px; height: 200px;"></div> |
<p>10: Lines and markers, shadows, no axes, custom theme, custom markers, custom min/max.</p> |
<div id="test10" style="width: 200px; height: 200px;"></div> |
<p>11: Stacked lines, markers, shadows, no axes, custom strokes, fills, and markers.</p> |
<div id="test11" style="width: 200px; height: 200px;"></div> |
<p>12: Stacked areas, axes (aligned on major ticks), custom strokes and fills.</p> |
<div id="test12" style="width: 200px; height: 200px;"></div> |
<p>13: Columns, no axes, custom strokes and fills.</p> |
<div id="test13" style="width: 200px; height: 200px;"></div> |
<p>14: Columns with gaps beetwen them, vertical axis aligned on major ticks, custom strokes, fills.</p> |
<div id="test14" style="width: 200px; height: 200px;"></div> |
<p>15: Stacked columns, no axes, custom strokes and fills.</p> |
<div id="test15" style="width: 200px; height: 200px;"></div> |
<p>16: Bars, axes aligned on major ticks, no minor ticks, custom strokes and fills.</p> |
<div id="test16" style="width: 200px; height: 200px;"></div> |
<p>17: Stacked bars, no axes, custom strokes and fills.</p> |
<div id="test17" style="width: 200px; height: 200px;"></div> |
<p>18: Clustered columns, custom axes, custom strokes, fills, and gap.</p> |
<div id="test18" style="width: 200px; height: 200px;"></div> |
<p>19: Clustered bars, custom axes, custom strokes, fills, and gap.</p> |
<div id="test19" style="width: 200px; height: 200px;"></div> |
<p>20: Columns with gaps beetwen them, grids, custom strokes, fills, axes.</p> |
<div id="test20" style="width: 200px; height: 200px;"></div> |
<p>21: Columns with gaps beetwen them, grids, custom strokes, fills, axes, with min=0, max=8, and manually specified ticks on the vertical axis.</p> |
<div id="test21" style="width: 200px; height: 200px;"></div> |
<p>22: Columns with positive and negative values, axes, and grid.</p> |
<div id="test22" style="width: 200px; height: 200px;"></div> |
<p>23: Clustered columns with positive and negative values, axes, and grid.</p> |
<div id="test23" style="width: 200px; height: 200px;"></div> |
<p>24: Bars with positive and negative values, axes, and grid.</p> |
<div id="test24" style="width: 200px; height: 200px;"></div> |
<p>25: Clustered bars with positive and negative values, axes, and grid.</p> |
<div id="test25" style="width: 200px; height: 200px;"></div> |
<p>26: Default lines with 2D data, custom axis, red theme.</p> |
<div id="test26" style="width: 200px; height: 200px;"></div> |
<p>27: Scatter chart, custom axis, purple theme.</p> |
<div id="test27" style="width: 200px; height: 200px;"></div> |
<p>28: Markers, lines, 2D data, custom axis, blue theme.</p> |
<div id="test28" style="width: 200px; height: 200px;"></div> |
<p>That's all Folks!</p> |
</body> |
</html> |
/trunk/api/js/dojo1.0/dojox/charting/tests/charting.js |
---|
New file |
0,0 → 1,12 |
if(!dojo._hasResource["dojox.charting.tests.charting"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. |
dojo._hasResource["dojox.charting.tests.charting"] = true; |
dojo.provide("dojox.charting.tests.charting"); |
try{ |
dojo.require("dojox.charting.tests._color"); |
dojo.require("dojox.charting.tests.Theme"); |
}catch(e){ |
doh.debug(e); |
} |
} |
/trunk/api/js/dojo1.0/dojox/charting/tests/runTests.html |
---|
New file |
0,0 → 1,9 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> |
<html> |
<head> |
<title>Dojox.wire Unit Test Runner</title> |
<meta http-equiv="REFRESH" content="0;url=../../../util/doh/runner.html?testModule=dojox.charting.tests.charting"></HEAD> |
<BODY> |
Redirecting to D.O.H runner. |
</BODY> |
</HTML> |
/trunk/api/js/dojo1.0/dojox/charting/tests/test_labels2d.html |
---|
New file |
0,0 → 1,90 |
<html> |
<head> |
<title>Chart 2D</title> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
<style type="text/css"> |
@import "../../../dojo/resources/dojo.css"; |
@import "../../../dijit/tests/css/dijitTests.css"; |
</style> |
<!-- |
The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend |
<script type="text/javascript" src="Silverlight.js"></script> |
--> |
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> |
<script type="text/javascript" src="../../lang/functional.js"></script> |
<script type="text/javascript" src="../../lang/utils.js"></script> |
<script type="text/javascript" src="../Theme.js"></script> |
<script type="text/javascript" src="../scaler.js"></script> |
<script type="text/javascript" src="../Element.js"></script> |
<script type="text/javascript" src="../axis2d/common.js"></script> |
<script type="text/javascript" src="../axis2d/Base.js"></script> |
<script type="text/javascript" src="../axis2d/Default.js"></script> |
<script type="text/javascript" src="../plot2d/common.js"></script> |
<script type="text/javascript" src="../plot2d/Base.js"></script> |
<script type="text/javascript" src="../plot2d/Default.js"></script> |
<script type="text/javascript" src="../plot2d/Lines.js"></script> |
<script type="text/javascript" src="../plot2d/Areas.js"></script> |
<script type="text/javascript" src="../plot2d/Markers.js"></script> |
<script type="text/javascript" src="../plot2d/MarkersOnly.js"></script> |
<script type="text/javascript" src="../plot2d/Stacked.js"></script> |
<script type="text/javascript" src="../plot2d/StackedLines.js"></script> |
<script type="text/javascript" src="../plot2d/StackedAreas.js"></script> |
<script type="text/javascript" src="../plot2d/Columns.js"></script> |
<script type="text/javascript" src="../plot2d/StackedColumns.js"></script> |
<script type="text/javascript" src="../plot2d/ClusteredColumns.js"></script> |
<script type="text/javascript" src="../plot2d/Bars.js"></script> |
<script type="text/javascript" src="../plot2d/StackedBars.js"></script> |
<script type="text/javascript" src="../plot2d/ClusteredBars.js"></script> |
<script type="text/javascript" src="../plot2d/Grid.js"></script> |
<script type="text/javascript" src="../plot2d/Pie.js"></script> |
<script type="text/javascript" src="../Chart2D.js"></script> |
<script type="text/javascript"> |
dojo.require("dojox.charting.Chart2D"); |
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"); |
makeObjects = function(){ |
var chart1 = new dojox.charting.Chart2D("test1"); |
chart1.addAxis("x", {fixLower: "major", fixUpper: "major", includeZero: true}); |
chart1.addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", natural: true}); |
chart1.addPlot("default", {type: "Bars"}); |
chart1.addSeries("Series A", [1, 2, 3, 4, 5], {stroke: {color: "red"}, fill: "lightpink"}); |
chart1.addSeries("Series B", [5, 4, 3, 2, 1], {stroke: {color: "blue"}, fill: "lightblue"}); |
chart1.render(); |
var chart2 = new dojox.charting.Chart2D("test2"); |
chart2.addAxis("x", { |
fixLower: "major", fixUpper: "major", includeZero: true, |
labels: [{value: 0, text: "zero"}, {value: 2, text: "two"}, {value: 4, text: "four"}] |
}); |
chart2.addAxis("y", { |
vertical: true, fixLower: "major", fixUpper: "major", natural: true, |
labels: [{value: 0, text: ""}, {value: 1, text: "Jan"}, {value: 2, text: "Feb"}, |
{value: 3, text: "Mar"}, {value: 4, text: "Apr"}, |
{value: 5, text: "May"}, {value: 6, text: "Jun"}] |
}); |
chart2.addPlot("default", {type: "Bars"}); |
chart2.addSeries("Series A", [1, 2, 3, 4, 5], {stroke: {color: "red"}, fill: "lightpink"}); |
chart2.addSeries("Series B", [5, 4, 3, 2, 1], {stroke: {color: "blue"}, fill: "lightblue"}); |
chart2.render(); |
}; |
dojo.addOnLoad(makeObjects); |
</script> |
</head> |
<body> |
<h1>Chart 2D</h1> |
<!--<p><button onclick="makeObjects();">Go</button></p>--> |
<p>1: Bars, axes aligned on major ticks, no minor ticks, custom strokes and fills.</p> |
<div id="test1" style="width: 200px; height: 200px;"></div> |
<p>2: Bars, axes aligned on major ticks, no minor ticks, custom strokes and fills, custom labels.</p> |
<div id="test2" style="width: 200px; height: 200px;"></div> |
<p>That's all Folks!</p> |
</body> |
</html> |
/trunk/api/js/dojo1.0/dojox/charting/tests/test_scaler.html |
---|
New file |
0,0 → 1,97 |
<html> |
<head> |
<title>Scaler/tick generator</title> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
<style type="text/css"> |
@import "../../../dojo/resources/dojo.css"; |
@import "../../../dijit/tests/css/dijitTests.css"; |
</style> |
<!-- |
The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend |
<script type="text/javascript" src="Silverlight.js"></script> |
--> |
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> |
<script type="text/javascript" src="../scaler.js"></script> |
<script type="text/javascript"> |
dojo.require("dojox.charting.scaler"); |
calc = function(){ |
var min = parseFloat(dojo.byId("imin").value); |
var max = parseFloat(dojo.byId("imax").value); |
var span = parseFloat(dojo.byId("ispan").value); |
var o = dojox.charting.scaler( |
min, max, span, { |
fixLower: dojo.byId("ifl").value, |
fixUpper: dojo.byId("ifu").value, |
natural: Boolean(dojo.byId("inat").checked) |
} |
); |
dojo.byId("imin").value = min; |
dojo.byId("imax").value = max; |
dojo.byId("ispan").value = span; |
dojo.byId("olb").innerHTML = o.bounds.lower; |
dojo.byId("oub").innerHTML = o.bounds.upper; |
dojo.byId("omajt").innerHTML = o.major.tick; |
dojo.byId("omajs").innerHTML = o.major.start; |
dojo.byId("omajc").innerHTML = o.major.count; |
dojo.byId("omajp").innerHTML = o.major.prec; |
dojo.byId("omint").innerHTML = o.minor.tick; |
dojo.byId("omins").innerHTML = o.minor.start; |
dojo.byId("ominc").innerHTML = o.minor.count; |
dojo.byId("ominp").innerHTML = o.minor.prec; |
dojo.byId("omict").innerHTML = o.micro.tick; |
dojo.byId("omics").innerHTML = o.micro.start; |
dojo.byId("omicc").innerHTML = o.micro.count; |
dojo.byId("omicp").innerHTML = o.micro.prec; |
dojo.byId("oscale").innerHTML = o.scale; |
}; |
</script> |
</head> |
<body> |
<h1>Scaler/tick generator</h1> |
<h2>Input</h2> |
<table> |
<tr><th>Name</th><th>Value</th></tr> |
<tr><td>min</td><td><input type="text" id="imin" /></td></tr> |
<tr><td>max</td><td><input type="text" id="imax" /></td></tr> |
<tr><td>span</td><td><input type="text" id="ispan" /></td></tr> |
<tr><td>natural</td><td><input type="checkbox" id="inat" /></td></tr> |
<tr><td>fixLower</td><td><input type="text" id="ifl" /></td></tr> |
<tr><td>fixUpper</td><td><input type="text" id="ifu" /></td></tr> |
</table> |
<p><button onclick="calc()">Calculate!</button></p> |
<h2>Output</h2> |
<table> |
<tr><th>Name</th><th>Value</th></tr> |
<tr><td>lowerBound</td><td><span id="olb"> </span></td></tr> |
<tr><td>upperBound</td><td><span id="oub"> </span></td></tr> |
<tr><td>major.tick</td><td><span id="omajt"> </span></td></tr> |
<tr><td>major.start</td><td><span id="omajs"> </span></td></tr> |
<tr><td>major.count</td><td><span id="omajc"> </span></td></tr> |
<tr><td>major.prec</td><td><span id="omajp"> </span></td></tr> |
<tr><td>minor.tick</td><td><span id="omint"> </span></td></tr> |
<tr><td>minor.start</td><td><span id="omins"> </span></td></tr> |
<tr><td>minor.count</td><td><span id="ominc"> </span></td></tr> |
<tr><td>minor.prec</td><td><span id="ominp"> </span></td></tr> |
<tr><td>micro.tick</td><td><span id="omict"> </span></td></tr> |
<tr><td>micro.start</td><td><span id="omics"> </span></td></tr> |
<tr><td>micro.count</td><td><span id="omicc"> </span></td></tr> |
<tr><td>micro.prec</td><td><span id="omicp"> </span></td></tr> |
<tr><td>scale</td><td><span id="oscale"> </span></td></tr> |
</table> |
</body> |
</html> |
/trunk/api/js/dojo1.0/dojox/charting/tests/test_widget2d.html |
---|
New file |
0,0 → 1,98 |
<html> |
<head> |
<title>Chart 2D</title> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
<style type="text/css"> |
@import "../../../dojo/resources/dojo.css"; |
@import "../../../dijit/tests/css/dijitTests.css"; |
</style> |
<!-- |
The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend |
<script type="text/javascript" src="Silverlight.js"></script> |
--> |
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script> |
<script type="text/javascript" src="../../lang/functional.js"></script> |
<script type="text/javascript" src="../Theme.js"></script> |
<script type="text/javascript" src="../scaler.js"></script> |
<script type="text/javascript" src="../Chart2D.js"></script> |
<script type="text/javascript" src="../widget/Chart2D.js"></script> |
<script type="text/javascript"> |
dojo.require("dojox.charting.widget.Chart2D"); |
dojo.require("dojox.charting.themes.PlotKit.orange"); |
dojo.require("dojox.charting.themes.PlotKit.blue"); |
dojo.require("dojox.charting.themes.PlotKit.green"); |
dojo.require("dojox.data.HtmlTableStore"); |
seriesB = [2.6, 1.8, 2, 1, 1.4, 0.7, 2]; |
dojo.require("dojo.parser"); // scan page for widgets and instantiate them |
</script> |
</head> |
<body> |
<h1>Chart 2D</h1> |
<p>Examples of charts using widgets.</p> |
<div dojoType="dojox.data.HtmlTableStore" tableId="tableExample" jsId="tableStore"></div> |
<table id="tableExample" style="display: none;"> |
<thead> |
<tr><th>value</th></tr> |
</thead> |
<tbody> |
<tr><td>6.3</td></tr> |
<tr><td>1.8</td></tr> |
<tr><td>3 </td></tr> |
<tr><td>0.5</td></tr> |
<tr><td>4.4</td></tr> |
<tr><td>2.7</td></tr> |
<tr><td>2 </td></tr> |
</tbody> |
</table> |
<table border="1"> |
<tr> |
<td> |
<div dojoType="dojox.charting.widget.Chart2D" style="width: 300px; height: 300px;"> |
<div class="axis" name="x" font="italic normal normal 8pt Tahoma"></div> |
<div class="axis" name="y" vertical="true" fixUpper="major" includeZero="true" |
font="italic normal normal 8pt Tahoma"></div> |
<div class="plot" name="default" type="Areas"></div> |
<div class="plot" name="grid" type="Grid"></div> |
<div class="series" name="Series A" data="1, 2, 0.5, 1.5, 1, 2.8, 0.4"></div> |
<div class="series" name="Series B" array="seriesB"></div> |
<div class="series" name="Series C" store="tableStore" valueFn="Number(x)"></div> |
</div> |
</td> |
<td> |
<div dojoType="dojox.charting.widget.Chart2D" theme="dojox.charting.themes.PlotKit.orange" |
fill="'lightgrey'" style="width: 300px; height: 300px;"> |
<div class="axis" name="x" font="italic normal bold 10pt Tahoma"></div> |
<div class="axis" name="y" vertical="true" fixUpper="major" includeZero="true" |
font="italic normal bold 10pt Tahoma"></div> |
<div class="plot" name="default" type="Areas"></div> |
<div class="plot" name="grid" type="Grid"></div> |
<div class="series" name="Series A" data="1, 2, 0.5, 1.5, 1, 2.8, 0.4"></div> |
<div class="series" name="Series B" array="seriesB"></div> |
<div class="series" name="Series C" store="tableStore" valueFn="Number(x)" stroke="'blue'" fill="'green'"></div> |
</div> |
</td> |
</tr> |
<tr> |
<td> |
<div dojoType="dojox.charting.widget.Chart2D" theme="dojox.charting.themes.PlotKit.blue" |
style="width: 300px; height: 300px;"> |
<div class="plot" name="default" type="Pie" radius="100" fontColor="white"></div> |
<div class="series" name="Series B" array="seriesB"></div> |
</div> |
</td> |
<td> |
<div dojoType="dojox.charting.widget.Chart2D" theme="dojox.charting.themes.PlotKit.green" |
style="width: 300px; height: 300px;"> |
<div class="plot" name="default" type="Pie" radius="100" fontColor="black" labelOffset="-20"></div> |
<div class="series" name="Series C" store="tableStore" valueFn="Number(x)"></div> |
</div> |
</td> |
</tr> |
</table> |
<p>That's all Folks!</p> |
</body> |
</html> |
/trunk/api/js/dojo1.0/dojox/charting/tests/Theme.js |
---|
New file |
0,0 → 1,71 |
if(!dojo._hasResource["dojox.charting.tests.Theme"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. |
dojo._hasResource["dojox.charting.tests.Theme"] = true; |
dojo.provide("dojox.charting.tests.Theme"); |
dojo.require("dojox.charting.Theme"); |
dojo.require("dojox.charting.themes.PlotKit.blue"); |
(function(){ |
var dxc=dojox.charting; |
var blue=dxc.themes.PlotKit.blue; |
tests.register("dojox.charting.tests.Theme", [ |
function testDefineColor(t){ |
var args={ num:16, cache:false }; |
blue.defineColors(args); |
var a=blue.colors; |
var s="<table border=1>"; |
for(var i=0; i<a.length; i++){ |
if(i%8==0){ |
if(i>0) s+="</tr>"; |
s+="<tr>"; |
} |
s+='<td width=16 bgcolor='+a[i]+'> </td>'; |
} |
s+="</tr></table>"; |
doh.debug(s); |
var args={ num:32, cache: false }; |
blue.defineColors(args); |
var a=blue.colors; |
var s="<table border=1 style=margin-top:12px;>"; |
for(var i=0; i<a.length; i++){ |
if(i%8==0){ |
if(i>0) s+="</tr>"; |
s+="<tr>"; |
} |
s+='<td width=16 bgcolor='+a[i]+'> </td>'; |
} |
s+="</tr></table>"; |
doh.debug(s); |
var args={ saturation:20, num:32, cache:false }; |
blue.defineColors(args); |
var a=blue.colors; |
var s="<table border=1 style=margin-top:12px;>"; |
for(var i=0; i<a.length; i++){ |
if(i%8==0){ |
if(i>0) s+="</tr>"; |
s+="<tr>"; |
} |
s+='<td width=16 bgcolor='+a[i]+'> </td>'; |
} |
s+="</tr></table>"; |
doh.debug(s); |
var args={ low:10, high:90, num:32, cache: false }; |
blue.defineColors(args); |
var a=blue.colors; |
var s="<table border=1 style=margin-top:12px;>"; |
for(var i=0; i<a.length; i++){ |
if(i%8==0){ |
if(i>0) s+="</tr>"; |
s+="<tr>"; |
} |
s+='<td width=16 bgcolor='+a[i]+'> </td>'; |
} |
s+="</tr></table>"; |
doh.debug(s); |
} |
]); |
})(); |
} |
/trunk/api/js/dojo1.0/dojox/charting/tests/test_cylinders.html |
---|
New file |
0,0 → 1,65 |
<html> |
<head> |
<title>Cylinder chart</title> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
<style type="text/css"> |
@import "../../../dojo/resources/dojo.css"; |
@import "../../../dijit/tests/css/dijitTests.css"; |
</style> |
<!-- |
The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend |
<script type="text/javascript" src="Silverlight.js"></script> |
--> |
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> |
<script type="text/javascript" src="../Chart3D.js"></script> |
<script type="text/javascript" src="../plot3d/Base.js"></script> |
<script type="text/javascript" src="../plot3d/Cylinders.js"></script> |
<script type="text/javascript"> |
dojo.require("dojox.charting.Chart3D"); |
dojo.require("dojox.charting.plot3d.Cylinders"); |
makeObjects = function(){ |
var m = dojox.gfx3d.matrix; |
var chart = new dojox.charting.Chart3D("test", |
{ |
lights: [{direction: {x: 5, y: 5, z: -5}, color: "white"}], |
ambient: {color:"white", intensity: 2}, |
specular: "white" |
}, |
[m.cameraRotateXg(10), m.cameraRotateYg(-10), m.scale(0.8), m.cameraTranslate(-50, -50, 0)] |
); |
var plot1 = new dojox.charting.plot3d.Cylinders(500, 500, {gap: 10, material: "yellow"}); |
plot1.setData([1,2,3,2,1,2,3,4,5]); |
chart.addPlot(plot1); |
var plot2 = new dojox.charting.plot3d.Cylinders(500, 500, {gap: 10, material: "red"}); |
plot2.setData([2,3,4,3,2,3,4,5,5]); |
chart.addPlot(plot2); |
var plot3 = new dojox.charting.plot3d.Cylinders(500, 500, {gap: 10, material: "blue"}); |
plot3.setData([3,4,5,4,3,4,5,5,5]); |
chart.addPlot(plot3); |
chart.generate().render(); |
//dojo.byId("out1").value = dojo.byId("test").innerHTML; |
//dojo.byId("out2").value = dojox.gfx.utils.toJson(surface, true); |
}; |
dojo.addOnLoad(makeObjects); |
</script> |
</head> |
<body> |
<h1>Cylinder chart</h1> |
<div id="test" style="width: 500px; height: 500px;"></div> |
<!-- |
<p><button onclick="makeObjects();">Go</button></p> |
<p><textarea id="out1" cols="40" rows="5"></textarea></p> |
<p><textarea id="out2" cols="40" rows="5"></textarea></p> |
--> |
<p>That's all Folks!</p> |
</body> |
</html> |