X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=docs%2Findex.html;h=43695889ec96fe02e83bb2268e818808181e4d00;hb=5ed061d6e6208d1b3f05a0ccd2010c6ce087b674;hp=c8ac16f765dfbb6074192c94668633e11f0fafd0;hpb=939ecc4605ac1957167292d7977099207e0b7077;p=dygraphs.git diff --git a/docs/index.html b/docs/index.html index c8ac16f..4369588 100644 --- a/docs/index.html +++ b/docs/index.html @@ -19,6 +19,7 @@
  • Baseball chart
  • Stock chart
  • Options Reference
    • +
  • GWT Compatibility
  • Data Policy
    • @@ -57,7 +58,8 @@
  • Negative Numbers
  • Noisy Data
  • Multiple Series
    • -
  • Custom Underlay / background
    • +
  • Custom Underlay / background
    • +
  • Tests for zoom operations
    • @@ -71,7 +73,7 @@

    A demo is worth a thousand words:

    -

    (Mouse over to highlight individual values. Click and drag to zoom. Double-click to zoom back out. Change the number and hit enter to adjust the averaging period.)

    +

    (Mouse over to highlight individual values. Click and drag to zoom in both axes. Double-click to zoom back out. Change the number and hit enter to adjust the averaging period.)

    Temperatures in New York vs. San Francisco
    @@ -112,7 +114,7 @@
  • Lightweight (45kb) and responsive
  • Displays values on mouseover (this makes it easily discoverable)
  • Supports error bands around data series
    • -
  • Interactive zoom
    • +
  • Interactive zoom and pan
  • Adjustable averaging period
  • Can intelligently chart fractions
  • Customizable click-through actions
    • @@ -474,7 +476,7 @@ perl -ne 'BEGIN{print "Month,Nominal,Real\n"} chomp; ($m,$cpi,$low,$close,$high)

    Other Options

    -

    These are the options that can be passed in through the optional third parameter of the Dygraph constructor. To see demonstrations of many of these options, browse the dygraphs tests directory.

    +

    These are the options that can be passed in through the optional third parameter of the Dygraph constructor. Under each option is a set of links to tests which demonstrate its use. While we attempt to keep this list up-to-date, a more complete list can be found in the Dygraph.DEFAULT_ATTRS map in dygraph.js and the this.options map in dygraph-canvas.js.

    @@ -507,7 +509,7 @@ perl -ne 'BEGIN{print "Month,Nominal,Real\n"} chomp; ($m,$cpi,$low,$close,$high) @@ -564,10 +566,10 @@ perl -ne 'BEGIN{print "Month,Nominal,Real\n"} chomp; ($m,$cpi,$low,$close,$high) - + - @@ -603,10 +605,18 @@ perl -ne 'BEGIN{print "Month,Nominal,Real\n"} chomp; ($m,$cpi,$low,$close,$high) - + - + + + + + + @@ -699,6 +709,13 @@ perl -ne 'BEGIN{print "Month,Nominal,Real\n"} chomp; ($m,$cpi,$low,$close,$high) + + + + + @@ -746,6 +763,65 @@ perl -ne 'BEGIN{print "Month,Nominal,Real\n"} chomp; ($m,$cpi,$low,$close,$high)
    Tests: custom-bars zero-series
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    boolean false If the rolling average period text box should be shown. -
    Tests: callback crosshair fractions isolated-points numeric-gviz underlay-callback
    +
    Tests: callback crosshair fractions isolated-points numeric-gviz underlay-callback highlighted-region
    zoomCallbackfunction(minDate,
    maxDate){}    		function(minDate,
    maxDate,
    minValue,
    maxValue){}    		 nullA function to call when the zoom window is changed (either by zooming in or out). minDate and maxDate are milliseconds since epoch. -
    Tests: callback
    +     		A function to call when the zoom window is changed (either by zooming in or out). minDate and maxDate are milliseconds since epoch. minValue and maxValue are y-axis range values. +
    Tests: callback zoom
    labelsDivdocument.
    getElementById('foo')    		document.getElementById('foo')
    or
    'foo'    		 nullShow data labels in an external div, rather than on the graph. -
    Tests: demo label-div
    +     		Show data labels in an external div, rather than on the graph. This value can either be a div element or a div id. +
    Tests: label-div
    +
    labelsShowZeroValuesbooleantrueShow zero value labels in the labelsDiv. +
    Tests: label-div
    xAxisLabelFormatterfunction(date, granularity)Dygraph.dateAxisFormatterFunction to call to format values along the x axis. +
    Tests: xAxisLabelFormatter
    +
    rightGap integer
    drawCallbackfunction(dygraph, is_initial)nullWhen set, this callback gets called every time the dygraph is drawn. This includes the initial draw, after zooming and repeatedly while panning. The first parameter is the dygraph being drawn. The second is a boolean value indicating whether this is the initial draw. +
    Tests: callback synchronize
    +
    gridLineColorred, bluergb(128,128,128)The color of the gridlines. +
    Tests: grid_dot
    +
    highlightCallbackfunction(event, x, points)nullWhen set, this callback gets called every time a new point is highlighted. The parameters are the JavaScript mousemove event, the x-coordinate of the highlighted points and an array of highlighted points: [ {name: 'series', yval: y-value}, … ] +
    Tests: callback crosshair
    +
    unhighlightCallbackfunction(event)nullWhen set, this callback gets called every time the user stops highlighting any point by mousing out of the graph. The parameter is the mouseout event. +
    Tests: callback crosshair
    +
    strokeWidth0.5, 2.01.0The width of the lines connecting data points. +
    Tests: grid_dot
    +
    widthinteger480Width/Height (in pixels) of the chart. If the container div has been explicitly sized, these attributes will be ignored. +
    Tests: demo link-interaction no-range
    +
    height320
    @@ -762,6 +838,26 @@ perl -ne 'BEGIN{print "Month,Nominal,Real\n"} chomp; ($m,$cpi,$low,$close,$high)
  • Make sure you don't have any trailing commas in your call to the Dygraph constructor or in the options parameter. Firefox, Chrome and Safari ignore these but they can cause a graph to not display in Internet Explorer.
    • +

    GWT Compatibility

    +

    There is currently no GWT wrapper around Dygraphs, however there is a class that can be used to easily load Dygraphs into the browser. To use it, include the generated dygraph-gwt.jar file in your classpath and add the following line to your GWT module:

    + +
    +<inherits name="org.danvk.dygraphs"/>    
+
    + +

    Call org.danvk.Dygraphs.install() when your application starts to install the JavaScript code into the browser. You can use JSNI to call Dygraphs from your GWT code, as in the example below. The example uses the Visualization API for GWT and the Dygraphs GViz API.

    + +
    +  public static native JavaScriptObject drawDygraph(Element element, DataTable dataTable, double minY, double maxY) /*-{
+    var chart = new $wnd.Dygraph.GVizChart(element);
+    chart.draw(dataTable,
+      {
+        valueRange: [minY, maxY]
+      });
+    return chart;
+  }-*/;
+
    +

    Data Policy

    dygraphs is purely client-side JavaScript. It does not send your data to any servers – the data is processed entirely in the client's browser.