Browse Source

Mentioned 2 way data binding of DataSet in the Data Format sections in the docs (see #1099)

flowchartTest
jos 9 years ago
parent
commit
fd6b70c1cb
3 changed files with 18 additions and 16 deletions
  1. +2
    -3
      docs/graph2d/index.html
  2. +1
    -1
      docs/graph3d/index.html
  3. +15
    -12
      docs/timeline/index.html

+ 2
- 3
docs/graph2d/index.html View File

@ -145,7 +145,6 @@
<h2 id="Contents">Contents</h2> <h2 id="Contents">Contents</h2>
<ul> <ul>
<li><a href="#Overview">Overview</a></li>
<li><a href="#Data_Format">Data Format</a> <li><a href="#Data_Format">Data Format</a>
<ul> <ul>
<li><a href="#items">Items</a></li> <li><a href="#items">Items</a></li>
@ -227,7 +226,7 @@
Options is a name-value map in the JSON format. The available options Options is a name-value map in the JSON format. The available options
are described in section <a href="#Configuration_Options">Configuration Options</a>. 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 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> </p>
<pre class="prettyprint lang-js options">var graph = new vis.Graph2d(container [, data] [, groups] [, options]);</pre> <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. For backwards compatibility, groups and options can be interchanged.
@ -245,7 +244,7 @@
<h2 id="Data_Format">Data Format</h2> <h2 id="Data_Format">Data Format</h2>
<p> <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. 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>, 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>. and can optionally have a property <code>style</code> and <code>filter</code>.

+ 1
- 1
docs/graph3d/index.html View File

@ -199,7 +199,7 @@
<h2 id="Data_Format">Data Format</h2> <h2 id="Data_Format">Data Format</h2>
<p> <p>
Graph3d can load data from an <code>Array</code>, a <code>DataSet</code> or a <code>DataView</code>.
Graph3d can load data from an <code>Array</code>, a <code>DataSet</code> (offering 2 way data binding), or a <code>DataView</code> (offering 1 way data binding).
JSON objects are added to this DataSet by using the <code>add()</code> function. JSON 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>, 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>. and can optionally have a property <code>style</code> and <code>filter</code>.

+ 15
- 12
docs/timeline/index.html View File

@ -209,19 +209,20 @@
<h3 id="items">Items</h3> <h3 id="items">Items</h3>
<p> <p>
The Timeline uses regular Arrays and Objects as data format.
Data items can contain the properties <code>start</code>,
For items, the Timeline accepts an Array, a DataSet (offering 2 way data binding),
or a DataView (offering 1 way data binding).
Items are regular objects and can contain the properties <code>start</code>,
<code>end</code> (optional), <code>content</code>, <code>end</code> (optional), <code>content</code>,
<code>group</code> (optional), <code>className</code> (optional), <code>group</code> (optional), <code>className</code> (optional),
<code>editable</code> (optional), and <code>style</code> (optional). <code>editable</code> (optional), and <code>style</code> (optional).
</p> </p>
<p> <p>
A table is constructed as:
A DataSet is constructed as:
</p> </p>
<pre class="prettyprint lang-js"> <pre class="prettyprint lang-js">
var items = [
var items = new vis.DataSet([
{ {
start: new Date(2010, 7, 15), start: new Date(2010, 7, 15),
end: new Date(2010, 8, 2), // end is optional end: new Date(2010, 8, 2), // end is optional
@ -343,7 +344,9 @@ var items = [
<h3 id="groups">Groups</h3> <h3 id="groups">Groups</h3>
<p> <p>
Like the items, groups are regular JavaScript Arrays and Objects.
For the items, groups can be an Array, a DataSet (offering 2 way data binding),
or a DataView (offering 1 way data binding).
Using groups, items can be grouped together. Using groups, items can be grouped together.
Items are filtered per group, and displayed as Items are filtered per group, and displayed as
@ -1120,9 +1123,9 @@ document.getElementById('myTimeline').onclick = function (event) {
<td>none</td> <td>none</td>
<td>Set both groups and items at once. Both properties are optional. This is a convenience method for individually calling both <code>setItems(items)</code> and <code>setGroups(groups)</code>. <td>Set both groups and items at once. Both properties are optional. This is a convenience method for individually calling both <code>setItems(items)</code> and <code>setGroups(groups)</code>.
Both <code>items</code> and <code>groups</code> can be an Array with Objects, Both <code>items</code> and <code>groups</code> can be an Array with Objects,
a DataSet, or a DataView. For each of the groups, the items of the
timeline are filtered on the property <code>group</code>, which
must correspond with the id of the group.
a DataSet (offering 2 way data binding), or a DataView (offering 1 way data binding).
For each of the groups, the items of the timeline are filtered on the
property <code>group</code>, which must correspond with the id of the group.
</td> </td>
</tr> </tr>
@ -1131,9 +1134,9 @@ document.getElementById('myTimeline').onclick = function (event) {
<td>none</td> <td>none</td>
<td>Set a data set with groups for the Timeline. <td>Set a data set with groups for the Timeline.
<code>groups</code> can be an Array with Objects, <code>groups</code> can be an Array with Objects,
a DataSet, or a DataView. For each of the groups, the items of the
timeline are filtered on the property <code>group</code>, which
must correspond with the id of the group.
a DataSet (offering 2 way data binding), or a DataView (offering 1 way data binding).
For each of the groups, the items of the timeline are filtered on the
property <code>group</code>, which must correspond with the id of the group.
</td> </td>
</tr> </tr>
@ -1142,7 +1145,7 @@ document.getElementById('myTimeline').onclick = function (event) {
<td>none</td> <td>none</td>
<td>Set a data set with items for the Timeline. <td>Set a data set with items for the Timeline.
<code>items</code> can be an Array with Objects, <code>items</code> can be an Array with Objects,
a DataSet, or a DataView.
a DataSet (offering 2 way data binding), or a DataView (offering 1 way data binding).
</td> </td>
</tr> </tr>

Loading…
Cancel
Save