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

Release 4.4

gh-pages
Alex de Mulder 9 years ago
parent
5e92459858
commit
425a91e77f
24 changed files with 12193 additions and 11928 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +11869
    -11701
      dist/vis.js
  2. +1
    -1
      dist/vis.map
  3. +20
    -20
      dist/vis.min.js
  4. +0
    -61
      docs/css/examples.css
  5. +0
    -83
      docs/css/old_style.css
  6. +15
    -0
      docs/css/style.css
  7. +3
    -1
      docs/data/dataset.html
  8. +3
    -1
      docs/data/dataview.html
  9. +3
    -1
      docs/data/index.html
  10. +75
    -25
      docs/graph2d/index.html
  11. +49
    -8
      docs/graph3d/index.html
  12. +3
    -1
      docs/network/configure.html
  13. +12
    -1
      docs/network/edges.html
  14. +3
    -1
      docs/network/groups.html
  15. +26
    -3
      docs/network/index.html
  16. +3
    -1
      docs/network/interaction.html
  17. +3
    -1
      docs/network/layout.html
  18. +3
    -1
      docs/network/manipulation.html
  19. +12
    -1
      docs/network/nodes.html
  20. +3
    -1
      docs/network/physics.html
  21. +3
    -1
      docs/timeline/index.html
  22. BIN
      download/vis.zip
  23. +81
    -11
      examples/graph2d/19_labels.html
  24. +3
    -3
      index.html

+ 11869
- 11701
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


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


+ 0
- 61
docs/css/examples.css View File

@ -1,61 +0,0 @@
body {
font-family: Lustria,Georgia,Times,"Times New Roman",serif !important;
background: url('../images/crossword.png') /* Background pattern from subtlepatterns.com */
}
div.contentWrapper {
padding:10px;
}
div.navbar-wrapper {
background-color:#07508E;
border-bottom: 3px solid #ffffff;
font-size:16px;
}
pre {
width:450px;
height:552px;
overflow:auto;
}
#visualization {
display:block;
margin-left:470px;
margin-top:-562px;
width:500px;
height:552px;
border: 1px solid #dddddd;
border-radius:4px;
background-color:#fcfcfc;
}
div.textHTMLContent {
margin-top:10px;
margin-bottom:10px;
display:block;
width:800px;
}
img.example {
border:1px solid #dddddd;
width:250px;
height:250px;
border-radius:10px;
margin-top:10px;
}
div.exampleTitle {
position:relative;
top:-7px;
width:100%;
max-width:250px;
height:30px;
border: 1px solid #dddddd;
background-color: #526b84;
color:#ffffff;
text-align:center;
vertical-align:middle;
line-height: 30px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}

+ 0
- 83
docs/css/old_style.css View File

@ -1,83 +0,0 @@
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body, td, th {
font-family: arial, sans-serif;
font-size: 11pt;
color: #4D4D4D;
line-height: 1.7em;
}
#container {
position: relative;
margin: 0 auto;
padding: 10px 10px 50px 10px;
width: 970px;
max-width: 100%;
box-sizing: border-box;
}
h1 {
font-size: 180%;
font-weight: bold;
padding: 0;
margin: 1em 0 1em 0;
}
h2 {
padding-top: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #e0e0e0;
color: #064880;
}
h3 {
font-size: 140%;
}
a > img {
border: none;
}
a {
color: #064880;
text-decoration: none;
}
a:visited {
color: #064880;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
table {
border-collapse: collapse;
}
th {
font-weight: bold;
border: 1px solid lightgray;
background-color: #E5E5E5;
text-align: left;
vertical-align: top;
padding: 5px;
}
td {
border: 1px solid lightgray;
padding: 5px;
vertical-align: top;
}
p.important_note {
color: #3a6baa;
font-weight:bold;
}

+ 15
- 0
docs/css/style.css View File

@ -188,4 +188,19 @@ pre.options {
pre.hidden {
display:none;
}
#breadcrumbs {
font-size: 0.85em;
}
#breadcrumbs::before {
content: "You are here:";
padding-right: 5px;
}
#breadcrumbs > *:not(:first-child)::before{
content: "▸";
padding: 0 2px 0 5px;
display:inline-block;
}

+ 3
- 1
docs/data/dataset.html View File

