Add a simple demo as a self-contained example
[dygraphs.git] / dygraph-options-reference.js
index 7f16cf2..cb8b767 100644 (file)
@@ -41,13 +41,36 @@ Dygraph.OPTIONS_REFERENCE =  // <JSON>
     "default": "false",
     "labels": ["Data Line display"],
     "type": "boolean",
-    "description": "Draw a small dot at each point, in addition to a line going through the point. This makes the individual data points easier to see, but can increase visual clutter in the chart."
+    "description": "Draw a small dot at each point, in addition to a line going through \
+        the point. This makes the individual data points easier to see, but  \
+        can increase visual clutter in the chart. The small dot can be \
+        replaced with a custom rendering by supplying a \
+        <a href='#drawPointCallback'>drawPointCallback</a>."
+  },
+  "drawPointCallback": {
+    "default": "null",
+    "labels": ["Data Line display"],
+    "type": "function(g, seriesName, canvasContext, cx, cy, color, pointSize)",
+    "parameters": [
+      [ "g" , "the reference graph" ],
+      [ "seriesName" , "the name of the series" ],
+      [ "canvasContext" , "the canvas to draw on" ],
+      [ "cx" , "center x coordinate" ],
+      [ "cy" , "center y coordinate" ],
+      [ "color" , "series color" ],
+      [ "pointSize" , "the radius of the image." ]
+    ],
+    "description": "Draw a custom item when drawPoints is enabled. \
+        Default is a small dot matching the series color. This method \
+        should constrain drawing to within pointSize pixels from (cx, cy). \
+        Also see <a href='#drawHighlightPointCallback'>drawHighlightPointCallback</a>"
   },
   "height": {
     "default": "320",
     "labels": ["Overall display"],
     "type": "integer",
-    "description": "Height, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."
+    "description": "Height, in pixels, of the chart. If the container div has \
+      been explicitly sized, this will be ignored."
   },
   "zoomCallback": {
     "default": "null",
@@ -58,7 +81,8 @@ Dygraph.OPTIONS_REFERENCE =  // <JSON>
       [ "maxDate" , "milliseconds since epoch." ],
       [ "yRanges" , "is an array of [bottom, top] pairs, one for each y-axis." ]
     ],
-    "description": "A function to call when the zoom window is changed (either by zooming in or out)."
+    "description": "A function to call when the zoom window is changed (either \
+      by zooming in or out)."
   },
   "pointClickCallback": {
     "snippet": "function(e, point){<br>&nbsp;&nbsp;alert(point);<br>}",
@@ -87,15 +111,46 @@ Dygraph.OPTIONS_REFERENCE =  // <JSON>
   "highlightCallback": {
     "default": "null",
     "labels": ["Callbacks"],
-    "type": "function(event, x, points, row)",
+    "type": "function(event, x, points, row, seriesName)",
     "description": "When set, this callback gets called every time a new point is highlighted.",
     "parameters": [
       ["event", "the JavaScript mousemove event"],
       ["x", "the x-coordinate of the highlighted points"],
       ["points", "an array of highlighted points: <code>[ {name: 'series', yval: y-value}, &hellip; ]</code>"],
-      ["row", "???"]
+      ["row", "integer index of the highlighted row in the data table, starting from 0"],
+      ["seriesName", "name of the highlighted series, only present if highlightSeriesOpts is set."]
     ]
   },
+  "drawHighlightPointCallback": {
+    "default": "null",
+    "labels": ["Data Line display"],
+    "type": "function(g, seriesName, canvasContext, cx, cy, color, pointSize)",
+    "parameters": [
+      [ "g" , "the reference graph" ],
+      [ "seriesName" , "the name of the series" ],
+      [ "canvasContext" , "the canvas to draw on" ],
+      [ "cx" , "center x coordinate" ],
+      [ "cy" , "center y coordinate" ],
+      [ "color" , "series color" ],
+      [ "pointSize" , "the radius of the image." ]
+    ],
+    "description": "Draw a custom item when a point is highlighted. \
+        Default is a small dot matching the series color. This method \
+        should constrain drawing to within pointSize pixels from (cx, cy) \
+        Also see <a href='#drawPointCallback'>drawPointCallback</a>"
+  },
+  "highlightSeriesOpts": {
+    "default": "null",
+    "labels": ["Interactive Elements"],
+    "type": "Object",
+    "description": "When set, the options from this object are applied to the timeseries closest to the mouse pointer for interactive highlighting. See also 'highlightCallback'. Example: highlightSeriesOpts: { strokeWidth: 3 }."
+  },
+  "highlightSeriesBackgroundAlpha": {
+    "default": "0.5",
+    "labels": ["Interactive Elements"],
+    "type": "float",
+    "description": "Fade the background while highlighting series. 1=fully visible background (disable fading), 0=hiddden background (show highlighted series only)."
+  },
   "includeZero": {
     "default": "false",
     "labels": ["Axis display"],
@@ -312,7 +367,7 @@ Dygraph.OPTIONS_REFERENCE =  // <JSON>
   "strokeWidth": {
     "default": "1.0",
     "labels": ["Data Line display"],
-    "type": "integer",
+    "type": "float",
     "example": "0.5, 2.0",
     "description": "The width of the lines connecting data points. This can be used to increase the contrast or some graphs."
   },
@@ -323,6 +378,20 @@ Dygraph.OPTIONS_REFERENCE =  // <JSON>
     "example": "[10, 2, 5, 2]",
     "description": "A custom pattern array where the even index is a draw and odd is a space in pixels. If null then it draws a solid line. The array should have a even length as any odd lengthed array could be expressed as a smaller even length array."
   },
+  "strokeBorderWidth": {
+    "default": "null",
+    "labels": ["Data Line display"],
+    "type": "float",
+    "example": "1.0",
+    "description": "Draw a border around graph lines to make crossing lines more easily distinguishable. Useful for graphs with many lines."
+  },
+  "strokeBorderColor": {
+    "default": "white",
+    "labels": ["Data Line display"],
+    "type": "string",
+    "example": "red, #ccffdd",
+    "description": "Color for the line border used if strokeBorderWidth is set."
+  },
   "wilsonInterval": {
     "default": "true",
     "labels": ["Error Bars"],