Merge commit 'dd04c360082eb7e0c54425907224ecf692307906' into update_visjs_again

2026-07-28 16:04:35 +02:00 · 2016-02-17 11:57:17 -07:00
parent 101354e3db dd04c36008
commit da7b9f7246
134 changed files with 19644 additions and 12155 deletions
@@ -145,7 +145,6 @@

    <h2 id="Contents">Contents</h2>
    <ul>
-        <li><a href="#Overview">Overview</a></li>
        <li><a href="#Data_Format">Data Format</a>
            <ul>
                <li><a href="#items">Items</a></li>
@@ -161,8 +160,8 @@
        <li><a href="#Methods">Methods</a></li>
        <li><a href="#Events">Events</a></li>
        <li><a href="#Localization">Localization</a></li>
+        <li><a href="#Time_zone">Time zone</a></li>
        <li><a href="#Styles">Styles</a></li>
-        <li><a href="#Data_Policy">Data Policy</a></li>
    </ul>


@@ -227,7 +226,7 @@
            Options is a name-value map in the JSON format. The available options
            are described in section <a href="#Configuration_Options">Configuration Options</a>.
            Groups is a vis <code>DataSet</code> containing groups. The available options and the method of construction
-            are described in section <a href="#Group_Options">Data Format</a>.
+            are described in section <a href="#Data_Format">Data Format</a>.
        </p>
        <pre class="prettyprint lang-js options">var graph = new vis.Graph2d(container [, data] [, groups] [, options]);</pre>
        For backwards compatibility, groups and options can be interchanged.
@@ -245,10 +244,8 @@

    <h2 id="Data_Format">Data Format</h2>
    <p>
-        Graph2d can load data from an <code>Array</code>, a <code>DataSet</code> or a <code>DataView</code>.
+        Graph2d can load data from an <code>Array</code>, a <code>DataSet</code> (offering 2 way data binding), or a <code>DataView</code> (offering one way data binding).
        Objects are added to this DataSet by using the <code>add()</code> function.
-        Data points must have properties <code>x</code>, <code>y</code>, and <code>z</code>,
-        and can optionally have a property <code>style</code> and <code>filter</code>.
    <p>
        Graph2d can be provided with two types of data:
    </p>