@ -996,4 +996,6 @@ var positiveBalance = dataset.get({
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<!-- controller -->
<script src="../js/main.js"></script>

+ 3
- 1
docs/data/dataview.html View File

@ -386,4 +386,6 @@ view.on('*', function (event, properties, senderId) {
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<!-- controller -->
<script src="../js/main.js"></script>

+ 3
- 1
docs/data/index.html View File

@ -111,4 +111,6 @@
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<!-- controller -->
<script src="../js/main.js"></script>

+ 75
- 25
docs/graph2d/index.html View File

@ -158,7 +158,7 @@
<p>
The following code shows how to create a Graph2d and provide it with data.
More examples can be found in the <a href="../examples">examples</a> directory.</p>
More examples can be found in the <a href="../../examples">examples</a> directory.</p>
<pre class="prettyprint lang-html options">
&lt;!DOCTYPE HTML&gt;
@ -266,7 +266,7 @@ var items = [
</tr>
<tr>
<td>x</td>
<td>Number</td>
<td>Date</td>
<td>yes</td>
<td>Location on the x-axis.</td>
</tr>
@ -424,8 +424,8 @@ var options = {
<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.
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>.
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 parent="barChart" class="hidden">
@ -546,15 +546,73 @@ function (value) {
</tr>
<tr class='toggle collapsible' onclick="toggleTable('g2dOptions','drawPoints', this);">
<td class="greenField"><span parent="drawPoints" class="right-caret"></span> drawPoints</td>
<td>Boolean or Object</td>
<td>Boolean, Object or Function</td>
<td>true</td>
<td>Toggle the drawing of the datapoints with the default settings.</td>
<td>Defines rendering options for the datapoints.
Three different types of objects can be assigned to this property. See <a href="../../examples/graph2d/19_labels.html">Example 19</a> for an illustration.<br />
1. <code>Boolean</code>: When true is provided every datapoint will be drawn, false otherwise.<br />
<pre class="prettyprint lang-js">
drawPoints: true // or false
</pre>
2. <code>Object</code> (the 'rendering' options): If an object is provided it may contain following properties which all can be optional: <code>onRender</code>, <code>className</code><code>size</code> and/or <code>style</code>. For more information check the property's documentation.<br />
<pre class="prettyprint lang-js">
drawPoints: {
size: 3,
style: 'square'
}
</pre>
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) {
...
}
</pre>
If a rendering property from the rendering option object is missing, the missing property will be fetched from the group's option.
<br />
All of these three options can be defined within the drawPoints properties separately as well.
</td>
</tr>
<tr parent="drawPoints" class="hidden">
<td class="greenField indent">drawPoints.enabled</td>
<td>Boolean</td>
<td>true</td>
<td>Toggle the drawing of the datapoints.</td>
<td>Toggles the drawing of the datapoints.</td>
</tr>
<tr parent="drawPoints" class="hidden">
<td class="greenField indent">drawPoints.onRender</td>
<td>function</td>
<td>none</td>
<td>Defines a render function for every datapoint.
If a group has no <code>drawPoints.onRender</code> callback, the graph2d <code>drawPoints.onRender</code> callback will be used.
If neither is defined, the datapoint will be rendered according to the group setting of <code>drawPoints.enabled</code>.
This callback must return <code>true</code> if the datapoint should be rendered, otherwise <code>false</code>.
<pre class="prettyprint lang-js">
drawPoints: {
enabled: true,
onRender: function(item, group, graph2d) {
// only renders items with labels
return item.label != null;
}
}
</pre>
This callback may also return an object containing a <code>size</code> and <code>style</code> property, both are optional, e.g.:
<pre class="prettyprint lang-js">
onRender: function(item, group, graph2d) {
if (item.label == null) {
return false;
}
return {
style: 'circle',
size: 30
};
}
</pre>
The properties <code>className</code>, <code>style</code> and <code>size</code> returned from the callback will be used for rendering the datapoint.
If a property is missing in the rendering option object, the missing property will be fetched from the group's option.
</td>
</tr>
<tr parent="drawPoints" class="hidden">
<td class="greenField indent">drawPoints.size</td>
@ -581,7 +639,7 @@ function (value) {
<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>
this is not communicated across instances of graph2d. Take a look at <a href="../../examples/graph2d/14_toggleGroups.html">Example 14</a>
for more explanation.
</td>
</tr>
@ -601,7 +659,7 @@ function (value) {
<td class="greenField indent">interpolation.parametrization</td>
<td>String</td>
<td>'centripetal'</td>
<td>Define the type of parametrizaion for the catmullRom interpolation. <a href="../examples/graph2d/07_scrollingAndSorting.html">Example 7</a> shows the different parametrizations. The options are 'centripetal' (best results), 'chordal' and 'uniform'. Uniform is the computationally cheapest variant.
<td>Define the type of parametrizaion for the catmullRom interpolation. <a href="../../examples/graph2d/07_scrollingAndSorting.html">Example 7</a> shows the different parametrizations. The options are 'centripetal' (best results), 'chordal' and 'uniform'. Uniform is the computationally cheapest variant.
If interpolation is disabled, linear interpolation is used.</td>
</tr>
<tr class='toggle collapsible' onclick="toggleTable('g2dOptions','legend', this);">
@ -700,7 +758,7 @@ function (value) {
<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
<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>
</table>
@ -1001,18 +1059,6 @@ function (option, path) {
<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 options">Graph2d.clear(); // clear items, groups, and options
Graph2d.clear({options: true}); // clear options only
</pre>
</td>
</tr>
<tr>
<td>destroy()</td>
<td>none</td>
@ -1353,8 +1399,8 @@ Graph2d.off('rangechanged', onChange);
</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.
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>
</div>
@ -1365,4 +1411,8 @@ Graph2d.off('rangechanged', onChange);
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<!-- controller -->
<script src="../js/main.js"></script>
<!-- controller -->
<script src="../js/main.js"></script>

+ 49
- 8
docs/graph3d/index.html View File

@ -288,14 +288,27 @@ var options = {
is created.</td>
</tr>
<tr>
<td>axisColor</td>
<td>string</td>
<td>'#4D4D4D'</td>
<td>The color of the axis lines and the text along the axis.</td>
</tr>
<tr>
<td>backgroundColor</td>
<td>string or Object</td>
<td>'white'</td>
<td>{fill:&nbsp;'white', stroke:&nbsp;'gray', strokeWidth:&nbsp;1}</td>
<td>The background color for the main area of the chart.
Can be either a simple HTML color string, for example: 'red' or '#00cc00',
or an object with the following properties.</td>
</tr>
<tr>
<td>backgroundColor.fill</td>
<td>string</td>
<td>'white'</td>
<td>The chart fill color, as an HTML color string.</td>
</tr>
<tr>
<td>backgroundColor.stroke</td>
<td>string</td>
@ -308,12 +321,6 @@ var options = {
<td>1</td>
<td>The border width, in pixels.</td>
</tr>
<tr>
<td>backgroundColor.fill</td>
<td>string</td>
<td>'white'</td>
<td>The chart fill color, as an HTML color string.</td>
</tr>
<tr>
<td>cameraPosition</td>
@ -331,6 +338,38 @@ var options = {
All parameters are optional.
</tr>
<tr>
<td>dataColor</td>
<td>string or object</td>
<td>{fill:&nbsp;'#7DC1FF', stroke:&nbsp;'#3267D2', strokeWidth:&nbsp;1}</td>
<td>When <code>dataColor</code> is a string, it will set the color for both border and fill color of dots and bars. Applicable for styles <code>dot-size</code>, <code>bar-size</code>, and <code>line</code>. When an object, it can contain the properties descibed below.</td>
</tr>
<tr>
<td>dataColor.fill</td>
<td>string</td>
<td>'#7DC1FF'</td>
<td>The border color of the dots or bars. Applicable when using styles <code>dot-size</code> or <code>bar-size</code>.</td>
</tr>
<tr>
<td>dataColor.stroke</td>
<td>string</td>
<td>'#3267D2'</td>
<td>The fill color of the dots or bars. Applicable when using styles <code>dot-size</code>, <code>bar-size</code>, or <code>line</code>.</td>
</tr>
<tr>
<td>dataColor.strokeWidth</td>
<td>number</td>
<td>1</td>
<td>The line width of dots, bars and lines. Applicable for all styles.</td>
</tr>
<tr>
<td>gridColor</td>
<td>string</td>
<td>'#D3D3D3'</td>
<td>The color of the grid lines.</td>
</tr>
<tr>
<td>height</td>
<td>string</td>
@ -726,4 +765,6 @@ graph3d.on('cameraPositionChange', onCameraPositionChange);
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<!-- controller -->
<script src="../js/main.js"></script>

+ 3
- 1
docs/network/configure.html View File

@ -168,4 +168,6 @@ function (option, path) {
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<!-- controller -->
<script src="../js/main.js"></script>

+ 12
- 1
docs/network/edges.html View File

@ -125,6 +125,7 @@ var options = {
hidden: false,
hoverWidth: 1.5,
label: undefined,
labelHighlightBold: true,
length: undefined,
physics: true,
scaling:{
@ -407,6 +408,12 @@ var options: {
<td><code>undefined</code></td>
<td>The label of the edge. HTML does not work in here because the network uses HTML5 Canvas.</td>
</tr>
<tr>
<td>labelHighlightBold</td>
<td>Boolean</td>
<td><code>true</code></td>
<td>Determines whether or not the label becomes bold when the edge is selected.</td>
</tr>
<tr>
<td>length</td>
<td>Number</td>
@ -514,6 +521,8 @@ var scale = customScalingFunction(min,max,total,value);
var diff = maxWidth - minWidth;
myWidth = minWidth + diff * scale;
</pre>
Please note: <code>maxWidth</code> and <code>minWidth</code> are the values <code>scaling.max</code>
and <code>scaling.min</code> provided in the options.
</td>
</tr>
<tr>
@ -650,4 +659,6 @@ var options: {
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<!-- controller -->
<script src="../js/main.js"></script>

+ 3
- 1
docs/network/groups.html View File

@ -152,4 +152,6 @@ var options = {
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<!-- controller -->
<script src="../js/main.js"></script>

+ 26
- 3
docs/network/index.html View File

@ -834,7 +834,7 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
<td>Start the physics simulation. This is normally done whenever needed and is only really useful if you
stop the simulation yourself and wish to continue it afterwards.
</td>
.</td></tr>
</tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','stopSimulation', this);">
<td colspan="2"><span parent="stopSimulation" class="right-caret"></span> stopSimulation()</td>
</tr>
@ -1059,7 +1059,18 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
<td class="midMethods">Returns: none</td>
<td>Programatically release the focussed node.</td>
</tr>
<tr class="subHeader">
<td colspan="2">Methods to use with the configurator module.</td>
</tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','getOptionsFromConfigurator', this);">
<td colspan="2"><span parent="getOptionsFromConfigurator" class="right-caret"></span> getOptionsFromConfigurator()</td>
</tr>
<tr class="hidden" parent="getOptionsFromConfigurator">
<td class="midMethods">Returns: Object</td>
<td>If you use the configurator, you can call this method to get an options object that contains all differences from the default options
caused by users interacting with the configurator.
</td>
</tr>
</table>
<br>
@ -1308,6 +1319,16 @@ var options = {
<td><code>{node: nodeId}</code></td>
<td>Fired interaction:{hover:true} and the mouse moved away from a node it was hovering over before.</td>
</tr>
<tr>
<td>hoverEdge</td>
<td><code>{edge: edgeId}</code></td>
<td>Fired interaction:{hover:true} and the mouse hovers over an edge.</td>
</tr>
<tr>
<td>blurEdge</td>
<td><code>{edge: edgeId}</code></td>
<td>Fired interaction:{hover:true} and the mouse moved away from an edge it was hovering over before.</td>
</tr>
<tr>
<td>zoom</td>
<td><code>{direction:'+'/'-', scale: Number}</code></td>
@ -1544,4 +1565,6 @@ var network = new vis.Network(container, data, options);
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<!-- controller -->
<script src="../js/main.js"></script>

+ 3
- 1
docs/network/interaction.html View File

@ -146,4 +146,6 @@ network.setOptions(options);
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<!-- controller -->
<script src="../js/main.js"></script>

+ 3
- 1
docs/network/layout.html View File

@ -126,4 +126,6 @@ network.setOptions(options);
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<!-- controller -->
<script src="../js/main.js"></script>

+ 3
- 1
docs/network/manipulation.html View File

@ -178,4 +178,6 @@ var options = {
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<!-- controller -->
<script src="../js/main.js"></script>

+ 12
- 1
docs/network/nodes.html View File

@ -129,6 +129,7 @@ var options = {
},
image: undefined,
label: undefined,
labelHighlightBold: true,
level: undefined,
mass: 1,
physics: true,
@ -414,6 +415,12 @@ network.setOptions(options);
<td><code>undefined</code></td>
<td>The label is the piece of text shown in or under the node, depending on the shape.</td>
</tr>
<tr>
<td>labelHighlightBold</td>
<td>Boolean</td>
<td><code>true</code></td>
<td>Determines whether or not the label becomes bold when the node is selected.</td>
</tr>
<tr>
<td>level</td>
<td>Number</td>
@ -535,6 +542,8 @@ var scale = customScalingFunction(min,max,total,value);
var diff = maxSize - minSize;
mySize = minSize + diff * scale;
</pre>
Please note: <code>maxSize</code> and <code>minSize</code> are the values <code>scaling.max</code>
and <code>scaling.min</code> provided in the options.
</td>
</tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','shadow', this);">
@ -637,4 +646,6 @@ mySize = minSize + diff * scale;
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<!-- controller -->
<script src="../js/main.js"></script>

+ 3
- 1
docs/network/physics.html View File

@ -196,4 +196,6 @@ network.setOptions(options);
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<!-- controller -->
<script src="../js/main.js"></script>

+ 3
- 1
docs/timeline/index.html View File

@ -1606,4 +1606,6 @@ var options = {
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<!-- controller -->
<script src="../js/main.js"></script>

BIN
download/vis.zip View File


+ 81
- 11
examples/graph2d/19_labels.html View File

@ -35,31 +35,101 @@
var container = document.getElementById('visualization');
var label1 = {
content: "offset label",
content: "Label 1 (with offset)",
xOffset: 20,
yOffset: 20
}
var label2 = {
content: "Label2",
content: "Label 2",
className: "red"
}
var label3 = {
content: "Label 3"
}
var items = [
{x: '2014-06-11', y: 10,label:label1},
{x: '2014-06-12', y: 25,label:label2},
{x: '2014-06-13', y: 30},
{x: '2014-06-14', y: 10},
{x: '2014-06-15', y: 15},
{x: '2014-06-16', y: 30}
{group: 1, x: '2014-06-11', y: 10, label: label1},
{group: 1, x: '2014-06-12', y: 25, label: label2},
{group: 1, x: '2014-06-13', y: 30},
{group: 1, x: '2014-06-14', y: 10},
{group: 1, x: '2014-06-15', y: 15, label: label3},
{group: 1, x: '2014-06-16', y: 30},
{group: 2, x: '2014-06-17', y: 10, label:label1},
{group: 2, x: '2014-06-18', y: 25, label:label2},
{group: 2, x: '2014-06-19', y: 30},
{group: 2, x: '2014-06-20', y: 10},
{group: 2, x: '2014-06-21', y: 15, label: label3},
{group: 2, x: '2014-06-22', y: 30},
{group: 3, x: '2014-06-23', y: 10, label:label1},
{group: 3, x: '2014-06-24', y: 25, label:label2},
{group: 3, x: '2014-06-25', y: 30},
{group: 3, x: '2014-06-26', y: 10},
{group: 3, x: '2014-06-27', y: 15, label: label3},
{group: 3, x: '2014-06-28', y: 30}
];
var groups = new vis.DataSet();
groups.add(
{
id: 1,
content: "Only draw items with labels. Make the data point bigger and a square.",
options: {
drawPoints: function group1Renderer(item, group, grap2d) {
if (item.label == null) {
return false;
}
return {
style: 'square',
size: 15
};
}
}
}
);
groups.add(
{
id: 2,
content: "Draw according to the Graph2d callback, but make it every datapoint square one.",
options: {
drawPoints: {
style: 'square'
}
}
}
);
groups.add(
{
id: 3,
content: "I want to render datapoints with no labels. Screw the graph2d options. Except the style/size should be according to the graph2d option.",
options: {
drawPoints: function(item, group, grap2d) {
return item.label == null;
}
}
}
);
var dataset = new vis.DataSet(items);
var options = {
start: '2014-06-10',
end: '2014-06-18',
style:'bar'
end: '2014-06-29',
style: 'bar',
drawPoints: {
onRender: function(item, group, grap2d) {
return item.label != null;
},
style: 'circle'
}
};
var graph2d = new vis.Graph2d(container, dataset, options);
var graph2d = new vis.Graph2d(container, dataset, groups, options);
</script>
</body>
</html>

+ 3
- 3
index.html View File

@ -183,12 +183,12 @@
<pre class="prettyprint">bower install vis</pre>
<h3>link from cdnjs.com</h3>
<p>
<a href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.2.0/vis.min.js" target="_blank">vis.min.js</a> <br>
<a href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.2.0/vis.min.css" target="_blank">vis.min.css</a> <br>
<a href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.4.0/vis.min.js" target="_blank">vis.min.js</a> <br>
<a href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.4.0/vis.min.css" target="_blank">vis.min.css</a> <br>
</p>
<h3>download</h3>
<p>
<a href="download/vis.zip">vis.zip (version <span class="version">4.3.0</span>)</a>
<a href="download/vis.zip">vis.zip (version <span class="version">4.4.0</span>)</a>
</p>
</div>
</div>

Write Preview
Loading…
Cancel
Save