Skip to content

Commit 56536cd

Browse files
committed
Unify namespaces and fix examples
1 parent 80c2c44 commit 56536cd

File tree

11 files changed

+112
-130
lines changed

11 files changed

+112
-130
lines changed

api/javascript/dataviz/drawing/arc.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,18 @@ Draws an arc with set geometry, fill and stroke.
99
#### Example - creating an arc
1010
<div id="surface"></div>
1111
<script>
12-
var d = kendo.dataviz.drawing;
13-
var geo = kendo.dataviz.geometry;
12+
var draw = kendo.dataviz.drawing;
13+
var geom = kendo.dataviz.geometry;
1414

15-
var arcGeometry = new geo.Arc([100, 100], {
15+
var arcGeometry = new geom.Arc([100, 100], {
1616
radiusX: 10,
1717
radiusY: 10,
1818
startAngle: 45,
1919
endAngle: 135
2020
});
21-
var arc = new d.Arc(arcGeometry).stroke("red", 1);
21+
var arc = new draw.Arc(arcGeometry).stroke("red", 1);
2222

23-
var surface = d.Surface.create($("#surface"));
23+
var surface = draw.Surface.create($("#surface"));
2424
surface.draw(arc);
2525
</script>
2626

api/javascript/dataviz/drawing/circle.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ Draws a circle with set geometry, fill and stroke.
99
#### Example - creating a circle
1010
<div id="surface"></div>
1111
<script>
12-
var d = kendo.dataviz.drawing;
13-
var geo = kendo.dataviz.geometry;
12+
var draw = kendo.dataviz.drawing;
13+
var geom = kendo.dataviz.geometry;
1414

15-
var circleGeometry = new geo.Circle([100, 100], 20);
16-
var circle = new d.Circle(circleGeometry).stroke("red", 1);
15+
var circleGeometry = new geom.Circle([100, 100], 20);
16+
var circle = new draw.Circle(circleGeometry).stroke("red", 1);
1717

18-
var surface = d.Surface.create($("#surface"));
18+
var surface = draw.Surface.create($("#surface"));
1919
surface.draw(circle);
2020
</script>
2121

api/javascript/dataviz/drawing/element.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -67,15 +67,15 @@ Gets or sets the transformation of the element.
6767
#### Example - setting transformation on an element
6868
<div id="surface"></div>
6969
<script>
70-
var d = kendo.dataviz.drawing;
71-
var geo = kendo.dataviz.geometry;
70+
var draw = kendo.dataviz.drawing;
71+
var geom = kendo.dataviz.geometry;
7272

73-
var path = new d.Path();
73+
var path = new draw.Path();
7474
path.moveTo(0, 0).lineTo(100, 100);
7575

76-
path.transform(geo.transform().scale(2, 1));
76+
path.transform(geom.transform().scale(2, 1));
7777

78-
var surface = d.Surface.create($("#surface"));
78+
var surface = draw.Surface.create($("#surface"));
7979
surface.draw(path);
8080
</script>
8181

api/javascript/dataviz/drawing/group.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@ Represents a set of drawing elements, possibly including other groups.
99
#### Example - creating a group
1010
<div id="surface"></div>
1111
<script>
12-
var d = kendo.dataviz.drawing;
13-
var group = new d.Group();
12+
var draw = kendo.dataviz.drawing;
13+
var group = new draw.Group();
1414

15-
var pathA = new d.Path().moveTo(0, 0).lineTo(100, 100);
16-
var pathB = new d.Path().moveTo(0, 100).lineTo(100, 0);
15+
var pathA = new draw.Path().moveTo(0, 0).lineTo(100, 100);
16+
var pathB = new draw.Path().moveTo(0, 100).lineTo(100, 0);
1717

1818
group.append(pathA, pathB);
1919

20-
var surface = d.Surface.create($("#surface"));
20+
var surface = draw.Surface.create($("#surface"));
2121
surface.draw(group);
2222
</script>
2323

api/javascript/dataviz/drawing/image.md

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,16 @@ Draws a bitmap image with a given source URL into the specified [rectangle](../g
99
#### Example - draw an image
1010
<div id="surface" style="width: 250px; height: 250px;"></div>
1111
<script>
12-
var d = kendo.dataviz.drawing;
13-
var geo = kendo.dataviz.geometry;
12+
var draw = kendo.dataviz.drawing;
13+
var geom = kendo.dataviz.geometry;
1414

15-
var rect = new geo.Rect(
15+
var rect = new geom.Rect(
1616
[10, 10], // Position of the top left corner
1717
[249, 240] // Size of the rectangle
1818
);
19-
var image = new d.Image("http://goo.gl/6ov8Gw", rect);
19+
var image = new draw.Image("http://goo.gl/6ov8Gw", rect);
2020

21-
var surface = d.Surface.create($("#surface"));
21+
var surface = draw.Surface.create($("#surface"));
2222
surface.draw(image);
2323
</script>
2424

@@ -73,16 +73,16 @@ Gets or sets the image source URL.
7373
#### Example - changing the image source
7474
<div id="surface" style="width: 250px; height: 250px;"></div>
7575
<script>
76-
var d = kendo.dataviz.drawing;
77-
var geo = kendo.dataviz.geometry;
76+
var draw = kendo.dataviz.drawing;
77+
var geom = kendo.dataviz.geometry;
7878

79-
var rect = new geo.Rect(
79+
var rect = new geom.Rect(
8080
[10, 10], // Position of the top left corner
8181
[240, 240] // Size of the rectangle
8282
);
83-
var image = new d.Image("http://goo.gl/6ov8Gw", rect);
83+
var image = new draw.Image("http://goo.gl/6ov8Gw", rect);
8484

85-
var surface = d.Surface.create($("#surface"));
85+
var surface = draw.Surface.create($("#surface"));
8686
surface.draw(image);
8787

8888
setTimeout(function() {
@@ -105,16 +105,16 @@ Gets or sets the rectangle defines the image position and size.
105105
#### Example - resizing the image
106106
<div id="surface" style="width: 250px; height: 250px;"></div>
107107
<script>
108-
var d = kendo.dataviz.drawing;
109-
var geo = kendo.dataviz.geometry;
108+
var draw = kendo.dataviz.drawing;
109+
var geom = kendo.dataviz.geometry;
110110

111-
var rect = new geo.Rect(
111+
var rect = new geom.Rect(
112112
[10, 10], // Position of the top left corner
113113
[240, 240] // Size of the rectangle
114114
);
115-
var image = new d.Image("http://goo.gl/6ov8Gw", rect);
115+
var image = new draw.Image("http://goo.gl/6ov8Gw", rect);
116116

117-
var surface = d.Surface.create($("#surface"));
117+
var surface = draw.Surface.create($("#surface"));
118118
surface.draw(image);
119119

120120
setTimeout(function() {

api/javascript/dataviz/drawing/multi-path.md

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@ but each moveTo command starts a new sub-path.
1313
#### Example - drawng a multi-path
1414
<div id="surface" style="width: 250px; height: 250px;"></div>
1515
<script>
16-
var d = kendo.dataviz.drawing;
16+
var draw = kendo.dataviz.drawing;
1717

18-
var multiPath = new d.MultiPath()
18+
var multiPath = new draw.MultiPath()
1919
.moveTo(100, 200).curveTo([100, 100], [250, 100], [250, 200]).close()
2020
.moveTo(150, 150).lineTo(200, 150).close();
2121

22-
var surface = d.Surface.create($("#surface"));
22+
var surface = draw.Surface.create($("#surface"));
2323
surface.draw(multiPath);
2424
</script>
2525

@@ -69,9 +69,9 @@ Closes the current sub-path by linking its current end point with its start poin
6969
#### Example - Draw a closed sub-path
7070
<div id="surface" style="width: 250px; height: 250px;"></div>
7171
<script>
72-
var d = kendo.dataviz.drawing;
72+
var draw = kendo.dataviz.drawing;
7373

74-
var multiPath = new d.MultiPath()
74+
var multiPath = new draw.MultiPath()
7575
.moveTo(100, 200).curveTo([100, 100], [250, 100], [250, 200]);
7676

7777
// The following commands are interchangable
@@ -81,7 +81,7 @@ Closes the current sub-path by linking its current end point with its start poin
8181
// Draw the next sub-path
8282
multiPath.moveTo(150, 150).lineTo(200, 150).close();
8383

84-
var surface = d.Surface.create($("#surface"));
84+
var surface = draw.Surface.create($("#surface"));
8585
surface.draw(multiPath);
8686
</script>
8787

@@ -97,13 +97,13 @@ A quadratic Bézier curve (with one control point) can be plotted by making the
9797
#### Example - Draw a curved sub-path
9898
<div id="surface" style="width: 250px; height: 250px;"></div>
9999
<script>
100-
var d = kendo.dataviz.drawing;
100+
var draw = kendo.dataviz.drawing;
101101

102-
var multiPath = new d.MultiPath()
102+
var multiPath = new draw.MultiPath()
103103
.moveTo(100, 200).curveTo([100, 100], [250, 100], [250, 200]).close()
104104
.moveTo(150, 150).lineTo(200, 150).close();
105105

106-
var surface = d.Surface.create($("#surface"));
106+
var surface = draw.Surface.create($("#surface"));
107107
surface.draw(multiPath);
108108
</script>
109109

@@ -140,20 +140,20 @@ Draws a straight line to the specified absolute coordinates.
140140
#### Example - Draw a straight sub-path
141141
<div id="surface" style="width: 250px; height: 250px;"></div>
142142
<script>
143-
var d = kendo.dataviz.drawing;
144-
var geo = kendo.dataviz.geometry;
143+
var draw = kendo.dataviz.drawing;
144+
var geom = kendo.dataviz.geometry;
145145

146-
var multiPath = new d.MultiPath()
146+
var multiPath = new draw.MultiPath()
147147
.moveTo(100, 200);
148148

149149
// The following commands are interchangeable
150150
multiPath.lineTo(200, 200);
151151
multiPath.lineTo([200, 200]);
152-
multiPath.lineTo(new geo.Point(200, 200));
152+
multiPath.lineTo(new geom.Point(200, 200));
153153

154154
multiPath.moveTo(150, 150).lineTo(200, 150).close();
155155

156-
var surface = d.Surface.create($("#surface"));
156+
var surface = draw.Surface.create($("#surface"));
157157
surface.draw(multiPath);
158158
</script>
159159

@@ -177,20 +177,20 @@ Creates a new sub-path or clears all segments and moves the starting point to th
177177
#### Example - Set the sub-path start coordinates
178178
<div id="surface" style="width: 250px; height: 250px;"></div>
179179
<script>
180-
var d = kendo.dataviz.drawing;
181-
var geo = kendo.dataviz.geometry;
180+
var draw = kendo.dataviz.drawing;
181+
var geom = kendo.dataviz.geometry;
182182

183-
var multiPath = new d.MultiPath();
183+
var multiPath = new draw.MultiPath();
184184

185185
// The following commands are interchangeable
186186
multiPath.moveTo(100, 200);
187187
multiPath.moveTo([100, 200]);
188-
multiPath.moveTo(new geo.Point(100, 200));
188+
multiPath.moveTo(new geom.Point(100, 200));
189189

190190
multiPath.lineTo(200, 200).close();
191191
multiPath.moveTo(150, 150).lineTo(200, 150).close();
192192

193-
var surface = d.Surface.create($("#surface"));
193+
var surface = draw.Surface.create($("#surface"));
194194
surface.draw(multiPath);
195195
</script>
196196

api/javascript/dataviz/drawing/options-store.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ Must be a fully qualified name (e.g. "foo.bar") for nested options.
6363
Sets the value of the specified option.
6464

6565
#### Example - retrieving an option value
66-
<div id="surface"></div>
66+
<script>
6767
var options = new kendo.dataviz.drawing.OptionsStore({
6868
foo: {
6969
bar: true

api/javascript/dataviz/drawing/path.md

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ Draws a path consisting of linear or cubic Bézier curve segments.
99
#### Example - draw a path
1010
<div id="surface" style="width: 250px; height: 250px;"></div>
1111
<script>
12-
var d = kendo.dataviz.drawing;
12+
var draw = kendo.dataviz.drawing;
1313

14-
var path = new d.Path()
14+
var path = new draw.Path()
1515
.moveTo(100, 200)
1616
.curveTo([100, 100], [250, 100], [250, 200])
1717
.lineTo(100, 200);
1818

19-
var surface = d.Surface.create($("#surface"));
19+
var surface = draw.Surface.create($("#surface"));
2020
surface.draw(path);
2121
</script>
2222

@@ -46,11 +46,11 @@ Parses a path encoded in [SVG Path Data format](http://www.w3.org/TR/SVG/paths.h
4646
#### Example - Parse an SVG path
4747
<div id="container"></div>
4848
<script>
49-
var d = kendo.dataviz.drawing;
50-
var surface = d.Surface.create($("#container"));
49+
var draw = kendo.dataviz.drawing;
50+
var surface = draw.Surface.create($("#container"));
5151

5252
var svgPath = "M 60,5.5 C 54.204,5.5 49.5,10.204 49.5,16 C 49.5,20.823785 52.753189,24.8962 57.1875,26.125 L 57.1875,30.1875 L 42.28125,30.1875 L 42.28125,35.125 L 57.1875,35.125 L 55.40625,100.3125 L 54.5,100.15625 L 47.46875,98.71875 L 40.8125,96.53125 L 34.78125,93.03125 L 29.1875,88.625 L 33.0625,84.75 L 17.46875,72.34375 L 21.03125,96.78125 L 26.34375,91.8125 L 30.28125,95.5 L 35.78125,100.03125 L 41.75,103.625 L 48.40625,105.875 L 55.40625,107.40625 L 56.125,114.84375 L 63.1875,114.84375 L 63.90625,107.78125 L 69.9375,106.625 L 76.65625,104.4375 L 82.90625,101.03125 L 88.5,96.6875 L 93.6875,91.8125 L 99,97.125 L 102.53125,72.34375 L 86.59375,85.09375 L 90.84375,89 L 89.71875,89.78125 L 83.8125,93.78125 L 77.59375,97.0625 L 70.875,99.1875 L 63.90625,100.6875 L 62.84375,35.125 L 77.75,35.125 L 77.75,30.1875 L 62.5,29.8125 L 62.5,26.1875 C 67.091818,25.066065 70.5,20.935656 70.5,16 C 70.5,10.204 65.796,5.5 60,5.5 z M 60,11 C 62.76,11 65,13.24 65,16 C 65,18.76 62.76,21 60,21 C 57.24,21 55,18.76 55,16 C 55,13.24 57.24,11 60,11 z";
53-
var path = d.Path.parse(svgPath, {
53+
var path = draw.Path.parse(svgPath, {
5454
stroke: {
5555
color: "red",
5656
width: 1
@@ -112,17 +112,17 @@ Closes the path by linking the current end point with the start point.
112112
#### Example - Draw a closed path
113113
<div id="surface" style="width: 250px; height: 250px;"></div>
114114
<script>
115-
var d = kendo.dataviz.drawing;
115+
var draw = kendo.dataviz.drawing;
116116

117-
var path = new d.Path()
117+
var path = new draw.Path()
118118
.moveTo(100, 200)
119119
.curveTo([100, 100], [250, 100], [250, 200]);
120120

121121
// The following commands are interchangable
122122
path.close();
123123
path.lineTo(100, 200);
124124

125-
var surface = d.Surface.create($("#surface"));
125+
var surface = draw.Surface.create($("#surface"));
126126
surface.draw(path);
127127
</script>
128128

@@ -138,14 +138,14 @@ A quadratic Bézier curve (with one control point) can be plotted by making the
138138
#### Example - Draw a curved path
139139
<div id="surface" style="width: 250px; height: 250px;"></div>
140140
<script>
141-
var d = kendo.dataviz.drawing;
141+
var draw = kendo.dataviz.drawing;
142142

143-
var path = new d.Path()
143+
var path = new draw.Path()
144144
.moveTo(100, 200)
145145
.curveTo([100, 100], [250, 100], [250, 200])
146146
.lineTo(100, 200);
147147

148-
var surface = d.Surface.create($("#surface"));
148+
var surface = draw.Surface.create($("#surface"));
149149
surface.draw(path);
150150
</script>
151151

@@ -182,18 +182,18 @@ Draws a straight line to the specified absolute coordinates.
182182
#### Example - Draw a straight path
183183
<div id="surface" style="width: 250px; height: 250px;"></div>
184184
<script>
185-
var d = kendo.dataviz.drawing;
186-
var geo = kendo.dataviz.geometry;
185+
var draw = kendo.dataviz.drawing;
186+
var geom = kendo.dataviz.geometry;
187187

188-
var path = new d.Path()
188+
var path = new draw.Path()
189189
.moveTo(100, 200);
190190

191191
// The following commands are interchangeable
192192
path.lineTo(200, 200);
193193
path.lineTo([200, 200]);
194-
path.lineTo(new geo.Point(200, 200));
194+
path.lineTo(new geom.Point(200, 200));
195195

196-
var surface = d.Surface.create($("#surface"));
196+
var surface = draw.Surface.create($("#surface"));
197197
surface.draw(path);
198198
</script>
199199

@@ -217,19 +217,19 @@ Clears all existing segments and moves the starting point to the specified absol
217217
#### Example - Set the path start coordinates
218218
<div id="surface" style="width: 250px; height: 250px;"></div>
219219
<script>
220-
var d = kendo.dataviz.drawing;
221-
var geo = kendo.dataviz.geometry;
220+
var draw = kendo.dataviz.drawing;
221+
var geom = kendo.dataviz.geometry;
222222

223-
var path = new d.Path();
223+
var path = new draw.Path();
224224

225225
// The following commands are interchangeable
226226
path.moveTo(100, 200);
227227
path.moveTo([100, 200]);
228-
path.moveTo(new geo.Point(100, 200));
228+
path.moveTo(new geom.Point(100, 200));
229229

230230
path.lineTo(200, 200);
231231

232-
var surface = d.Surface.create($("#surface"));
232+
var surface = draw.Surface.create($("#surface"));
233233
surface.draw(path);
234234
</script>
235235

0 commit comments

Comments
 (0)