Permalink
Browse files

updated dotchart docs, added some simple examples

  • Loading branch information...
1 parent 480a57c commit 24dbed4b9b0e1d270ddc429c65b4f267c3d36b4b Kenny Shen committed Sep 5, 2010
View
@@ -26,4 +26,106 @@ Creates a dot chart.
**7. size** array of numbers **Values for dot data.**
-**8. opts** object **Options (more info soon.)**
+**8. opts** object **Options (more info soon.)**
+
+_opts_
+
+**symbol**
+
+Values are,
+
+_(shorthand: full name)_
+
+ + o: "disc"
+ + f: "flower"
+ + d: "diamond"
+ + s: "square"
+ + t: "triangle"
+ + *: "star"
+ + x: "cross"
+ + +: "plus"
+ + ->: "arrow"
+
+If omitted, an empty "" is assigned to indicate no symbols.
+
+**max**
+
+Value - number. If omitted, this defaults to 100. This sets the max radius for the maximum value of your dot.
+
+**href**
+
+Value - array of links(string). This is positional and will be mapped from left to right. For example, if you supply 'href:["http://www.google.com","http://www.yahoo.com"]' and you have 4 dots, the links will be applied to the first two.
+
+**axis**
+
+Value - "_top_ _right_ _bottom_ _left_". If omitted, no axis will be rendered for the line chart. For example, if you wanted axis rendered for the left and bottom, (as in a typical x-y chart), you'll add 'axis:"0 0 1 1"' to opts. The axis is created using g.axis (for more information, see the g documentation).
+
+**axisxlabels**
+
+Value - array of labels.
+
+**axisylabels**
+
+Value - array of labels(string).
+
+**axisxstep**
+
+Value - number. Sets the stepping for the x-axis.
+
+**axisystep**
+
+Value - number. Sets the stepping for the y-axis.
+
+**heat**
+
+Value - boolean. If omitted, defaults to false. Sets a spectrum of color based on your values evenly across the dots.
+
+## Methods ##
+
+**1. .hover(fin, fout)** - fin/fout: **callbacks to trigger when mouse hovers in and out respectively over the dots.**
+
+**2. .click(f)** - f: **callback to trigger on click event.**
+
+**3. .each(f)** - f: **callback applied to each iteration.**
+
+## Usage ##
+
+Create a Raphael instance,
+
+
+ // bare bones
+ var r = Raphael();
+ // create at top left corner of #element
+ var r = Raphael('dot-chart');
+
+
+Create a dot chart,
+
+
+ // bare bones
+ var dotchart = r.g.dotchart(_params);
+ // example
+ var dotchart = r.g.dotchart(10,10,300,220,[5,10,15,20,25],[220,220,220,220,220],[1,2,3,4,5], {max:10});
+
+
+Create labels,
+
+
+ // example
+ var axisx = ["dot1","dot2","dot3","dot4","dot5"]
+ r.g.dotchart(10,10,300,220,[5,10,15,20,25],[220,220,220,220,220],[1,2,3,4,5], {max:10, axis: "0 0 1 0", axisxlabels: axisx, axisxstep: 4, heat: true});
+
+
+Attach click event to dotchart,
+
+
+ // example
+ var dots = r.g.dotchart(10,10,300,220,[5,10,15,20,25],[220,220,220,220,220],[1,2,3,4,5], {max:10, href: ["http://www.google.com","http://www.yahoo.com",,,"http://www.raphaeljs.com"]});
+ dots.each(function() {
+ this.click(function() {
+ // alerts href, if defined
+ alert(this.attrs.href);
+ });
+ });
+
+## Others ##
View
@@ -1,4 +1,4 @@
# g.raphael.js #
-## Methods ##
+_in progress_
View
@@ -77,8 +77,6 @@ Values are,
}
-
-
## Usage ##
Create a Raphael instance,
@@ -0,0 +1,28 @@
+<html>
+ <head>
+ <title>gRaphaël Line Chart - a simple dot chart example with hyperlinks</title>
+ <script type="text/javascript" src="../raphael-min.js"></script>
+ <script type="text/javascript" src="../../g.raphael-min.js"></script>
+ <script type="text/javascript" src="../../g.dot-min.js"></script>
+ <script type="text/javascript">
+ window.onload = function() {
+ // Creates canvas 640 × 480 at 10, 50
+ var r = Raphael(10, 50, 640, 480);
+
+ // Creates a simple dot chart at 10, 10
+ // width 300, height 220
+ // x-values: [5,10,15,20,25], y-values: [220,220,220,220,220]
+ // size: [1,2,3,4,5]
+ // attach links to the first 2 dots, and the last dot.
+ var dots = r.g.dotchart(10,10,300,220,[5,10,15,20,25],[220,220,220,220,220],[1,2,3,4,5], {max:10, href: ["http://www.google.com","http://www.yahoo.com",,,"http://www.raphaeljs.com"]});
+ dots.each(function() {
+ this.click(function() {
+ alert(this.attrs.href);
+ });
+ });
+ }
+ </script>
+ </head>
+ <body>
+ </body>
+</html>
@@ -0,0 +1,23 @@
+<html>
+ <head>
+ <title>gRaphaël Line Chart - a labelled dot chart example</title>
+ <script type="text/javascript" src="../raphael-min.js"></script>
+ <script type="text/javascript" src="../../g.raphael-min.js"></script>
+ <script type="text/javascript" src="../../g.dot-min.js"></script>
+ <script type="text/javascript">
+ window.onload = function() {
+ // Creates canvas 640 × 480 at 10, 50
+ var r = Raphael(10, 50, 640, 480);
+
+ // Creates a simple dot chart at 10, 10
+ // width 300, height 220
+ // x-values: [5,10,15,20,25], y-values: [220,220,220,220,220]
+ // size: [1,2,3,4,5]
+ var axisx = ["dot1","dot2","dot3","dot4","dot5"]
+ r.g.dotchart(10,10,300,220,[5,10,15,20,25],[220,220,220,220,220],[1,2,3,4,5], {max:10, axis: "0 0 1 0", axisxlabels: axisx, axisxstep: 4, heat: true});
+ }
+ </script>
+ </head>
+ <body>
+ </body>
+</html>
@@ -0,0 +1,22 @@
+<html>
+ <head>
+ <title>gRaphaël Line Chart - customised symbol dot chart example</title>
+ <script type="text/javascript" src="../raphael-min.js"></script>
+ <script type="text/javascript" src="../../g.raphael-min.js"></script>
+ <script type="text/javascript" src="../../g.dot-min.js"></script>
+ <script type="text/javascript">
+ window.onload = function() {
+ // Creates canvas 640 × 480 at 10, 50
+ var r = Raphael(10, 50, 640, 480);
+
+ // Creates a simple dot chart at 10, 10
+ // width 300, height 220
+ // x-values: [5,10,15,20,25], y-values: [220,220,220,220,220]
+ // size: [1,2,3,4,5]
+ r.g.dotchart(10,10,300,220,[5,10,15,20,25],[220,220,220,220,220],[1,2,3,4,5], {max:10, symbol:'*'});
+ }
+ </script>
+ </head>
+ <body>
+ </body>
+</html>

0 comments on commit 24dbed4

Please sign in to comment.