From 8975453705503dbb26e79f67603670145c154bdd Mon Sep 17 00:00:00 2001 From: Karol Kowalski Date: Wed, 23 Nov 2011 11:36:21 +0000 Subject: [PATCH] completed g.line documentation --- docs/reference.html | 83 ++++++++++++++++++++++++++++++--------------- g.line.js | 47 +++++++++++++++---------- 2 files changed, 84 insertions(+), 46 deletions(-) diff --git a/docs/reference.html b/docs/reference.html index 574b6f0..8d9ac24 100644 --- a/docs/reference.html +++ b/docs/reference.html @@ -1,6 +1,6 @@ -g.Raphaël Reference
  1. Element
  2. Element.blob()
  3. Element.darker()
  4. Element.drop()
  5. Element.flag()
  6. Element.label()
  7. Element.lighter()
  8. Element.popup()
  9. Element.resetBrightness()
  10. Element.tag()
  11. Paper
  12. Paper.blob()
  13. Paper.dotchart()
  14. Paper.drop()
  15. Paper.flag()
  16. Paper.label()
  17. Paper.linechart()
  18. Paper.popup()
  19. Paper.tag()
  20. dotchart
  21. dotchart.axis
  22. dotchart.click()
  23. dotchart.covers
  24. dotchart.each()
  25. dotchart.eachColumn()
  26. dotchart.hover()
  27. dotchart.href()
  28. dotchart.series
  29. g
  30. g.colors
  31. g.shim
  32. g.txtattr
  33. linechart
  34. linechart.axis
  35. linechart.click()
  36. linechart.clickColumn()
  37. linechart.hover()
  38. linechart.hoverColumn()
  39. linechart.hrefColumn()
  40. linechart.lines
  41. linechart.shades
  42. linechart.symbols

g.Raphaël Reference

 Element⚓

+g.Raphaël Reference
  1. Element
  2. Element.blob()
  3. Element.darker()
  4. Element.drop()
  5. Element.flag()
  6. Element.label()
  7. Element.lighter()
  8. Element.popup()
  9. Element.resetBrightness()
  10. Element.tag()
  11. Paper
  12. Paper.blob()
  13. Paper.dotchart()
  14. Paper.drop()
  15. Paper.flag()
  16. Paper.label()
  17. Paper.linechart()
  18. Paper.popup()
  19. Paper.tag()
  20. dotchart
  21. dotchart.axis
  22. dotchart.click()
  23. dotchart.covers
  24. dotchart.each()
  25. dotchart.hover()
  26. dotchart.href()
  27. dotchart.series
  28. g
  29. g.colors
  30. g.shim
  31. g.txtattr
  32. linechart
  33. linechart.axis
  34. linechart.click()
  35. linechart.clickColumn()
  36. linechart.each()
  37. linechart.eachColumn()
  38. linechart.hover()
  39. linechart.hoverColumn()
  40. linechart.hrefColumn()
  41. linechart.lines
  42. linechart.shades
  43. linechart.symbols

g.Raphaël Reference

 Element⚓

 Element.blob(angle, x, y)⚓➭

Puts the context Element in a 'blob' tooltip. Can also be used on sets.

@@ -323,7 +323,7 @@ 

paper.label(50, 50, "$9.99");
-

 Paper.linechart(x, y, width, height, valuesx, valuesy, opts)⚓➭

+

 Paper.linechart(x, y, width, height, valuesx, valuesy, opts)⚓➭

Creates a line chart

Parameters @@ -451,19 +451,6 @@

Conveniece method iterating on every symbol in the chart

Returns: object dotchart object

-

 dotchart.eachColumn(callback, this)⚓➭

-

Parameters -

-
callback
-
function
-
called for every item in dotchart.covers.
-
this
-
object
-
callback is executed in a context of a cover element
-
-

Conveniece method iterating on every symbol in the chart -

-

Returns: object dotchart object

 dotchart.hover(mouseover handler, mouseout handler)⚓➭

Parameters

@@ -512,20 +499,21 @@

 linechart.axis⚓➭

Set containing Elements of the chart axis. The set is populated if 'axis' definition string was passed to Paper.linechart

-

 linechart.click(mouseover handler, mouseout handler)⚓➭

+

 linechart.click(click handler, this)⚓➭

Parameters

-
mouseover handler
-
function
-
handler for the event
-
mouseout handler
+
click handler
function
handler for the event
+
this
+
object
+
callback is executed in a context of a cover element
-

Conveniece method to set up hover-in and hover-out event handlers +

Conveniece method to set up click event handler on the lines of the chart +Use linechart.clickColumn to work with the entire chart area.

Returns: object linechart object

-

 linechart.clickColumn(click handler, this)⚓➭

+

 linechart.clickColumn(click handler, this)⚓➭

Parameters

click handler
@@ -536,9 +524,47 @@
callback is executed in a context of a cover element

Conveniece method to set up click event handler on the antire area of the chart. +The handler is passed a event object containing

+
  1. {
    1. xnumberx coordinate on all lines in the chart +
    2. yarrayy coordinates of all lines corresponding to the x +
  2. }

Returns: object linechart object

-

 linechart.hover(mouseover handler, mouseout handler)⚓➭

+

 linechart.each(callback, this)⚓➭

+

Parameters +