@@ -384,8 +381,8 @@ groups.add({
        <tr>
            <td>visible</td>
            <td>Boolean</td>
-            <td>true</td>
-            <td>This field is optional. If false, this group will not be drawn.
+            <td>no</td>
+            <td>This field is optional. If false, this group will not be drawn. By default it is true.
        </tr>
    </table>

@@ -437,7 +434,7 @@ var options = {
            <td class="greenField indent">barChart.sideBySide</td>
            <td>Boolean</td>
            <td>false</td>
-            <td>If two datapoints of a barchart overlap, they are drawn over eachother by default. If sideBySide is set to true, they will be drawn side by side.
+            <td>If two datapoints of a barchart overlap, they are drawn over eachother by default. If sideBySide is set to true, they will be drawn side by side, within the same width as a single bar..
                See <a href="../../examples/graph2d/10_barsSideBySide.html">example 10</a> for more information.
                When using groups, see <a href="../../examples/graph2d/11_barsSideBySideGroups.html">example 11</a>.
            </td>
@@ -448,7 +445,12 @@ var options = {
            <td>50</td>
            <td>The width of the bars.</td>
        </tr>
-
+        <tr parent="barChart" class="hidden">
+            <td class="greenField indent">barChart.minWidth</td>
+            <td>Number</td>
+            <td></td>
+            <td>The minimum width of the bars in pixels: by default the bars get smaller while zooming out to prevent overlap, this value is the minimum width of the bar. Default behavior (when minWidth is not set) is 10% of the bar width.</td>
+        </tr>
        <tr class='toggle collapsible' onclick="toggleTable('g2dOptions','dataAxis', this);">
            <td><span parent="dataAxis" class="right-caret"></span> dataAxis</td>
            <td>Object</td>
@@ -473,12 +475,11 @@ var options = {
            <td>Function</td>
            <td></td>
            <td>Insert a custom function on how to format the label. The function will receive a numeric value and has to return a string. Default function is:
-            <pre class="code">
+            <pre class="prettyprint lang-js">
 function (value) {
-  return value;
-}
-            </pre>
-            which does nothing to it.</td>
+  return ''+value.toPrecision(3);
+}</pre>
+            </td>
        </tr>
        <tr parent="dataAxis" class="hidden">
            <td class="indent2">dataAxis.left.range.min</td>
@@ -579,7 +580,7 @@ drawPoints: {
            
            3. <code>Function</code>: If a function is provided it will be used as a callback. The function may return values from listing 1 or 2.<br />
            <pre class="prettyprint lang-js">
-drawPoints: function(item, group, graph2d) {
+drawPoints: function(item, group) {
  ...
 }
            </pre>
@@ -718,6 +719,14 @@ onRender: function(item, group, graph2d) {
            <td>'top-right'</td>
            <td>Determine the position of the legend coupled to the right axis. Options are 'top-left', 'top-right', 'bottom-left' or 'bottom-right'.</td>
        </tr>
+
+        <tr>
+            <td>moment</td>
+            <td>function</td>
+            <td>vis.moment</td>
+            <td>A constructor for creating a moment.js Date. Allows for applying a custom time zone. See section <a href="#Time_zone">Time zone</a> for more information.</td>
+        </tr>
+
        <tr>
            <td class="greenField">sampling</td>
            <td>Boolean</td>
@@ -736,7 +745,7 @@ onRender: function(item, group, graph2d) {
            <td>stack</td>
            <td>Boolean</td>
            <td>true</td>
-            <td>If stack is enabled, the graphs will be stacked upon eachother when applicable. This currently only works with bar graphs but linegraph support is being worked on.</td>
+            <td>If stack is enabled, the graphs will be stacked upon each-other when applicable. A group can opt-out of stacking through the "excludeFromStacking" option.</td>
        </tr>
        <tr class='toggle collapsible' onclick="toggleTable('g2dOptions','shaded', this);">
            <td class="greenField"><span parent="shaded" class="right-caret"></span> shaded</td>
@@ -754,7 +763,17 @@ onRender: function(item, group, graph2d) {
            <td class="greenField indent">shaded.orientation</td>
            <td>String</td>
            <td>'bottom'</td>
-            <td>This determines if the shaded area is at the bottom or at the top of the curve. The options are 'bottom' or 'top'.</td>
+            <td>This determines if the shaded area is at the bottom or at the top of the curve, or always towards the zero-axis of the graph.
+                The options are 'zero', 'bottom', 'top', or the special case of 'group'. If group is chosen, the option groupId is required.
+                See <a href="../../examples/graph2d/20_shading.html">Example 20</a> what these options look like.
+            </td>
+        </tr>
+        <tr parent="shaded" class="hidden">
+            <td class="greenField indent">shaded.groupId</td>
+            <td>String</td>
+            <td>undefined</td>
+            <td>The id of the group which should be used as the other shading limit.
+            </td>
        </tr>
        <tr parent="shaded" class="hidden">
            <td class="greenField indent">shaded.style</td>
@@ -775,6 +794,18 @@ onRender: function(item, group, graph2d) {
            <td>This defines with which axis, left or right, the graph is coupled. <a href="../../examples/graph2d/05_bothAxis.html">Example 5</a> shows groups with different Y axis. If no groups are coupled
                with an axis, it will not be shown.</td>
        </tr>
+        <tr>
+            <td class="greenField">excludeFromLegend</td>
+            <td>Boolean</td>
+            <td>false</td>
+            <td>Group option only. Excludes the group from being listed in the legend.</td>
+        </tr>
+        <tr>
+            <td class="greenField">excludeFromStacking</td>
+            <td>Boolean</td>
+            <td>false</td>
+            <td>Group option only. Excludes the group from being included in the stacking.</td>
+        </tr>
    </table>

    <h3 id="timelineOptions">Timeline Options</h3>
@@ -888,14 +919,14 @@ function (option, path) {
            <td>locale</td>
            <td>String</td>
            <td>none</td>
-            <td>Select a locale for the Graph2d. See section <a href="timeline.html#Localization">Localization</a> for more information.</td>
+            <td>Select a locale for the Graph2d. See section <a href="#Localization">Localization</a> for more information.</td>
        </tr>

        <tr>
            <td>locales</td>
            <td>Object</td>
            <td>none</td>
-            <td>A map with i18n locales. See section <a href="timeline.html#Localization">Localization</a> for more information.</td>
+            <td>A map with i18n locales. See section <a href="#Localization">Localization</a> for more information.</td>
        </tr>

        <tr>
@@ -914,6 +945,16 @@ function (option, path) {
            <td>Specifies the maximum height for the Timeline. Can be a number in pixels or a string like "300px".</td>
        </tr>

+        <tr>
+            <td>maxMinorChars</td>
+            <td>number</td>
+            <td>7</td>
+            <td>
+                Specifies the maximum number of characters that should fit in minor grid labels.
+                If larger, less and wider grids will be drawn.
+            </td>
+        </tr>
+
        <tr>
            <td>min</td>
            <td>Date or Number or String</td>
@@ -984,22 +1025,6 @@ function (option, path) {
                visible.</td>
        </tr>

-        <tr>
-            <td>showMajorLines</td>
-            <td>Boolean</td>
-            <td>true</td>
-            <td>By default, the timeline shows both minor and major date lines on the
-                time axis. You can use this option to hide the lines from the major dates.
-        </tr>
-
-        <tr>
-            <td>showMinorLines</td>
-            <td>Boolean</td>
-            <td>true</td>
-            <td>By default, the timeline shows both minor and major date lines on the
-                time axis. You can use this option to hide the lines from the minor dates.
-        </tr>
-
        <tr>
            <td>start</td>
            <td>Date or Number or String</td>
@@ -1310,16 +1335,14 @@ Graph2d.off('rangechanged', onChange);
            <td>Fired when double clicked inside the Graph2d.
            </td>
        </tr>
-
        <tr>
-            <td>finishedRedraw</td>
+            <td>changed</td>
            <td>
-                none.
+                Has no properties.
            </td>
-            <td>Fired after a redraw is complete. When moving the Graph2d around, this could be fired frequently.
+            <td>Fired once after each graph redraw.
            </td>
        </tr>
-
        <tr>
            <td>rangechange</td>
            <td>
@@ -1343,6 +1366,7 @@ Graph2d.off('rangechanged', onChange);
            <td>Fired once after the user has dragged the Graph2d window.
            </td>
        </tr>
+
        <tr>
            <td>timechange</td>
            <td>
@@ -1425,6 +1449,32 @@ Graph2d.off('rangechanged', onChange);
        </tr>
    </table>

+    <h2 id="Time_zone">Time zone</h2>
+    <p>
+        By default, the Timeline displays time in local time. To display a Timeline in an other time zone or in UTC, the date constructor can be overloaded via the configuration option <code>moment</code>, which by default is the constructor function of moment.js. More information about UTC with moment.js can be found in the docs: <a href="http://momentjs.com/docs/#/parsing/utc/">http://momentjs.com/docs/#/parsing/utc/</a>.
+    </p>
+
+    <p>
+        Examples:
+    </p>
+
+<pre class="prettyprint lang-js">// display in UTC
+var options = {
+  moment: function(date) {
+    return vis.moment(date).utc();
+  }
+};
+
+// display in UTC +08:00
+var options = {
+  moment: function(date) {
+    return vis.moment(date).utcOffset('+08:00');
+  }
+};
+</pre>
+
+
+
    <h2 id="Styles">Styles</h2>
    <p>
        All parts of the Graph2d have a class name and a default css style just like the Graph2d.
@@ -1453,4 +1503,4 @@ Graph2d.off('rangechanged', onChange);
 <script src="../js/tipuesearch.config.js"></script>
 <script src="../js/tipuesearch.js"></script>
 <!-- controller -->
-<script src="../js/main.js"></script>
+<script src="../js/main.js"></script>