3 function drawDemo(element
, layout
, options
) {
4 var renderer
= new PlotKit
.CanvasRenderer(element
, layout
, options
);
8 function demoWithStyle(style
) {
32 "IECanvasHTC": "../plotkit/iecanvas.htc",
33 "drawBackground": false,
38 "padding": {left
: 40, right
: 10, top
: 10, bottom
: 20},
40 "strokeColorTransform": "asStrokeColor"
44 options
["padding"] = {left
: 50, right
: 50, top
: 50, bottom
: 50}
47 var layout
= new PlotKit
.Layout(style
, options
);
48 layout
.addDataset("noname", dataset
);
52 drawDemo($('test1'), layout
, options
);
53 options
["shouldFill"] = false;
54 drawDemo($('test2'), layout
, options
);
55 options
["shouldStroke"] = false;
56 options
["shouldFill"] = true;
57 drawDemo($('test3'), layout
, options
);
60 options
["shouldFill"] = true;
61 options
["shouldStroke"] = true;
62 options
["drawXAxis"] = false;
63 options
["drawYAxis"] = false;
64 drawDemo($('test4'), layout
, options
);
65 options
["drawXAxis"] = true;
66 drawDemo($('test5'), layout
, options
);
67 options
["drawYAxis"] = true;
68 options
["drawXAxis"] = false;
69 drawDemo($('test6'), layout
, options
);
71 // changing background color and axis color
72 options
["drawXAxis"] = true;
73 options
["colorScheme"] = PlotKit
.Base
.colorScheme().reverse()
74 drawDemo($('test7'), layout
, options
);
75 options
["drawBackground"] = true;
76 options
["backgroundColor"] = Color
.blueColor().lighterColorWithLevel(0.4);
77 drawDemo($('test8'), layout
, options
);
78 options
["drawBackground"] = false;
79 options
["axisLineColor"] = Color
.grayColor();
80 options
["axisLabelColor"] = Color
.grayColor();
81 options
["axisLabelFontSize"] = 8;
82 drawDemo($('test9'), layout
, options
);
84 // layout customisation
85 options
["colorScheme"] = PlotKit
.Base
.colorScheme();
86 options
["axisLineColor"] = Color
.blackColor();
87 options
["axisLabelColor"] = Color
.blackColor();
88 options
["axisLabelFontSize"] = 9;
89 options
["yNumberOfTicks"] = 3;
91 layout
.options
.yNumberOfTicks
= 3;
93 drawDemo($('test10'), layout
, options
);
95 layout
.options
.xNumberOfTicks
= 3;
97 drawDemo($('test11'), layout
, options
);
99 layout
.options
.barWidthFillFraction
= 0.5;
101 drawDemo($('test12'), layout
, options
);
105 layout
.options
.barWidthFillFraction
= 0.75;
106 layout
.options
.yTicks
= [{v
:10}, {v
:20}, {v
:30}, {v
:40}];
108 drawDemo($('test13'), layout
, options
);
110 layout
.options
.xTicks
= [
113 {v
:3, label
:"three"},
118 drawDemo($('test14'), layout
, options
);
120 layout
.addDataset("reversed", dataset_rev
);
121 layout
.options
.yTicks
= null;
122 layout
.options
.xTicks
= null;
123 layout
.options
.xNumberOfTicks
= 10;
124 layout
.options
.yNumberOfTicks
= 5;
125 layout
.options
.xTicks
= null;
126 layout
.options
.yTicks
= null;
128 drawDemo($('test15'), layout
, options
);
133 demoWithStyle("pie");