+
callback
+
function
+
function executed for every data point
+
this
+
object
+
context of the callback function.
+
+
  1. {
    1. xnumberx coordinate of the data point +
    2. ynumbery coordinate of the data point +
    3. valuenumbervalue represented by the data point +
  2. }
+

Iterates over each unique data point plotted on every line on the chart. +

+

Returns: object linechart object

+

 linechart.eachColumn(callback, this)⚓➭

+

Parameters +

+
callback
+
function
+
function executed for every column
+
this
+
object
+
context of the callback function.
+
+
  1. {
    1. xnumberx coordinate of the data point +
    2. yarrayy coordinates of data points existing for the given x +
    3. valuesarrayvalues represented by the data points existing for the given x +
  2. }
+

Iterates over each column area (area plotted above the chart). +

+

Returns: object linechart object

+

 linechart.hover(mouseover handler, mouseout handler)⚓➭

Parameters

mouseover handler
@@ -548,10 +574,11 @@
function
handler for the event
-

Conveniece method to set up hover-in and hover-out event handlers +

Conveniece method to set up hover-in and hover-out event handlers working on the lines of the chart. +Use linechart.hoverColumn to work with the entire chart area.

Returns: object linechart object

-

 linechart.hoverColumn(mouseover handler, mouseout handler, this)⚓➭

+

 linechart.hoverColumn(mouseover handler, mouseout handler, this)⚓➭

Parameters

mouseover handler
@@ -571,14 +598,14 @@
  • yarrayy coordinates of all lines corresponding to the x
  • }

    • Returns: object linechart object

    -

     linechart.hrefColumn(cols)⚓➭

    +

     linechart.hrefColumn(cols)⚓➭

    Parameters

    cols
    object
    -
    object
    +
    object containing values as keys and URLs as values, e.g. {1: 'http://www.raphaeljs.com', 2: 'http://g.raphaeljs.com'}
    -

    Conveniece method to set up click event handler +

    Creates click-throughs on the whole area of the chart corresponding to x values

    Returns: object linechart object

     linechart.lines⚓➭

    diff --git a/g.line.js b/g.line.js index 916458b..b475dff 100644 --- a/g.line.js +++ b/g.line.js @@ -269,8 +269,7 @@ var X = x + gutter + ((valuesx[i] || valuesx[0])[j] - minx) * kx, nearX = x + gutter + ((valuesx[i] || valuesx[0])[j ? j - 1 : 1] - minx) * kx, Y = y + height - gutter - (valuesy[i][j] - miny) * ky; - - f ? (C = {}) : cvrs.push(C = paper.circle(X, Y, Math.abs(nearX - X) / 2).attr({ stroke: "none", fill: "#000", opacity: 0 })); + f ? (C = {}) : cvrs.push(C = paper.circle(X, Y, Math.abs(nearX - X) / 2).attr({ stroke: "#000", fill: "#000", opacity: 1 })); C.x = X; C.y = Y; C.value = valuesy[i][j]; @@ -340,8 +339,8 @@ * linechart.hrefColumn [ method ] > Parameters - - cols (object) object - * Conveniece method to set up click event handler + - cols (object) object containing values as keys and URLs as values, e.g. {1: 'http://www.raphaeljs.com', 2: 'http://g.raphaeljs.com'} + * Creates click-throughs on the whole area of the chart corresponding to x values = (object) @linechart object ** \*/ @@ -371,7 +370,8 @@ > Parameters - mouseover handler (function) handler for the event - mouseout handler (function) handler for the event - * Conveniece method to set up hover-in and hover-out event handlers working on the line area only (use @linechart.hoverColumn) + * Conveniece method to set up hover-in and hover-out event handlers working on the lines of the chart. + * Use @linechart.hoverColumn to work with the entire chart area. = (object) @linechart object ** \*/ @@ -385,9 +385,10 @@ * linechart.click [ method ] > Parameters - - mouseover handler (function) handler for the event - - mouseout handler (function) handler for the event - * Conveniece method to set up hover-in and hover-out event handlers + - click handler (function) handler for the event + - this (object) callback is executed in a context of a cover element + * Conveniece method to set up click event handler on the lines of the chart + * Use @linechart.clickColumn to work with the entire chart area. = (object) @linechart object ** \*/ @@ -398,13 +399,18 @@ }; /*\ - * dotchart.each + * linechart.each [ method ] > Parameters - - callback (function) called for every item in @dotchart.covers. - - this (object) callback is executed in a context of a cover element - * Conveniece method iterating on every symbol in the chart - = (object) @dotchart object + - callback (function) function executed for every data point + - this (object) context of the callback function. + o { + o x (number) x coordinate of the data point + o y (number) y coordinate of the data point + o value (number) value represented by the data point + o } + * Iterates over each unique data point plotted on every line on the chart. + = (object) @linechart object ** \*/ chart.each = function (f) { @@ -413,13 +419,18 @@ }; /*\ - * dotchart.eachColumn + * linechart.eachColumn [ method ] > Parameters - - callback (function) called for every item in @dotchart.covers. - - this (object) callback is executed in a context of a cover element - * Conveniece method iterating on every symbol in the chart - = (object) @dotchart object + - callback (function) function executed for every column + - this (object) context of the callback function. + o { + o x (number) x coordinate of the data point + o y (array) y coordinates of data points existing for the given x + o values (array) values represented by the data points existing for the given x + o } + * Iterates over each column area (area plotted above the chart). + = (object) @linechart object ** \*/ chart.eachColumn = function (f) {