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

Released version 3.4.6

gh-pages
jos 10 years ago
parent
f598f197f1
commit
1e76e30c8b
11 changed files with 1161 additions and 1023 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +42
    -0
      dist/vis.css
  2. +573
    -1003
      dist/vis.js
  3. +1
    -1
      dist/vis.map
  4. +1
    -1
      dist/vis.min.css
  5. +15
    -15
      dist/vis.min.js
  6. +56
    -1
      docs/graph2d.html
  7. BIN
      download/vis.zip
  8. +215
    -0
      examples/graph2d/16_bothAxis_titles.html
  9. +256
    -0
      examples/graph2d/17_dynamicStyling.html
  10. +1
    -1
      examples/network/01_basic_usage.html
  11. +1
    -1
      index.html

+ 42
- 0
dist/vis.css View File

@ -415,6 +415,48 @@
width: auto;
}
.vis.timeline .dataaxis .yAxis.title{
position: absolute;
color: #4d4d4d;
white-space: nowrap;
bottom: 20px;
text-align: center;
}
.vis.timeline .dataaxis .yAxis.title.measure{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
visibility: hidden;
width: auto;
}
.vis.timeline .dataaxis .yAxis.title.left {
bottom: 0px;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.vis.timeline .dataaxis .yAxis.title.right {
bottom: 0px;
-webkit-transform-origin: right bottom;
-moz-transform-origin: right bottom;
-ms-transform-origin: right bottom;
-o-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.vis.timeline .legend {
background-color: rgba(247, 252, 255, 0.65);

+ 573
- 1003
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


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


+ 56
- 1
docs/graph2d.html View File

@ -238,6 +238,15 @@ groups.add({
an individual css style.
</td>
</tr>
<tr>
<td>style</td>
<td>String</td>
<td>no</td>
<td>This field is optional. A style can be used to give groups
an individual css style, and any style tags specified in style will
override the definition in the className style defined in css.
</td>
</tr>
<tr>
<td>options</td>
<td>JSON object</td>
@ -330,6 +339,12 @@ The options colored in green can also be used as options for the groups. All opt
<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">shaded.style</td>
<td>String</td>
<td>undefined</td>
<td>Set the style for the shading. This is a css string and it will override the attributes set in the class.</td>
</tr>
<tr>
<td class="greenField">style</td>
<td>String</td>
@ -455,13 +470,53 @@ The options colored in green can also be used as options for the groups. All opt
<td>true</td>
<td>Show or hide the data axis.</td>
</tr>
<tr>
<td>dataAxis.title.left.text</td>
<td>String</td>
<td>undefined</td>
<td>Set the title for the left axis.</td>
</tr>
<tr>
<td>dataAxis.title.left.style</td>
<td>String</td>
<td>undefined</td>
<td>Set the title style for the left axis. This is a css string and it will override the attributes set in the class.</td>
</tr>
<tr>
<td>dataAxis.title.right.text</td>
<td>String</td>
<td>undefined</td>
<td>Set the title for the right axis.</td>
</tr>
<tr>
<td>dataAxis.title.right.style</td>
<td>String</td>
<td>undefined</td>
<td>Set the title style for the right axis. This is a css string and it will override the attributes set in the class.</td>
</tr>
<tr>
<td>dataAxis.format.left.decimals</td>
<td>Number</td>
<td>undefined</td>
<td>Set the number of decimal points used on the the left axis. If set, this will fix the number of decimal places
displayed after the decimal point.
If undefined, trailing zeros will be removed.</td>
</tr>
<tr>
<td>dataAxis.format.right.decimals</td>
<td>Number</td>
<td>undefined</td>
<td>Set the number of decimal points used on the the right axis. If set, this will fix the number of decimal places
displayed after the decimal point.
If undefined, trailing zeros will be removed.</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.
for more explanation.
</td>
</tr>
<tr>

BIN
download/vis.zip View File


+ 215
- 0
examples/graph2d/16_bothAxis_titles.html View File

@ -0,0 +1,215 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Axis Titles and Styling</title>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font-family: sans-serif;
}
.customStyle1 {
fill: #f2ea00;
fill-opacity:0;
stroke-width:2px;
stroke: #b3ab00;
}
.customStyle2 {
fill: #00a0f2;
fill-opacity:0;
stroke-width:2px;
stroke: #050092;
}
.customStyle3 {
fill: #00f201;
fill-opacity:0;
stroke-width:2px;
stroke: #029200;
}
path.customStyle3.fill {
fill-opacity:0.5 !important;
stroke: none;
}
</style>
<script src="../../dist/vis.js"></script>
</head>
<body>
<h2>Graph2d | Axis Titles and Styling</h2>
<div style="width:800px; font-size:14px; text-align: justify;">
<table>
<tr>
<td>
This example shows setting a title for the left and right axis. Optionally the example allows the user
to show icons and labels on the left and right axis.
</td>
<td>
<table>
<tr>
<td><input type="button" onclick="showIcons(true)" value="Show Icons" /></td>
<td><input type="button" onclick="showIcons(false)" value="Hide Icons" /></td>
</tr>
<tr>
<td><input type="button" onclick="showTitle('left', true)" value="Show Left Title" /></td>
<td><input type="button" onclick="showTitle('left', false)" value="Hide Left Title" /></td>
</tr>
<tr>
<td><input type="button" onclick="showTitle('right', true)" value="Show Right Title" /></td>
<td><input type="button" onclick="showTitle('right', false)" value="Hide Right Title" /></td>
</tr>
<tr>
<td><input type="button" onclick="styleTitle('left')" value="Color Left Title" /></td>
<td><input type="button" onclick="styleTitle('right')" value="Color Right Title" /></td>
</tr>
<tr>
<td>Left decimals</td>
<td><select id="decimals" onchange="styleDecimals()">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<br />
<div id="visualization"></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],
className: 'customStyle1',
options: {
drawPoints: {
style: 'square' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
}});
groups.add({
id: 1,
content: names[1],
className: 'customStyle2',
options: {
style:'bar',
drawPoints: {style: 'circle',
size: 10
}
}});
groups.add({
id: 2,
content: names[2],
options: {
yAxisOrientation: 'right', // right, left
drawPoints: false
}
});
groups.add({
id: 3,
content: names[3],
className: 'customStyle3',
options: {
yAxisOrientation: 'right', // right, left
drawPoints: {
style: 'circle' // square, circle
},
shaded: {
orientation: 'top' // top, bottom
}
}});
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-12', y: 0 , group: 0},
{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: 600, group: 2},
{x: '2014-06-23', y: 100, group: 2},
{x: '2014-06-24', y: 250, group: 2},
{x: '2014-06-25', y: 300, group: 2},
{x: '2014-06-26', y: 200, group: 3},
{x: '2014-06-27', y: 600, group: 3},
{x: '2014-06-28', y: 1000, group: 3},
{x: '2014-06-29', y: 250, group: 3},
{x: '2014-06-30', y: 300, group: 3}
];
var dataset = new vis.DataSet(items);
var options = {
dataAxis: {
showMinorLabels: false,
title: {
right: {
text: 'Title (right axis)'
}
}
},
legend: {left:{position:"bottom-left"}},
start: '2014-06-09',
end: '2014-07-03'
};
var graph2d = new vis.Graph2d(container, items, groups, options);
function showIcons(show) {
graph2d.setOptions({dataAxis: {icons: show}});
}
function showTitle(axis, show) {
var title;
if(show == true) {
title = {text: "Title (" + axis + " axis)"};
}
else {
title = undefined;
}
if(axis == 'left') {
graph2d.setOptions({dataAxis: {title: {left: title}}});
}
else {
graph2d.setOptions({dataAxis: {title: {right: title}}});
}
}
var colors=['red','green','blue','black','yellow','purple','pink'];
function styleTitle(axis) {
var title;
title = {style: "color: " + colors[Math.floor(Math.random() * colors.length) + 1]};
if(axis == 'left') {
graph2d.setOptions({dataAxis: {title: {left: title}}});
}
else {
graph2d.setOptions({dataAxis: {title: {right: title}}});
}
}
function styleDecimals() {
var x = document.getElementById("decimals");
graph2d.setOptions({dataAxis: {format: {left: {decimals: Number(x.value)}}}});
}
</script>
</body>
</html>

+ 256
- 0
examples/graph2d/17_dynamicStyling.html View File

@ -0,0 +1,256 @@
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Graph2d | Dynamic Styling</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h2>Graph2d | Dynamic Styling Example</h2>
<div style="width:800px; font-size:14px; text-align: justify;">
This example shows how to programmatically change the styling of a group. While this can also
be done in CSS, this must be statically defined, and the programmatic interface allows the
user to define the look of the graph at runtime.
</div>
<br/>
<table>
<col width="600">
<col width="220">
<tr>
<td style="padding-right: 20px; border-right: 1px solid;">
<div id="visualization"></div>
</td>
<td style="padding-left: 5px;">
<table style="font-size: 12px;">
<col width="150">
<col width="50">
<tr>
<td>Line Color</td>
<td>
<select id="color" onchange="updateStyle()">
<option value="stroke:green;">green</option>
<option value="stroke:red;">red</option>
<option value="stroke:blue;" selected="selected">blue</option>
<option value="stroke:black;">black</option>
</select>
</td>
</tr>
<tr>
<td>Line Style</td>
<td>
<select id="line" onchange="updateStyle()">
<option value="stroke-dasharray:1 0;" selected="selected">line</option>
<option value="stroke-dasharray:10 10;">dash</option>
<option value="stroke-dasharray:2 2;">dot</option>
<option value="stroke-dasharray:10 5 2 5;">dash-dot</option>
</select>
</td>
</tr>
<tr>
<td>Line thickness</td>
<td>
<select id="thickness" onchange="updateStyle()">
<option value="stroke-width:0;">0</option>
<option value="stroke-width:1;">1</option>
<option value="stroke-width:2;" selected="selected">2</option>
<option value="stroke-width:3;">3</option>
<option value="stroke-width:4;">4</option>
<option value="stroke-width:5;">5</option>
<option value="stroke-width:6;">6</option>
</select>
</td>
</tr>
<tr>
<td>Fill Position</td>
<td>
<select id="fill" onchange="updateStyle()">
<option value="">none</option>
<option value="top">top</option>
<option value="bottom" selected="selected">bottom</option>
</select>
</td>
</tr>
<tr>
<td>Fill Color</td>
<td>
<select id="fillcolor" onchange="updateStyle()">
<option value="fill:green;">green</option>
<option value="fill:red;">red</option>
<option value="fill:blue;" selected="selected">blue</option>
<option value="fill:black;">black</option>
</select>
</td>
</tr>
<tr>
<td>Fill Opacity</td>
<td>
<select id="fillopacity" onchange="updateStyle()">
<option value="opacity:0.1;">0.1</option>
<option value="opacity:0.2;">0.2</option>
<option value="opacity:0.3;">0.3</option>
<option value="opacity:0.4;">0.4</option>
<option value="opacity:0.5;">0.5</option>
<option value="opacity:0.6;" selected="selected">0.6</option>
<option value="opacity:0.7;">0.7</option>
<option value="opacity:0.8;">0.8</option>
<option value="opacity:0.9;">0.9</option>
<option value="opacity:1;">1</option>
</select>
</td>
</tr>
<tr>
<td>Points Shape</td>
<td>
<select id="points" onchange="updateStyle()">
<option value="">none</option>
<option value="circle">circle</option>
<option value="square" selected="selected">square</option>
</select>
</td>
</tr>
<tr>
<td>Points Size</td>
<td>
<select id="pointsize" onchange="updateStyle()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6" selected="selected">6</option>
<option value="8">8</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
</td>
</tr>
<tr>
<td>Points Color</td>
<td>
<select id="pointcolor" onchange="updateStyle()">
<option value="stroke:green;">green</option>
<option value="stroke:red;">red</option>
<option value="stroke:blue;" selected="selected">blue</option>
<option value="stroke:black;">black</option>
</select>
</td>
</tr>
<tr>
<td>Point Line Thickness</td>
<td>
<select id="pointthickness" onchange="updateStyle()">
<option value="stroke-width:0;">0</option>
<option value="stroke-width:1;">1</option>
<option value="stroke-width:2;" selected="selected">2</option>
<option value="stroke-width:3;">3</option>
<option value="stroke-width:4;">4</option>
<option value="stroke-width:5;">5</option>
<option value="stroke-width:6;">6</option>
</select>
</td>
<tr>
</tr>
<td>Points Fill Color</td>
<td>
<select id="pointfill" onchange="updateStyle()">
<option value="fill:green;">green</option>
<option value="fill:red;">red</option>
<option value="fill:blue;" selected="selected">blue</option>
<option value="fill:black;">black</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11', y: 10, group: 0},
{x: '2014-06-12', y: 25, group: 0},
{x: '2014-06-13', y: 30, group: 0},
{x: '2014-06-14', y: 10, group: 0},
{x: '2014-06-15', y: 15, group: 0},
{x: '2014-06-16', y: 30, group: 0}
];
var dataset = new vis.DataSet(items);
var options = {
start: '2014-06-10',
end: '2014-06-18',
dataAxis: {
showMinorLabels: false,
icons: true
}
};
var groupData = {
id: 0,
content: "Group Name",
options: {
drawPoints: {
style: 'square' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
}
};
var groups = new vis.DataSet();
groups.add(groupData);
var graph2d = new vis.Graph2d(container, dataset, groups, options);
updateStyle();
function updateStyle() {
groupData.style = "";
groupData.style += document.getElementById("color").value;
groupData.style += document.getElementById("line").value;
groupData.style += document.getElementById("thickness").value;
groupData.options.drawPoints = {};
groupData.options.drawPoints.styles = "";
groupData.options.drawPoints.style = document.getElementById("points").value;
groupData.options.drawPoints.styles += document.getElementById("pointcolor").value;
groupData.options.drawPoints.styles += document.getElementById("pointthickness").value;
groupData.options.drawPoints.styles += document.getElementById("pointfill").value;
groupData.options.drawPoints.size = Number(document.getElementById("pointsize").value);
if (groupData.options.drawPoints.style == "") {
groupData.options.drawPoints = false;
}
groupData.options.shaded = {};
groupData.options.shaded.style = "";
groupData.options.shaded.style += document.getElementById("fillcolor").value;
groupData.options.shaded.style += document.getElementById("fillopacity").value;
groupData.options.shaded.orientation = document.getElementById("fill").value;
if (groupData.options.shaded.orientation == "") {
groupData.options.shaded = false;
}
var groups = new vis.DataSet();
groups.add(groupData);
graph2d.setGroups(groups);
}
</script>
</body>
</html>

+ 1
- 1
examples/network/01_basic_usage.html View File

@ -43,7 +43,7 @@
nodes: nodes,
edges: edges
};
var options = {};
var options = {edges:{style:'arrow-center'}};
var network = new vis.Network(container, data, options);
</script>

+ 1
- 1
index.html View File

@ -76,7 +76,7 @@ bower install vis
<h3>download</h3>
<a href="download/vis.zip">Click here to download vis.js</a>
(version <span class="version">3.6.3</span>)
(version <span class="version">3.6.4</span>)
<h2 id="example">Example</h2>

Write Preview
Loading…
Cancel
Save