3 function drawDemo(element
, layout
, options
) {
4 var renderer
= new PlotKit
.SVGRenderer(element
, layout
, options
);
8 function demoWithStyle(style
) {
31 "drawBackground": false,
36 "padding": {left
: 40, right
: 10, top
: 10, bottom
: 20},
37 "axisLabelUseDiv": false
41 options
["padding"] = {left
: 50, right
: 50, top
: 50, bottom
: 50}
44 var layout
= new PlotKit
.Layout(style
, options
);
45 layout
.addDataset("noname", dataset
);
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
);
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
);
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
);
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;
88 layout
.options
.yNumberOfTicks
= 3;
90 drawDemo($('test10'), layout
, options
);
92 layout
.options
.xNumberOfTicks
= 3;
94 drawDemo($('test11'), layout
, options
);
96 layout
.options
.barWidthFillFraction
= 0.5;
98 drawDemo($('test12'), layout
, options
);
102 layout
.options
.barWidthFillFraction
= 0.75;
103 layout
.options
.yTicks
= [{v
:10}, {v
:20}, {v
:30}, {v
:40}];
105 drawDemo($('test13'), layout
, options
);
107 layout
.options
.xTicks
= [
110 {v
:3, label
:"three"},
115 drawDemo($('test14'), layout
, options
);
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;
125 drawDemo($('test15'), layout
, options
);
130 demoWithStyle("bar");