Commit | Line | Data |
---|---|---|
6a1aa64f DV |
1 | /* actual tests */ |
2 | ||
3 | function drawDemo(element, layout, options) { | |
4 | var renderer = new PlotKit.SVGRenderer(element, layout, options); | |
5 | renderer.render(); | |
6 | } | |
7 | ||
8 | function demoWithStyle(style) { | |
9 | // datasets | |
10 | var dataset = [ | |
11 | [0,1], | |
12 | [1,4], | |
13 | [2,16], | |
14 | [3,8], | |
15 | [4,16], | |
16 | [5,4], | |
17 | [6,1] | |
18 | ]; | |
19 | ||
20 | var dataset_rev = [ | |
21 | [6,0], | |
22 | [5,1], | |
23 | [4,4], | |
24 | [3,9], | |
25 | [2,16], | |
26 | [1,25], | |
27 | [0,36] | |
28 | ]; | |
29 | ||
30 | var options = { | |
31 | "drawBackground": false, | |
32 | "shouldFill": true, | |
33 | "shouldStroke": true, | |
34 | "drawXAxis": true, | |
35 | "drawYAxis": true, | |
36 | "padding": {left: 40, right: 10, top: 10, bottom: 20}, | |
37 | "axisLabelUseDiv": false | |
38 | }; | |
39 | ||
40 | if (style == "pie") { | |
41 | options["padding"] = {left: 50, right: 50, top: 50, bottom: 50} | |
42 | } | |
43 | ||
44 | var layout = new PlotKit.Layout(style, options); | |
45 | layout.addDataset("noname", dataset); | |
46 | layout.evaluate(); | |
47 | ||
48 | // stroke/fill toggle | |
49 | drawDemo($('test1'), layout, options); | |
50 | options["shouldFill"] = false; | |
51 | drawDemo($('test2'), layout, options); | |
52 | options["shouldStroke"] = false; | |
53 | options["shouldFill"] = true; | |
54 | drawDemo($('test3'), layout, options); | |
55 | ||
56 | // drawing axis | |
57 | options["shouldFill"] = true; | |
58 | options["shouldStroke"] = true; | |
59 | options["drawXAxis"] = false; | |
60 | options["drawYAxis"] = false; | |
61 | drawDemo($('test4'), layout, options); | |
62 | options["drawXAxis"] = true; | |
63 | drawDemo($('test5'), layout, options); | |
64 | options["drawYAxis"] = true; | |
65 | options["drawXAxis"] = false; | |
66 | drawDemo($('test6'), layout, options); | |
67 | ||
68 | // changing background color and axis color | |
69 | options["drawXAxis"] = true; | |
70 | options["colorScheme"] = PlotKit.Base.colorScheme().reverse() | |
71 | drawDemo($('test7'), layout, options); | |
72 | options["drawBackground"] = true; | |
73 | options["backgroundColor"] = Color.blueColor().lighterColorWithLevel(0.45); | |
74 | drawDemo($('test8'), layout, options); | |
75 | options["drawBackground"] = false; | |
76 | options["axisLineColor"] = Color.grayColor(); | |
77 | options["axisLabelColor"] = Color.grayColor(); | |
78 | options["axisLabelFontSize"] = 9; | |
79 | drawDemo($('test9'), layout, options); | |
80 | ||
81 | // layout customisation | |
82 | options["colorScheme"] = PlotKit.Base.colorScheme(); | |
83 | options["axisLineColor"] = Color.blackColor(); | |
84 | options["axisLabelColor"] = Color.blackColor(); | |
85 | options["axisLabelFontSize"] = 9; | |
86 | options["yNumberOfTicks"] = 3; | |
87 | ||
88 | layout.options.yNumberOfTicks = 3; | |
89 | layout.evaluate(); | |
90 | drawDemo($('test10'), layout, options); | |
91 | ||
92 | layout.options.xNumberOfTicks = 3; | |
93 | layout.evaluate(); | |
94 | drawDemo($('test11'), layout, options); | |
95 | ||
96 | layout.options.barWidthFillFraction = 0.5; | |
97 | layout.evaluate(); | |
98 | drawDemo($('test12'), layout, options); | |
99 | ||
100 | ||
101 | // custom labels | |
102 | layout.options.barWidthFillFraction = 0.75; | |
103 | layout.options.yTicks = [{v:10}, {v:20}, {v:30}, {v:40}]; | |
104 | layout.evaluate(); | |
105 | drawDemo($('test13'), layout, options); | |
106 | ||
107 | layout.options.xTicks = [ | |
108 | {v:1, label:"one"}, | |
109 | {v:2, label:"two"}, | |
110 | {v:3, label:"three"}, | |
111 | {v:4, label:"four"}, | |
112 | {v:5, label:"five"}, | |
113 | {v:6, label:"six"}]; | |
114 | layout.evaluate(); | |
115 | drawDemo($('test14'), layout, options); | |
116 | ||
117 | layout.addDataset("reversed", dataset_rev); | |
118 | layout.options.yTicks = null; | |
119 | layout.options.xTicks = null; | |
120 | layout.options.xNumberOfTicks = 10; | |
121 | layout.options.yNumberOfTicks = 5; | |
122 | layout.options.xTicks = null; | |
123 | layout.options.yTicks = null; | |
124 | layout.evaluate(); | |
125 | drawDemo($('test15'), layout, options); | |
126 | ||
127 | } | |
128 | ||
129 | function demo() { | |
130 | demoWithStyle("bar"); | |
131 | } | |
132 | ||
133 | addLoadEvent(demo); |