jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Merge remote-tracking branch 'origin/develop' into develop 

Conflicts:
	HISTORY.md
	docs/graph2d.html
v3_develop
jos 10 years ago
parent
1d21066ee2 1a9b680cd6
commit
c144995289
12 changed files with 24969 additions and 24999 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +7
    -2
      HISTORY.md
  2. +24373
    -24560
      dist/vis.js
  3. +1
    -1
      dist/vis.map
  4. +1
    -1
      dist/vis.min.css
  5. +12
    -12
      dist/vis.min.js
  6. +409
    -408
      docs/graph2d.html
  7. +145
    -0
      examples/graph2d/14_toggleGroups.html
  8. +1
    -0
      examples/graph2d/index.html
  9. +1
    -1
      lib/timeline/Graph2d.js
  10. +4
    -3
      lib/timeline/component/DataAxis.js
  11. +5
    -4
      lib/timeline/component/Legend.js
  12. +10
    -7
      lib/timeline/component/LineGraph.js

+ 7
- 2
HISTORY.md View File

@ -6,6 +6,9 @@ http://visjs.org
### Timeline
- Fixed the `change` event sometimes being fired twice on IE10.
- Fixed canceling moving an item to another group did not move the item
back to the original group.
- Added localization support.
- Implemented option `clickToUse`.
- Implemented function `focus(id)` to center a specific item (or multiple items)
@ -30,12 +33,14 @@ http://visjs.org
### Graph2D
- Added 'allowOverlap' option for barCharts.
- Added two examples showing the two additions above.
- Added 'handleOverlap' to support overlap, sideBySide and stack.
- Added two examples showing the 'handleOverlap' functionality.
- Added 'customRange' for the Y axis and an example showing how it works.
- Added localization support.
- Implemented option `clickToUse`.
- Implemented functions `setCurrentTime(date)` and `getCurrentTime()`.
- Fixed bugs.
- Added groups.visibility functionality and an example showing how it works.
## 2014-08-14, version 3.2.0

+ 24373
- 24560
dist/vis.js
File diff suppressed because it is too large
View File


+ 1
- 1
dist/vis.map
File diff suppressed because it is too large
View File


+ 1
- 1
dist/vis.min.css
File diff suppressed because it is too large
View File


+ 12
- 12
dist/vis.min.js
File diff suppressed because it is too large
View File


+ 409
- 408
docs/graph2d.html View File

@ -179,14 +179,14 @@ var items = [
<h3 id="groups">Groups</h3>
<p>
Like the items, groups are regular JavaScript Arrays and Objects.
Using groups, items can be grouped together.
Items are filtered per group, and displayed as individual graphs. Groups can contain the properties <code>id</code>,
<code>content</code>, <code>className</code> (optional) and <code>options</code> (optional).
Like the items, groups are regular JavaScript Arrays and Objects.
Using groups, items can be grouped together.
Items are filtered per group, and displayed as individual graphs. Groups can contain the properties <code>id</code>,
<code>content</code>, <code>className</code> (optional) and <code>options</code> (optional).
</p>
<p>
Groups can be applied to a timeline using the method <code>setGroups</code>.
A table with groups can be created like:
Groups can be applied to a timeline using the method <code>setGroups</code>.
A table with groups can be created like:
</p>
<pre class="prettyprint lang-js">
@ -270,208 +270,217 @@ var options = {
The options colored in green can also be used as options for the groups. All options are optional.
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td class="greenField">yAxisOrientation</td>
<td>String</td>
<td>'left'</td>
<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>defaultGroup</td>
<td>String</td>
<td>'default'</td>
<td>This is the label for the default, ungrouped items when shown in a legend.</td>
</tr>
<tr>
<td class="greenField">sort</td>
<td>Boolean</td>
<td>true</td>
<td>This determines if the items are sorted automatically.
They are sorted by the x value. If sort is enabled, more optimizations are possible, increasing the performance.</td>
</tr>
<tr>
<td class="greenField">sampling</td>
<td>Boolean</td>
<td>true</td>
<td>If sampling is enabled, Graph2d will automatically determine the amount of points per pixel.
If there are more than 1 point per pixel, not all points will be drawn. Disabling sampling will cause a decrease in performance.</td>
</tr>
<tr>
<td>graphHeight</td>
<td>Number | String</td>
<td>'400px'</td>
<td>This is the height of the graph SVG canvas.
If it is larger than the height of the outer frame, you can drag up and down
the vertical direction as well as the usual horizontal direction.</td>
</tr>
<tr>
<td class="greenField">shaded</td>
<td>Boolean | Object</td>
<td>false</td>
<td>Toggle a shaded area with the default settings.</td>
</tr>
<tr>
<td class="greenField">shaded.enabled</td>
<td>Boolean</td>
<td>false</td>
<td>This toggles the shading.</td>
</tr>
<tr>
<td class="greenField">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>
</tr>
<tr>
<td class="greenField">style</td>
<td>String</td>
<td>'line'</td>
<td>This allows the user to define if this should be a linegraph or a barchart. The options are: 'line' or 'bar'.</td>
</tr>
<tr>
<td class="greenField">barChart.width</td>
<td>Number</td>
<td>50</td>
<td>The width of the bars.</td>
</tr>
<tr>
<td class="greenField">barChart.align</td>
<td>String</td>
<td>'center'</td>
<td>The alignment of the bars with regards to the coordinate. The options are 'left', 'right' or 'center'.</td>
</tr>
<tr>
<td class="greenField">barChart.handleOverlap</td>
<td>String</td>
<td>'overlap'</td>
<td>You can choose how graph2d handles the case where barcharts are occupying the same datapoint. The possible options are:
<code>overlap, sideBySide, stack</code>.
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>
</tr>
<tr>
<td class="greenField">catmullRom</td>
<td>Boolean | Object</td>
<td>true</td>
<td>Toggle the interpolation with the default settings. For more customization use the JSON format.</td>
</tr>
<tr>
<td class="greenField">catmullRom.enabled</td>
<td>Boolean</td>
<td>true</td>
<td>Toggle the interpolation.</td>
</tr>
<tr>
<td class="greenField">catmullRom.parametrization</td>
<td>String</td>
<td>'centripetal'</td>
<td>Define the type of parametrizaion. <a href="../examples/Graph2d/07_scrollingAndSorting.html">Example 7</a> shows the different methods. The options are 'centripetal' (best results), 'chordal' and 'uniform'. Uniform is the computationally cheapest variant.
If catmullRom is disabled, linear interpolation is used.</td>
</tr>
<tr>
<td class="greenField">drawPoints</td>
<td>Boolean | Object</td>
<td>true</td>
<td>Toggle the drawing of the datapoints with the default settings.</td>
</tr>
<tr>
<td class="greenField">drawPoints.enabled</td>
<td>Boolean</td>
<td>true</td>
<td>Toggle the drawing of the datapoints.</td>
</tr>
<tr>
<td class="greenField">drawPoints.size</td>
<td>Number</td>
<td>6</td>
<td>Determine the size at which the data points are drawn.</td>
</tr>
<tr>
<td class="greenField">drawPoints.style</td>
<td>String</td>
<td>'square'</td>
<td>Determine the shape of the data points. The options are 'square' or 'circle'.</td>
</tr>
<tr>
<td>dataAxis.showMinorLabels</td>
<td>Boolean</td>
<td>true</td>
<td>Toggle the drawing of the minor labels on the Y axis.</td>
</tr>
<tr>
<td>dataAxis.showMajorLabels</td>
<td>Boolean</td>
<td>true</td>
<td>Toggle the drawing of the major labels on the Y axis.</td>
</tr>
<tr>
<td>dataAxis.icons</td>
<td>Boolean</td>
<td>false</td>
<td>Toggle the drawing of automatically generated icons the Y axis.</td>
</tr>
<tr>
<td>dataAxis.width</td>
<td>Number | String</td>
<td>'40px'</td>
<td>Set the (minimal) width of the yAxis. The axis will resize to accomodate the labels of the Y values.</td>
</tr>
<tr>
<td>dataAxis.visible</td>
<td>Boolean</td>
<td>true</td>
<td>Show or hide the data axis.</td>
</tr>
<tr>
<td>legend</td>
<td>Boolean</td>
<td>false</td>
<td>Toggle the legend with the default settings.</td>
</tr>
<tr>
<td>legend.enabled</td>
<td>Boolean</td>
<td>false</td>
<td>Toggle the legend.</td>
</tr>
<tr>
<td>legend.icons</td>
<td>Boolean</td>
<td>true</td>
<td>Show automatically generated icons on the legend.</td>
</tr>
<tr>
<td>legend.left.visible</td>
<td>Boolean</td>
<td>true</td>
<td>Both axis, left and right, have a corresponding legend. This toggles the visibility of the legend that is coupled with the left axis.</td>
</tr>
<tr>
<td>legend.left.position</td>
<td>String</td>
<td>'top-left'</td>
<td>Determine the position of the legend coupled to the left axis. Options are 'top-left', 'top-right', 'bottom-left' or 'bottom-right'.</td>
</tr>
<tr>
<td>legend.right.visible</td>
<td>Boolean</td>
<td>true</td>
<td>This toggles the visibility of the legend that is coupled with the right axis.</td>
</tr>
<tr>
<td>legend.right.position</td>
<td>String</td>
<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>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td class="greenField">yAxisOrientation</td>
<td>String</td>
<td>'left'</td>
<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>defaultGroup</td>
<td>String</td>
<td>'default'</td>
<td>This is the label for the default, ungrouped items when shown in a legend.</td>
</tr>
<tr>
<td class="greenField">sort</td>
<td>Boolean</td>
<td>true</td>
<td>This determines if the items are sorted automatically.
They are sorted by the x value. If sort is enabled, more optimizations are possible, increasing the performance.</td>
</tr>
<tr>
<td class="greenField">sampling</td>
<td>Boolean</td>
<td>true</td>
<td>If sampling is enabled, Graph2d will automatically determine the amount of points per pixel.
If there are more than 1 point per pixel, not all points will be drawn. Disabling sampling will cause a decrease in performance.</td>
</tr>
<tr>
<td>graphHeight</td>
<td>Number | String</td>
<td>'400px'</td>
<td>This is the height of the graph SVG canvas.
If it is larger than the height of the outer frame, you can drag up and down
the vertical direction as well as the usual horizontal direction.</td>
</tr>
<tr>
<td class="greenField">shaded</td>
<td>Boolean | Object</td>
<td>false</td>
<td>Toggle a shaded area with the default settings.</td>
</tr>
<tr>
<td class="greenField">shaded.enabled</td>
<td>Boolean</td>
<td>false</td>
<td>This toggles the shading.</td>
</tr>
<tr>
<td class="greenField">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>
</tr>
<tr>
<td class="greenField">style</td>
<td>String</td>
<td>'line'</td>
<td>This allows the user to define if this should be a linegraph or a barchart. The options are: 'line' or 'bar'.</td>
</tr>
<tr>
<td class="greenField">barChart.width</td>
<td>Number</td>
<td>50</td>
<td>The width of the bars.</td>
</tr>
<tr>
<td class="greenField">barChart.align</td>
<td>String</td>
<td>'center'</td>
<td>The alignment of the bars with regards to the coordinate. The options are 'left', 'right' or 'center'.</td>
</tr>
<tr>
<td class="greenField">barChart.handleOverlap</td>
<td>String</td>
<td>'overlap'</td>
<td>You can choose how graph2d handles the case where barcharts are occupying the same datapoint. The possible options are:
<code>overlap, sideBySide, stack</code>.
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>
</tr>
<tr>
<td class="greenField">catmullRom</td>
<td>Boolean | Object</td>
<td>true</td>
<td>Toggle the interpolation with the default settings. For more customization use the JSON format.</td>
</tr>
<tr>
<td class="greenField">catmullRom.enabled</td>
<td>Boolean</td>
<td>true</td>
<td>Toggle the interpolation.</td>
</tr>
<tr>
<td class="greenField">catmullRom.parametrization</td>
<td>String</td>
<td>'centripetal'</td>
<td>Define the type of parametrizaion. <a href="../examples/Graph2d/07_scrollingAndSorting.html">Example 7</a> shows the different methods. The options are 'centripetal' (best results), 'chordal' and 'uniform'. Uniform is the computationally cheapest variant.
If catmullRom is disabled, linear interpolation is used.</td>
</tr>
<tr>
<td class="greenField">drawPoints</td>
<td>Boolean | Object</td>
<td>true</td>
<td>Toggle the drawing of the datapoints with the default settings.</td>
</tr>
<tr>
<td class="greenField">drawPoints.enabled</td>
<td>Boolean</td>
<td>true</td>
<td>Toggle the drawing of the datapoints.</td>
</tr>
<tr>
<td class="greenField">drawPoints.size</td>
<td>Number</td>
<td>6</td>
<td>Determine the size at which the data points are drawn.</td>
</tr>
<tr>
<td class="greenField">drawPoints.style</td>
<td>String</td>
<td>'square'</td>
<td>Determine the shape of the data points. The options are 'square' or 'circle'.</td>
</tr>
<tr>
<td>dataAxis.showMinorLabels</td>
<td>Boolean</td>
<td>true</td>
<td>Toggle the drawing of the minor labels on the Y axis.</td>
</tr>
<tr>
<td>dataAxis.showMajorLabels</td>
<td>Boolean</td>
<td>true</td>
<td>Toggle the drawing of the major labels on the Y axis.</td>
</tr>
<tr>
<td>dataAxis.icons</td>
<td>Boolean</td>
<td>false</td>
<td>Toggle the drawing of automatically generated icons the Y axis.</td>
</tr>
<tr>
<td>dataAxis.width</td>
<td>Number | String</td>
<td>'40px'</td>
<td>Set the (minimal) width of the yAxis. The axis will resize to accomodate the labels of the Y values.</td>
</tr>
<tr>
<td>dataAxis.visible</td>
<td>Boolean</td>
<td>true</td>
<td>Show or hide the data axis.</td>
</tr>
<tr>
<td>groups.visibility</td>
<td>Object</td>
<td></td>
<td>You can use this to toggle the visibility of groups per graph2D instance. This is different from setting the visibility flag of the groups since
this is not communicated across instances of graph2d. Take a look at <a href="../examples/Graph2d/14_toggleGroups.html">Example 14</a>
for more explaination.
</td>
</tr>
<tr>
<td>legend</td>
<td>Boolean</td>
<td>false</td>
<td>Toggle the legend with the default settings.</td>
</tr>
<tr>
<td>legend.enabled</td>
<td>Boolean</td>
<td>false</td>
<td>Toggle the legend.</td>
</tr>
<tr>
<td>legend.icons</td>
<td>Boolean</td>
<td>true</td>
<td>Show automatically generated icons on the legend.</td>
</tr>
<tr>
<td>legend.left.visible</td>
<td>Boolean</td>
<td>true</td>
<td>Both axis, left and right, have a corresponding legend. This toggles the visibility of the legend that is coupled with the left axis.</td>
</tr>
<tr>
<td>legend.left.position</td>
<td>String</td>
<td>'top-left'</td>
<td>Determine the position of the legend coupled to the left axis. Options are 'top-left', 'top-right', 'bottom-left' or 'bottom-right'.</td>
</tr>
<tr>
<td>legend.right.visible</td>
<td>Boolean</td>
<td>true</td>
<td>This toggles the visibility of the legend that is coupled with the right axis.</td>
</tr>
<tr>
<td>legend.right.position</td>
<td>String</td>
<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>
</table>
<h3 id="timelineOptions">Timeline Options</h3>
@ -656,154 +665,146 @@ The options colored in green can also be used as options for the groups. All opt
<h2 id="Methods">Methods</h2>
<p>
The Graph2d supports the following methods.
The Graph2d supports the following methods.
</p>
<table>
<tr>
<th>Method</th>
<th>Return Type</th>
<th>Description</th>
</tr>
<tr>
<td>clear([what])</td>
<td>none</td>
<td>
Clear the Graph2d. An object can be passed specifying which sections to clear: items, groups,
and/or options. By Default, items, groups and options are cleared, i.e. <code>what = {items: true, groups: true, options: true}</code>. Example usage:
<tr>
<th>Method</th>
<th>Return Type</th>
<th>Description</th>
</tr>
<tr>
<td>clear([what])</td>
<td>none</td>
<td>
Clear the Graph2d. An object can be passed specifying which sections to clear: items, groups,
and/or options. By Default, items, groups and options are cleared, i.e. <code>what = {items: true, groups: true, options: true}</code>. Example usage:
<pre class="prettyprint lang-js">Graph2d.clear(); // clear items, groups, and options
Graph2d.clear({options: true}); // clear options only
</pre>
</td>
</tr>
<tr>
<td>destroy()</td>
<td>none</td>
<td>Destroy the Graph2d. The Graph2d is removed from memory. all DOM elements and event listeners are cleaned up.
</td>
</tr>
<tr>
<td>getCustomTime()</td>
<td>Date</td>
<td>Retrieve the custom time. Only applicable when the option <code>showCustomTime</code> is true.
</td>
</tr>
<tr>
<td>setCustomTime(time)</td>
<td>none</td>
<td>Adjust the custom time bar. Only applicable when the option <code>showCustomTime</code> is true. <code>time</code> is a Date object.
</td>
</tr>
<tr>
<td>getLegend(groupId, iconWidth, iconHeight)</td>
<td>SVGelement, String, String</td>
<td>Returns an object containing an SVG element with the icon of the group (size determined by iconWidth and iconHeight), the label of the group (content) and the yAxisOrientation of the group (left or right).
</td>
</tr>
<tr>
<td>getWindow()</td>
<td>Object</td>
<td>Get the current visible window. Returns an object with properties <code>start: Date</code> and <code>end: Date</code>.</td>
</tr>
<tr>
<td>getItemRange()</td>
<td>Object</td>
<td>Get the range of all the items as an object containing <code>min: Date</code> and <code>max: Date</code>.</td>
</tr>
<tr>
<td>fit([options])</td>
<td>none</td>
<td>Adjust the visible window such that it fits all items.
Available options:
<ul>
<li><code>animate: boolean | number</code><br>If true (default), the range is animated smoothly to the new window. If a number, the number is taken as duration for the animation. Default duration is 500 ms.</li>
</ul>
</td>
</tr>
<tr>
<td>on(event, callback)</td>
<td>none</td>
<td>Create an event listener. The callback function is invoked every time the event is triggered. Avialable events: <code>rangechange</code>, <code>rangechanged</code>, <code>select</code>. The callback function is invoked as <code>callback(properties)</code>, where <code>properties</code> is an object containing event specific properties. See section <a href="#Events">Events for more information</a>.</td>
</tr>
<tr>
<td>off(event, callback)</td>
<td>none</td>
<td>Remove an event listener created before via function <code>on(event, callback)</code>. See section <a href="#Events">Events for more information</a>.</td>
</tr>
<tr>
<td>redraw()</td>
<td>none</td>
<td>Force a redraw of the Graph2d. Can be useful to manually redraw when option autoResize=false.
</td>
</tr>
<tr>
<td>isGroupVisible(groupId)</td>
<td>Boolean</td>
<td>This checks if the visible option of the supplied group (by ID) is true or false.
</td>
</tr>
<tr>
<td>setGroups(groups)</td>
<td>none</td>
<td>Set a data set with groups for the Graph2d.
<code>groups</code> can be an Array with Objects,
a DataSet, or a DataView. For each of the groups, the items of the
Graph2d are filtered on the property <code>group</code>, which
must correspond with the id of the group.
</td>
</tr>
<tr>
<td>setItems(items)</td>
<td>none</td>
<td>Set a data set with items for the Graph2d.
<code>items</code> can be an Array with Objects,
a DataSet, or a DataView.
</td>
</tr>
<tr>
<td>setOptions(options)</td>
<td>none</td>
<td>Set or update options. It is possible to change any option of the Graph2d at any time. You can for example switch orientation on the fly.
</td>
</tr>
<tr>
<td>setWindow(start, end [, options])</td>
<td>none</td>
<td>Set the current visible window. The parameters <code>start</code> and <code>end</code> can be a <code>Date</code>, <code>Number</code>, or <code>String</code>. If the parameter value of <code>start</code> or <code>end</code> is null, the parameter will be left unchanged. Available options:
<ul>
<li><code>animate: boolean | number</code><br>If true (default), the range is animated smoothly to the new window. If a number, the number is taken as duration for the animation. Default duration is 500 ms.</li>
</ul>
</td>
</tr>
</td>
</tr>
<tr>
<td>destroy()</td>
<td>none</td>
<td>Destroy the Graph2d. The Graph2d is removed from memory. all DOM elements and event listeners are cleaned up.
</td>
</tr>
<tr>
<td>getCustomTime()</td>
<td>Date</td>
<td>Retrieve the custom time. Only applicable when the option <code>showCustomTime</code> is true.
</td>
</tr>
<tr>
<td>setCustomTime(time)</td>
<td>none</td>
<td>Adjust the custom time bar. Only applicable when the option <code>showCustomTime</code> is true. <code>time</code> is a Date object.
</td>
</tr>
<tr>
<td>getLegend(groupId, iconWidth, iconHeight)</td>
<td>SVGelement, String, String</td>
<td>Returns an object containing an SVG element with the icon of the group (size determined by iconWidth and iconHeight), the label of the group (content) and the yAxisOrientation of the group (left or right).
</td>
</tr>
<tr>
<td>getWindow()</td>
<td>Object</td>
<td>Get the current visible window. Returns an object with properties <code>start: Date</code> and <code>end: Date</code>.</td>
</tr>
<tr>
<td>getItemRange()</td>
<td>Object</td>
<td>Get the range of all the items as an object containing <code>min: Date</code> and <code>max: Date</code>.</td>
</tr>
<tr>
<td>fit()</td>
<td>none</td>
<td>Adjust the visible window such that it fits all items.
</td>
</tr>
<tr>
<td>on(event, callback)</td>
<td>none</td>
<td>Create an event listener. The callback function is invoked every time the event is triggered. Avialable events: <code>rangechange</code>, <code>rangechanged</code>, <code>select</code>. The callback function is invoked as <code>callback(properties)</code>, where <code>properties</code> is an object containing event specific properties. See section <a href="#Events">Events for more information</a>.</td>
</tr>
<tr>
<td>off(event, callback)</td>
<td>none</td>
<td>Remove an event listener created before via function <code>on(event, callback)</code>. See section <a href="#Events">Events for more information</a>.</td>
</tr>
<tr>
<td>redraw()</td>
<td>none</td>
<td>Force a redraw of the Graph2d. Can be useful to manually redraw when option autoResize=false.
</td>
</tr>
<tr>
<td>isGroupVisible(groupId)</td>
<td>Boolean</td>
<td>This checks if the visible option of the supplied group (by ID) is true or false.
</td>
</tr>
<tr>
<td>setGroups(groups)</td>
<td>none</td>
<td>Set a data set with groups for the Graph2d.
<code>groups</code> can be an Array with Objects,
a DataSet, or a DataView. For each of the groups, the items of the
Graph2d are filtered on the property <code>group</code>, which
must correspond with the id of the group.
</td>
</tr>
<tr>
<td>setItems(items)</td>
<td>none</td>
<td>Set a data set with items for the Graph2d.
<code>items</code> can be an Array with Objects,
a DataSet, or a DataView.
</td>
</tr>
<tr>
<td>setOptions(options)</td>
<td>none</td>
<td>Set or update options. It is possible to change any option of the Graph2d at any time. You can for example switch orientation on the fly.
</td>
</tr>
<tr>
<td>setWindow(start, end)</td>
<td>none</td>
<td>Set the current visible window. The parameters <code>start</code> and <code>end</code> can be a <code>Date</code>, <code>Number</code>, or <code>String</code>. If the parameter value of <code>start</code> or <code>end</code> is null, the parameter will be left unchanged.</td>
</tr>
</table>
<h2 id="Events">Events</h2>
<p>
Graph2d fires events when changing the visible window by dragging, when
selecting items, and when dragging the custom time bar.
Graph2d fires events when changing the visible window by dragging, when
selecting items, and when dragging the custom time bar.
</p>
<p>
Here an example on how to listen for a <code>rangeChanged</code> event.
Here an example on how to listen for a <code>rangeChanged</code> event.
</p>
<pre class="prettyprint lang-js">
@ -813,7 +814,7 @@ Graph2d.on('select', function (properties) {
</pre>
<p>
A listener can be removed via the function <code>off</code>:
A listener can be removed via the function <code>off</code>:
</p>
<pre class="prettyprint lang-js">
@ -832,68 +833,68 @@ Graph2d.off('rangechanged', onChange);
<p>
The following events are available.
The following events are available.
</p>
<table>
<colgroup>
<col style="width: 20%;">
<col style="width: 40%;">
<col style="width: 40%;">
</colgroup>
<tr>
<th>name</th>
<th>Description</th>
<th>Properties</th>
</tr>
<tr>
<td>rangechange</td>
<td>Fired repeatedly when the user is dragging the Graph2d window.
</td>
<td>
<ul>
<li><code>start</code> (Number): timestamp of the current start of the window.</li>
<li><code>end</code> (Number): timestamp of the current end of the window.</li>
</ul>
</td>
</tr>
<tr>
<td>rangechanged</td>
<td>Fired once after the user has dragged the Graph2d window.
</td>
<td>
<ul>
<li><code>start</code> (Number): timestamp of the current start of the window.</li>
<li><code>end</code> (Number): timestamp of the current end of the window.</li>
</ul>
</td>
</tr>
<tr>
<td>timechange</td>
<td>Fired repeatedly when the user is dragging the custom time bar.
Only available when the custom time bar is enabled.
</td>
<td>
<ul>
<li><code>time</code> (Date): the current time.</li>
</ul>
</td>
</tr>
<tr>
<td>timechanged</td>
<td>Fired once after the user has dragged the custom time bar.
Only available when the custom time bar is enabled.
</td>
<td>
<ul>
<li><code>time</code> (Date): the current time.</li>
</ul>
</td>
</tr>
<colgroup>
<col style="width: 20%;">
<col style="width: 40%;">
<col style="width: 40%;">
</colgroup>
<tr>
<th>name</th>
<th>Description</th>
<th>Properties</th>
</tr>
<tr>
<td>rangechange</td>
<td>Fired repeatedly when the user is dragging the Graph2d window.
</td>
<td>
<ul>
<li><code>start</code> (Number): timestamp of the current start of the window.</li>
<li><code>end</code> (Number): timestamp of the current end of the window.</li>
</ul>
</td>
</tr>
<tr>
<td>rangechanged</td>
<td>Fired once after the user has dragged the Graph2d window.
</td>
<td>
<ul>
<li><code>start</code> (Number): timestamp of the current start of the window.</li>
<li><code>end</code> (Number): timestamp of the current end of the window.</li>
</ul>
</td>
</tr>
<tr>
<td>timechange</td>
<td>Fired repeatedly when the user is dragging the custom time bar.
Only available when the custom time bar is enabled.
</td>
<td>
<ul>
<li><code>time</code> (Date): the current time.</li>
</ul>
</td>
</tr>
<tr>
<td>timechanged</td>
<td>Fired once after the user has dragged the custom time bar.
Only available when the custom time bar is enabled.
</td>
<td>
<ul>
<li><code>time</code> (Date): the current time.</li>
</ul>
</td>
</tr>
</table>
@ -955,20 +956,20 @@ Graph2d comes with support for the following locales:
<h2 id="Styles">Styles</h2>
<p>
All parts of the Graph2d have a class name and a default css style just like the Graph2d.
The styles can be overwritten, which enables full customization of the layout
of the Graph2d.
All parts of the Graph2d have a class name and a default css style just like the Graph2d.
The styles can be overwritten, which enables full customization of the layout
of the Graph2d.
</p>
<p>
Additionally, Graph2d has 10 preset styles for graphs, which are cycled through when loading groups. These styles can be overwritten
as well, along with defining your own classes to style the graphs! <a href="../examples/Graph2d/04_rightAxis.html">Example 4</a> and
<a href="../examples/Graph2d/05_bothAxis.html">example 5</a> show the usage of custom styles.
Additionally, Graph2d has 10 preset styles for graphs, which are cycled through when loading groups. These styles can be overwritten
as well, along with defining your own classes to style the graphs! <a href="../examples/Graph2d/04_rightAxis.html">Example 4</a> and
<a href="../examples/Graph2d/05_bothAxis.html">example 5</a> show the usage of custom styles.
</p>
<h2 id="Data_Policy">Data Policy</h2>
<p>
All code and data is processed and rendered in the browser.
No data is sent to any server.
All code and data is processed and rendered in the browser.
No data is sent to any server.
</p>
</div>

+ 145
- 0
examples/graph2d/14_toggleGroups.html View File

@ -0,0 +1,145 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Toggle Groups Example</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<style type="text/css">
body, html {
font-family: sans-serif;
}
div.graphs {
width:300px;
display:inline-block;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Groups Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the groups visibility functionality within Graph2d. Groups have their own visibility option. By using this,
all graph2d instances using those groups would show or hide that group. If you have multiple instances sharing the same data and groups,
you can use the groups.visibility option to set it on an instance level. The graphs below all share the same groups, items and initial options.
We then use a setOptions like so:
<pre class="prettyprint lang-js">
graph2d1.setOptions({
groups:{
visibility:{
0:true, // group id:0 visible
1:false, // group id:1 hidden
2:false, // group id:2 hidden
3:false, // group id:3 hidden
"__ungrouped__":false // default group hidden
}
}
})
</pre>
</div>
<br />
<div class="graphs" id="visualization1"></div>
<div class="graphs" id="visualization2"></div>
<div class="graphs" id="visualization3"></div>
<div class="graphs" id="visualization4"></div>
<div class="graphs" id="visualization5"></div>
<div class="graphs" id="visualization6"></div>
<script type="text/javascript">
// create a dataSet with groups
var names = ['SquareShaded', 'Bar', 'Blank', 'CircleShaded'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
options: {
drawPoints: {
style: 'square' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
}});
groups.add({
id: 1,
content: names[1],
options: {
style:'bar'
}});
groups.add({
id: 2,
content: names[2],
options: {drawPoints: false}
});
groups.add({
id: 3,
content: names[3],
options: {
drawPoints: {
style: 'circle' // square, circle
},
shaded: {
orientation: 'top' // top, bottom
}
}});
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-13', y: 60},
{x: '2014-06-14', y: 40},
{x: '2014-06-15', y: 55},
{x: '2014-06-16', y: 40},
{x: '2014-06-17', y: 50},
{x: '2014-06-13', y: 30, group: 0},
{x: '2014-06-14', y: 10, group: 0},
{x: '2014-06-15', y: 15, group: 1},
{x: '2014-06-16', y: 30, group: 1},
{x: '2014-06-17', y: 10, group: 1},
{x: '2014-06-18', y: 15, group: 1},
{x: '2014-06-19', y: 52, group: 1},
{x: '2014-06-20', y: 10, group: 1},
{x: '2014-06-21', y: 20, group: 2},
{x: '2014-06-22', y: 60, group: 2},
{x: '2014-06-23', y: 10, group: 2},
{x: '2014-06-24', y: 25, group: 2},
{x: '2014-06-25', y: 30, group: 2},
{x: '2014-06-26', y: 20, group: 3},
{x: '2014-06-27', y: 60, group: 3},
{x: '2014-06-28', y: 10, group: 3},
{x: '2014-06-29', y: 25, group: 3},
{x: '2014-06-30', y: 30, group: 3}
];
var dataset = new vis.DataSet(items);
var options = {
defaultGroup: 'ungrouped',
legend: false,
graphHeight:200,
start: '2014-06-10',
end: '2014-07-04',
showMajorLabels:false,
showMinorLabels:false
};
var graph2d1 = new vis.Graph2d(document.getElementById('visualization1'), dataset, options, groups);
var graph2d2 = new vis.Graph2d(document.getElementById('visualization2'), dataset, options, groups);
var graph2d3 = new vis.Graph2d(document.getElementById('visualization3'), dataset, options, groups);
var graph2d4 = new vis.Graph2d(document.getElementById('visualization4'), dataset, options, groups);
var graph2d5 = new vis.Graph2d(document.getElementById('visualization5'), dataset, options, groups);
var graph2d6 = new vis.Graph2d(document.getElementById('visualization6'), dataset, options, groups);
graph2d1.setOptions({groups:{visibility:{0:true, 1:false, 2:false, 3:false, "__ungrouped__":false}}})
graph2d2.setOptions({groups:{visibility:{0:false, 1:true, 2:false, 3:false, "__ungrouped__":false}}})
graph2d3.setOptions({groups:{visibility:{0:false, 1:false, 2:true, 3:false, "__ungrouped__":false}}})
graph2d4.setOptions({groups:{visibility:{0:false, 1:false, 2:false, 3:true, "__ungrouped__":false}}})
graph2d5.setOptions({groups:{visibility:{0:false, 1:false, 2:false, 3:false, "__ungrouped__":true}}})
</script>
</body>
</html>

+ 1
- 0
examples/graph2d/index.html View File

@ -20,6 +20,7 @@
<p><a href="11_barsSideBySideGroups.html">11_barsSideBySideGroups.html</a></p>
<p><a href="12_customRange.html">12_customRange.html</a></p>
<p><a href="13_localization.html">13_localization.html</a></p>
<p><a href="14_toggleGroups.html">14_toggleGroups.html</a></p>
</div>
</body>

+ 1
- 1
lib/timeline/Graph2d.js View File

@ -190,7 +190,7 @@ Graph2d.prototype.getLegend = function(groupId, width, height) {
*/
Graph2d.prototype.isGroupVisible = function(groupId) {
if (this.linegraph.groups[groupId] !== undefined) {
return this.linegraph.groups[groupId].visible;
return (this.linegraph.groups[groupId].visible && (this.linegraph.options.groups.visibility[groupId] === undefined || this.linegraph.options.groups.visibility[groupId] == true));
}
else {
return false;

+ 4
- 3
lib/timeline/component/DataAxis.js View File

@ -11,7 +11,7 @@ var DataStep = require('../DataStep');
* @extends Component
* @param body
*/
function DataAxis (body, options, svg) {
function DataAxis (body, options, svg, linegraphOptions) {
this.id = util.randomUUID();
this.body = body;
@ -33,6 +33,7 @@ function DataAxis (body, options, svg) {
}
};
this.linegraphOptions = linegraphOptions;
this.linegraphSVG = svg;
this.props = {};
this.DOMelements = { // dynamic elements
@ -161,7 +162,7 @@ DataAxis.prototype._redrawGroupIcons = function () {
for (var groupId in this.groups) {
if (this.groups.hasOwnProperty(groupId)) {
if (this.groups[groupId].visible == true) {
if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
y += iconHeight + iconOffset;
}
@ -222,7 +223,7 @@ DataAxis.prototype.redraw = function () {
var activeGroups = 0;
for (var groupId in this.groups) {
if (this.groups.hasOwnProperty(groupId)) {
if (this.groups[groupId].visible == true) {
if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
activeGroups++;
}
}

+ 5
- 4
lib/timeline/component/Legend.js View File

@ -5,7 +5,7 @@ var Component = require('./Component');
/**
* Legend for Graph2d
*/
function Legend(body, options, side) {
function Legend(body, options, side, linegraphOptions) {
this.body = body;
this.defaultOptions = {
enabled: true,
@ -23,6 +23,7 @@ function Legend(body, options, side) {
}
this.side = side;
this.options = util.extend({},this.defaultOptions);
this.linegraphOptions = linegraphOptions;
this.svgElements = {};
this.dom = {};
@ -105,7 +106,7 @@ Legend.prototype.redraw = function() {
var activeGroups = 0;
for (var groupId in this.groups) {
if (this.groups.hasOwnProperty(groupId)) {
if (this.groups[groupId].visible == true) {
if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
activeGroups++;
}
}
@ -158,7 +159,7 @@ Legend.prototype.redraw = function() {
var content = '';
for (var groupId in this.groups) {
if (this.groups.hasOwnProperty(groupId)) {
if (this.groups[groupId].visible == true) {
if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
content += this.groups[groupId].content + '<br />';
}
}
@ -182,7 +183,7 @@ Legend.prototype.drawLegendIcons = function() {
for (var groupId in this.groups) {
if (this.groups.hasOwnProperty(groupId)) {
if (this.groups[groupId].visible == true) {
if (this.groups[groupId].visible == true && (this.linegraphOptions.visibility[groupId] === undefined || this.linegraphOptions.visibility[groupId] == true)) {
this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
y += iconHeight + this.options.iconSpacing;
}

+ 10
- 7
lib/timeline/component/LineGraph.js View File

@ -68,6 +68,9 @@ function LineGraph(body, options) {
visible: true,
position: 'top-right' // top/bottom - left,right
}
},
groups: {
visibility: {}
}
};
@ -159,15 +162,15 @@ LineGraph.prototype._create = function(){
// data axis
this.options.dataAxis.orientation = 'left';
this.yAxisLeft = new DataAxis(this.body, this.options.dataAxis, this.svg);
this.yAxisLeft = new DataAxis(this.body, this.options.dataAxis, this.svg, this.options.groups);
this.options.dataAxis.orientation = 'right';
this.yAxisRight = new DataAxis(this.body, this.options.dataAxis, this.svg);
this.yAxisRight = new DataAxis(this.body, this.options.dataAxis, this.svg, this.options.groups);
delete this.options.dataAxis.orientation;
// legends
this.legendLeft = new Legend(this.body, this.options.legend, 'left');
this.legendRight = new Legend(this.body, this.options.legend, 'right');
this.legendLeft = new Legend(this.body, this.options.legend, 'left', this.options.groups);
this.legendRight = new Legend(this.body, this.options.legend, 'right', this.options.groups);
this.show();
};
@ -178,7 +181,7 @@ LineGraph.prototype._create = function(){
*/
LineGraph.prototype.setOptions = function(options) {
if (options) {
var fields = ['sampling','defaultGroup','graphHeight','yAxisOrientation','style','barChart','dataAxis','sort'];
var fields = ['sampling','defaultGroup','graphHeight','yAxisOrientation','style','barChart','dataAxis','sort','groups'];
util.selectiveDeepExtend(fields, this.options, options);
util.mergeOptions(this.options, options,'catmullRom');
util.mergeOptions(this.options, options,'drawPoints');
@ -551,7 +554,7 @@ LineGraph.prototype._updateGraph = function () {
for (var groupId in this.groups) {
if (this.groups.hasOwnProperty(groupId)) {
group = this.groups[groupId];
if (group.visible == true) {
if (group.visible == true && (this.options.groups.visibility[groupId] === undefined || this.options.groups.visibility[groupId] == true)) {
groupIds.push(groupId);
}
}
@ -900,7 +903,7 @@ LineGraph.prototype._drawBarGraphs = function (groupIds, processedGroupData) {
for (i = 0; i < groupIds.length; i++) {
group = this.groups[groupIds[i]];
if (group.options.style == 'bar') {
if (group.visible == true) {
if (group.visible == true && (this.options.groups.visibility[groupIds[i]] === undefined || this.options.groups.visibility[groupIds[i]] == true)) {
for (j = 0; j < processedGroupData[groupIds[i]].length; j++) {
combinedData.push({
x: processedGroupData[groupIds[i]][j].x,

Write Preview
Loading…
Cancel
Save