summaryrefslogtreecommitdiff
path: root/www/lib/vis/examples/graph2d
diff options
context:
space:
mode:
Diffstat (limited to 'www/lib/vis/examples/graph2d')
-rw-r--r--www/lib/vis/examples/graph2d/01_basic.html52
-rw-r--r--www/lib/vis/examples/graph2d/02_bars.html57
-rw-r--r--www/lib/vis/examples/graph2d/03_groups.html112
-rw-r--r--www/lib/vis/examples/graph2d/04_rightAxis.html126
-rw-r--r--www/lib/vis/examples/graph2d/05_bothAxis.html137
-rw-r--r--www/lib/vis/examples/graph2d/06_interpolation.html101
-rw-r--r--www/lib/vis/examples/graph2d/07_scrollingAndSorting.html74
-rw-r--r--www/lib/vis/examples/graph2d/08_performance.html150
-rw-r--r--www/lib/vis/examples/graph2d/09_external_legend.html363
-rw-r--r--www/lib/vis/examples/graph2d/10_barsSideBySide.html75
-rw-r--r--www/lib/vis/examples/graph2d/11_barsSideBySideGroups.html88
-rw-r--r--www/lib/vis/examples/graph2d/12_customRange.html92
-rw-r--r--www/lib/vis/examples/graph2d/13_localization.html65
-rw-r--r--www/lib/vis/examples/graph2d/14_toggleGroups.html145
-rw-r--r--www/lib/vis/examples/graph2d/15_streaming_data.html122
-rw-r--r--www/lib/vis/examples/graph2d/16_bothAxisTitles.html201
-rw-r--r--www/lib/vis/examples/graph2d/17_dynamicStyling.html257
-rw-r--r--www/lib/vis/examples/graph2d/18_scatterplot.html63
-rw-r--r--www/lib/vis/examples/graph2d/19_labels.html135
-rw-r--r--www/lib/vis/examples/graph2d/20_shading.html117
-rw-r--r--www/lib/vis/examples/graph2d/default.css87
21 files changed, 2619 insertions, 0 deletions
diff --git a/www/lib/vis/examples/graph2d/01_basic.html b/www/lib/vis/examples/graph2d/01_basic.html
new file mode 100644
index 00000000..22c0931f
--- /dev/null
+++ b/www/lib/vis/examples/graph2d/01_basic.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+ <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+ <meta content="utf-8" http-equiv="encoding">
+ <title>Graph2d | Basic Example</title>
+
+ <style type="text/css">
+ body, html {
+ font-family: sans-serif;
+ }
+ </style>
+
+ <script src="../../dist/vis.js"></script>
+ <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+<body>
+<h2>Graph2d | Basic Example</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+ This example shows the most basic functionality of the vis.js Graph2d module. An array or a vis.Dataset can be used as input.
+ In the following examples we'll explore the options Graph2d offest for customization. This example uses all default settings.
+ There are 10 predefined styles that will be cycled through automatically when you add different groups. Alternatively you can
+ create your own styling.
+ <br /><br />
+ Graph2d is built upon the framework of the newly refactored timeline. A lot of the timeline options will also apply to Graph2d.
+ In these examples however, we will focus on what's new in Graph2d!
+</div>
+<br />
+<div id="visualization"></div>
+
+<script type="text/javascript">
+
+ var container = document.getElementById('visualization');
+ var items = [
+ {x: '2014-06-11', y: 10},
+ {x: '2014-06-12', y: 25},
+ {x: '2014-06-13', y: 30},
+ {x: '2014-06-14', y: 10},
+ {x: '2014-06-15', y: 15},
+ {x: '2014-06-16', y: 30}
+ ];
+
+ var dataset = new vis.DataSet(items);
+ var options = {
+ start: '2014-06-10',
+ end: '2014-06-18'
+ };
+ var graph2d = new vis.Graph2d(container, dataset, options);
+</script>
+</body>
+</html> \ No newline at end of file
diff --git a/www/lib/vis/examples/graph2d/02_bars.html b/www/lib/vis/examples/graph2d/02_bars.html
new file mode 100644
index 00000000..42957d74
--- /dev/null
+++ b/www/lib/vis/examples/graph2d/02_bars.html
@@ -0,0 +1,57 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>Graph2d | Bar Graph Example</title>
+
+ <style type="text/css">
+ body, html {
+ font-family: sans-serif;
+ }
+ </style>
+
+ <script src="../../dist/vis.js"></script>
+ <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+<body>
+<h2>Graph2d | Bar Graph Example</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+ This example shows the most the same data as the first example, except we plot the data as bars! The
+ dataAxis (y-axis) icons have been enabled as well. These icons are generated automatically from the CSS
+ styling of the graphs. Finally, we've used the option from Timeline where we draw the x-axis (time-axis) on top.
+ <br /><br />
+ The <code>align</code> option can be used to align the bar at the center of the datapoint or on the left or right side of it.
+ This example uses the default center alignment.
+</div>
+<br />
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+
+ var container = document.getElementById('visualization');
+ var items = [
+ {x: '2014-06-11', y: 10},
+ {x: '2014-06-12', y: 25},
+ {x: '2014-06-13', y: 30},
+ {x: '2014-06-14', y: 10},
+ {x: '2014-06-15', y: 15},
+ {x: '2014-06-16', y: 30}
+ ];
+
+ var dataset = new vis.DataSet(items);
+ var options = {
+ style:'bar',
+ barChart: {width:50, align:'center'}, // align: left, center, right
+ drawPoints: false,
+ dataAxis: {
+ icons:true
+ },
+ orientation:'top',
+ start: '2014-06-10',
+ end: '2014-06-18'
+ };
+ var graph2d = new vis.Graph2d(container, items, options);
+
+</script>
+</body>
+</html> \ No newline at end of file
diff --git a/www/lib/vis/examples/graph2d/03_groups.html b/www/lib/vis/examples/graph2d/03_groups.html
new file mode 100644
index 00000000..fe5fa887
--- /dev/null
+++ b/www/lib/vis/examples/graph2d/03_groups.html
@@ -0,0 +1,112 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>Graph2d | 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;
+ }
+ </style>
+
+ <script src="../../dist/vis.js"></script>
+ <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+<body>
+<h2>Graph2d | Groups Example</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+ This example shows the groups functionality within Graph2d. This works in the same way as it does in Timeline,
+ We have however simplified the constructor to accept groups as well to shorten the code. These groups are the
+ method used in Graph2d to define individual graphs. These groups can be given an individual class as well as all the
+ styling options you can supply to Graph2d! This example, as well as the ones that follow will showcase a few different usages
+ of these options. <br /> <br />
+
+ This example also introduces the automatically generated legend. The icons are automatically generated and the label is the
+ content as you define it in the groups. If you have datapoints that are not part of a group, a default group is created with the label: 'default'.
+ In this example, the setting <code>defaultGroup</code> is used to rename the default group to 'ungrouped'.
+</div>
+<br />
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+ // create a dataSet with groups
+ var names = ['SquareShaded', 'Bargraph', '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: true,
+ start: '2014-06-10',
+ end: '2014-07-04'
+ };
+ var graph2d = new vis.Graph2d(container, dataset, groups, options);
+
+</script>
+</body>
+</html> \ No newline at end of file
diff --git a/www/lib/vis/examples/graph2d/04_rightAxis.html b/www/lib/vis/examples/graph2d/04_rightAxis.html
new file mode 100644
index 00000000..f13af137
--- /dev/null
+++ b/www/lib/vis/examples/graph2d/04_rightAxis.html
@@ -0,0 +1,126 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>Graph2d | Right Axis Example</title>
+
+ <style type="text/css">
+ body, html {
+ font-family: sans-serif;
+ }
+
+ .custom-style1 {
+ fill: #0df200;
+ fill-opacity:0;
+ stroke-width:2px;
+ stroke: #0df200;
+ }
+
+ .custom-style2 {
+ fill: #f23303;
+ fill-opacity:0;
+ stroke-width:2px;
+ stroke: #ff0004;
+ }
+ </style>
+
+ <script src="../../dist/vis.js"></script>
+ <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+<body>
+<h2>Graph2d | Right Axis Example</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+ This example shows the all of the graphs outlined on the right side using the <code>yAxisOrientation</code> option.
+ We also show a few custom styles for the graph and show icons on the axis, which are adhering to the custom styling.
+ Finally, the legend is manually positioned. Both the left and right axis
+ have their own legend. If one of the axis is unused, the legend is not shown. The options for the legend have been split
+ in a <code>left</code> and a <code>right</code> segment. Since this example shows the right axis, the right legend is configured.
+
+
+</div>
+<br />
+<div id="visualization"></div>
+
+<script type="text/javascript">
+ // create a dataSet with groups
+ var names = ['Custom1', 'Custom2', 'Blank', 'CircleShaded'];
+ var groups = new vis.DataSet();
+ groups.add({
+ id: 0,
+ content: names[0],
+ className: 'custom-style1',
+ options: {
+ drawPoints: {
+ style: 'square' // square, circle
+ },
+ shaded: {
+ orientation: 'bottom' // top, bottom
+ }
+ }});
+
+ groups.add({
+ id: 1,
+ content: names[1],
+ className: 'custom-style2',
+ options: {
+ style:'bar',
+ drawPoints: {style: 'circle',
+ size: 10
+ }
+ }});
+
+ 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: 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: 50, 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: 85, group: 3},
+ {x: '2014-06-30', y: 30, group: 3}
+ ];
+
+ var dataset = new vis.DataSet(items);
+ var options = {
+ legend: {right: {position: 'top-left'}},
+ yAxisOrientation: 'right', // right, left
+ dataAxis: {icons: true},
+ start: '2014-06-10',
+ end: '2014-07-04',
+ moveable: false
+ };
+ var graph2d = new vis.Graph2d(container, dataset, groups, options);
+
+</script>
+</body>
+</html> \ No newline at end of file
diff --git a/www/lib/vis/examples/graph2d/05_bothAxis.html b/www/lib/vis/examples/graph2d/05_bothAxis.html
new file mode 100644
index 00000000..7b2a04c2
--- /dev/null
+++ b/www/lib/vis/examples/graph2d/05_bothAxis.html
@@ -0,0 +1,137 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>Graph2d | Both Axis Example</title>
+ <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+ <script src="../../dist/vis.js"></script>
+
+ <style type="text/css">
+ body, html {
+ font-family: sans-serif;
+ }
+
+ .custom-style1 {
+ fill: #f2ea00;
+ fill-opacity:0;
+ stroke-width:2px;
+ stroke: #b3ab00;
+ }
+
+ .custom-style2 {
+ fill: #00a0f2;
+ stroke-width:2px;
+ stroke: #050092;
+ }
+
+ .custom-style3 {
+ fill: #00f201;
+ fill-opacity:0;
+ stroke-width:2px;
+ stroke: #029200;
+ }
+ path.custom-style3.vis-fill {
+ fill-opacity:0.5 !important;
+ stroke: none;
+ }
+ </style>
+
+<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+<body>
+<h2>Graph2d | Both Axis Example</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+ This example shows the some of the graphs outlined on the right side using the <code>yAxisOrientation</code> option within the groups.
+ We also show a few more custom styles for the graphs. Finally, the legend is manually positioned. Both the left and right axis
+ have their own legend. If one of the axis is unused, the legend is not shown. The options for the legend have been split
+ in a <code>left</code> and a <code>right</code> segment. The default position of the left axis has been changed.
+
+
+</div>
+<br />
+<div id="visualization"></div>
+
+<script type="text/javascript">
+ // create a dataSet with groups
+ var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
+ var groups = new vis.DataSet();
+ groups.add({
+ id: 0,
+ content: names[0],
+ className: 'custom-style1',
+ options: {
+ drawPoints: {
+ style: 'square' // square, circle
+ },
+ shaded: {
+ orientation: 'bottom' // top, bottom
+ }
+ }});
+
+ groups.add({
+ id: 1,
+ content: names[1],
+ className: 'custom-style2',
+ 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: 'custom-style3',
+ 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},
+ legend: {left:{position:"bottom-left"}},
+ start: '2014-06-09',
+ end: '2014-07-03'
+ };
+ var graph2d = new vis.Graph2d(container, dataset, groups, options);
+
+</script>
+</body>
+</html> \ No newline at end of file
diff --git a/www/lib/vis/examples/graph2d/06_interpolation.html b/www/lib/vis/examples/graph2d/06_interpolation.html
new file mode 100644
index 00000000..9daa7e07
--- /dev/null
+++ b/www/lib/vis/examples/graph2d/06_interpolation.html
@@ -0,0 +1,101 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>Graph2d | Interpolation</title>
+ <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+ <style type="text/css">
+ body, html {
+ font-family: sans-serif;
+ }
+ </style>
+
+ <script src="../../dist/vis.js"></script>
+
+<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+<body>
+<h2>Graph2d | Interpolation</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+ The Graph2d makes use of <a href="http://en.wikipedia.org/wiki/Centripetal_Catmull%E2%80%93Rom_spline" target="_blank">Catmull-Rom spline interpolation</a>.
+ The user can configure these per group, or globally. In this example we show all 4 possiblities. The differences are in the parametrization of
+ the curves. The options are <code>uniform</code>, <code>chordal</code> and <code>centripetal</code>. Alternatively you can disable the Catmull-Rom interpolation and
+ a linear interpolation will be used. The <code>centripetal</code> parametrization produces the best result (no self intersection, yet follows the line closely) and is therefore the default setting.
+ <br /><br />
+ For both the <code>centripetal</code> and <code>chordal</code> parametrization, the distances between the points have to be calculated and this makes these methods computationally intensive
+ if there are very many points. The <code>uniform</code> parametrization still has to do transformations, though it does not have to calculate the distance between point. Finally, the
+ linear interpolation is the fastest method. For more on the Catmull-Rom method, <a href="http://www.cemyuksel.com/research/catmullrom_param/catmullrom.pdf" target="_blank">C. Yuksel et al. have an interesting paper titled &Prime;On the parametrization of Catmull-Rom Curves&Prime;</a>.
+</div>
+<br />
+<div id="visualization"></div>
+
+<script type="text/javascript">
+ // create a dataSet with groups
+ var names = ['centripetal', 'chordal', 'uniform', 'disabled'];
+ var groups = new vis.DataSet();
+ groups.add({
+ id: 0,
+ content: names[0],
+ options: {
+ drawPoints: false,
+ interpolation: {
+ parametrization: 'centripetal'
+ }
+ }});
+
+ groups.add({
+ id: 1,
+ content: names[1],
+ options: {
+ drawPoints: false,
+ interpolation: {
+ parametrization: 'chordal'
+ }
+ }});
+
+ groups.add({
+ id: 2,
+ content: names[2],
+ options: {
+ drawPoints: false,
+ interpolation: {
+ parametrization: 'uniform'
+ }
+ }
+ });
+
+ groups.add({
+ id: 3,
+ content: names[3],
+ options: {
+ drawPoints: { style: 'circle' },
+ interpolation: false
+ }});
+
+ var container = document.getElementById('visualization');
+ var dataset = new vis.DataSet();
+ for (var i = 0; i < names.length; i++) {
+ dataset.add( [
+ {x: '2014-06-12', y: 0 , group: i},
+ {x: '2014-06-13', y: 40, group: i},
+ {x: '2014-06-14', y: 10, group: i},
+ {x: '2014-06-15', y: 15, group: i},
+ {x: '2014-06-15', y: 30, group: i},
+ {x: '2014-06-17', y: 10, group: i},
+ {x: '2014-06-18', y: 15, group: i},
+ {x: '2014-06-19', y: 52, group: i},
+ {x: '2014-06-20', y: 10, group: i},
+ {x: '2014-06-21', y: 20, group: i}
+ ]);
+ }
+
+ var options = {
+ drawPoints: false,
+ dataAxis: {visible: false},
+ legend: true,
+ start: '2014-06-11',
+ end: '2014-06-22'
+ };
+ var graph2d = new vis.Graph2d(container, dataset, groups, options);
+
+</script>
+</body>
+</html> \ No newline at end of file
diff --git a/www/lib/vis/examples/graph2d/07_scrollingAndSorting.html b/www/lib/vis/examples/graph2d/07_scrollingAndSorting.html
new file mode 100644
index 00000000..f9328dc7
--- /dev/null
+++ b/www/lib/vis/examples/graph2d/07_scrollingAndSorting.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>Graph2d | Scrolling and Sorting</title>
+
+ <style type="text/css">
+ body, html {
+ font-family: sans-serif;
+ }
+ </style>
+
+ <script src="../../dist/vis.js"></script>
+ <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+<body>
+<h2>Graph2d | Scrolling and Sorting</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+ You can determine the height of the Graph2d seperately from the height of the frame. If the <code>graphHeight</code>
+ is defined, and the <code>height</code> is not, the frame will auto-scale to accommodate the graphHeight. If the <code>height</code>
+ is defined as well, the user can scroll up and down vertically as well as horizontally to view the graph.
+ <br /><br />
+ Vertical scrolling is planned, though not yet available. The graphHeight also does not conform if only the <code>height</code> is defined.
+ <br /><br />
+ You can manually disable the automatic sorting of the datapoints by using the <code>sort</code> option. However, doing so does reduce the optimization
+ of the drawing so if you have a lot of points, keep <code>sort</code> turned on for the best results.
+</div>
+<br />
+<div id="visualization"></div>
+
+<script type="text/javascript">
+
+ var container = document.getElementById('visualization');
+ var items = [
+ {x: '2014-06-11', y: 10},
+ {x: '2014-06-12', y: 25},
+ {x: '2014-06-13', y: 30},
+ {x: '2014-06-14', y: 10},
+ {x: '2014-06-15', y: 15},
+ {x: '2014-06-16', y: 30},
+ {x: '2014-06-11', y: 100},
+ {x: '2014-06-12', y: 250},
+ {x: '2014-06-13', y: 300},
+ {x: '2014-06-14', y: 100},
+ {x: '2014-06-15', y: 150},
+ {x: '2014-06-16', y: 300},
+ {x: '2014-06-11', y: 400},
+ {x: '2014-06-12', y: 450},
+ {x: '2014-06-13', y: 400},
+ {x: '2014-06-14', y: 500},
+ {x: '2014-06-15', y: 420},
+ {x: '2014-06-16', y: 600},
+ {x: '2014-06-11', y: 810},
+ {x: '2014-06-12', y: 825},
+ {x: '2014-06-13', y: 830},
+ {x: '2014-06-14', y: 810},
+ {x: '2014-06-15', y: 815},
+ {x: '2014-06-16', y: 900}
+ ];
+
+ var dataset = new vis.DataSet(items);
+ var options = {
+ legend: true,
+ sort: false,
+ defaultGroup: 'doodle',
+ graphHeight: '1500px',
+ height: '500px',
+ start: '2014-06-10',
+ end: '2014-06-18'
+ };
+ var graph2d = new vis.Graph2d(container, dataset, options);
+
+</script>
+</body>
+</html> \ No newline at end of file
diff --git a/www/lib/vis/examples/graph2d/08_performance.html b/www/lib/vis/examples/graph2d/08_performance.html
new file mode 100644
index 00000000..9a2ad2e1
--- /dev/null
+++ b/www/lib/vis/examples/graph2d/08_performance.html
@@ -0,0 +1,150 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>Graph2d | Performance</title>
+
+ <style>
+ body, html {
+ font-family: arial, sans-serif;
+ font-size: 11pt;
+ }
+ span.label {
+ width:150px;
+ display:inline-block;
+ }
+ </style>
+
+ <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
+ <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
+
+ <script src="../../dist/vis.js"></script>
+ <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+<body>
+<h2>Graph2d | Performance</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+ This example is a test of the performance of the Graph2d. Select the amount of datapoints you want to plot and press draw.
+ You can choose between the style of the points as well as the interpolation method. This can only be toggled with the buttons.
+ The interpolation options may not look different for this dataset but you can see their effects clearly in example 7.
+ <br /><br />
+ Linear interpolation and no points are the settings that will render quickest. By default, Graph2d will downsample when there are more
+ than 1 point per pixel. This can be manually disabled at the cost of performance by using the <code>sampling</code> option.
+</div>
+<br />
+<p>
+ <span class="label">Number of items:</span><input id="count" value="50000">
+ <input id="draw" type="button" value="draw" style="width:200px;"> <span id="description"><b>Click the draw button to load the data!</b></span>
+ <br />
+
+ <span class="label">Interpolation method:</span><input id="interpolation" value="linear">
+ <input id="toggleInterpolation" type="button" value="toggle Interpolation" style="width:200px;">
+ <br />
+ <span class="label">Points style:</span><input id="points" value="none">
+ <input id="togglePoints" type="button" value="toggle Points" style="width:200px;">
+
+</p>
+<div id="visualization"></div>
+
+<script>
+ var points = 'none';
+ var interpolation = 'linear';
+
+ function togglePoints() {
+ var pointsOptions = {};
+ var pointsField = document.getElementById("points");
+ if (points == "none") {
+ points = 'circle';
+ pointsOptions = {drawPoints: {style: points}};
+ }
+ else if (points == "circle") {
+ points = 'square';
+ pointsOptions = {drawPoints: {style: points}};
+ }
+ else if (points == "square") {
+ points = 'none';
+ pointsOptions = {drawPoints: false};
+ }
+ pointsField.value = points;
+
+ graph2d.setOptions(pointsOptions);
+ }
+
+ function toggleInterpolation() {
+ var interpolationOptions = {};
+ var interpolationField = document.getElementById("interpolation");
+ if (interpolation == "linear") {
+ interpolation = 'centripetal';
+ interpolationOptions = {interpolation: {parametrization: interpolation}};
+ }
+ else if (interpolation == "centripetal") {
+ interpolation = 'chordal';
+ interpolationOptions = {interpolation: {parametrization: interpolation}};
+ }
+ else if (interpolation == "chordal") {
+ interpolation = 'uniform';
+ interpolationOptions = {interpolation: {parametrization: interpolation}};
+ }
+ else if (interpolation == "uniform") {
+ interpolation = 'linear';
+ interpolationOptions = {interpolation: false};
+ }
+ interpolationField.value = interpolation;
+ graph2d.setOptions(interpolationOptions);
+ }
+
+
+ // create a dataset with items
+ var now = moment().minutes(0).seconds(0).milliseconds(0);
+ var dataset = new vis.DataSet({
+ type: {start: 'ISODate', end: 'ISODate' }
+ });
+
+
+ var startPoint = now;
+ var endPoint = now + 3600000 * 5000;
+
+ // create data -- this is seperated into 3 functions so we can update the span.
+ function createData() {
+ var span = document.getElementById("description");
+ span.innerHTML = 'Generating data... (just javascript, not vis.graph2D)...';
+ setTimeout(generateData,10);
+ }
+
+ function generateData() {
+ var count = parseInt(document.getElementById('count').value) || 100;
+ var newData = [];
+ var span = document.getElementById("description");
+ var start = now;
+ for (var i = 0; i < count; i++) {
+ var yval = Math.sin(i/100) * Math.cos(i/50) * 50 + Math.sin(i/1000) * 50;
+ newData.push({id: i, x: start + 3600000 * i, y: yval});
+ }
+ span.innerHTML = 'Loading data into Graph2d...';
+ setTimeout(function() {loadDataIntoVis(newData);},10);
+
+ }
+
+ function loadDataIntoVis(newData) {
+ var span = document.getElementById("description");
+ dataset.clear();
+ dataset.add(newData);
+ span.innerHTML = 'Done!';
+ }
+
+ document.getElementById('draw').onclick = createData;
+ document.getElementById('toggleInterpolation').onclick = toggleInterpolation;
+ document.getElementById('togglePoints').onclick = togglePoints;
+
+ var container = document.getElementById('visualization');
+ var options = {
+ sampling: true,
+ drawPoints: {enabled:false, size:3},
+ interpolation: false,
+ start: startPoint,
+ end: endPoint
+ };
+
+ var graph2d = new vis.Graph2d(container, dataset, options);
+</script>
+</body>
+</html> \ No newline at end of file
diff --git a/www/lib/vis/examples/graph2d/09_external_legend.html b/www/lib/vis/examples/graph2d/09_external_legend.html
new file mode 100644
index 00000000..8ec82fa8
--- /dev/null
+++ b/www/lib/vis/examples/graph2d/09_external_legend.html
@@ -0,0 +1,363 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>Graph2d | External legend Example</title>
+ <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+ <style type="text/css">
+ body, html {
+ font-family: sans-serif;
+ }
+
+ .custom-style1 {
+ fill: #f2ea00;
+ fill-opacity:0;
+ stroke-width:2px;
+ stroke: #b3ab00;
+ }
+
+ .custom-style2 {
+ fill: #00a0f2;
+ fill-opacity:0;
+ stroke-width:2px;
+ stroke: #050092;
+ }
+
+ .custom-style3 {
+ fill: #00f201;
+ fill-opacity:0;
+ stroke-width:2px;
+ stroke: #029200;
+ }
+
+ path.custom-style3.fill {
+ fill-opacity:0.5 !important;
+ stroke: none;
+ }
+
+ .vis-graph-group0 {
+ fill:#4f81bd;
+ fill-opacity:0;
+ stroke-width:2px;
+ stroke: #4f81bd;
+ }
+
+ .vis-graph-group1 {
+ fill:#f79646;
+ fill-opacity:0;
+ stroke-width:2px;
+ stroke: #f79646;
+ }
+
+ .vis-graph-group2 {
+ fill: #8c51cf;
+ fill-opacity:0;
+ stroke-width:2px;
+ stroke: #8c51cf;
+ }
+
+ .vis-graph-group3 {
+ fill: #75c841;
+ fill-opacity:0;
+ stroke-width:2px;
+ stroke: #75c841;
+ }
+
+ .vis-graph-group4 {
+ fill: #ff0100;
+ fill-opacity:0;
+ stroke-width:2px;
+ stroke: #ff0100;
+ }
+
+ .vis-graph-group5 {
+ fill: #37d8e6;
+ fill-opacity:0;
+ stroke-width:2px;
+ stroke: #37d8e6;
+ }
+
+ .vis-graph-group6 {
+ fill: #042662;
+ fill-opacity:0;
+ stroke-width:2px;
+ stroke: #042662;
+ }
+
+ .vis-graph-group7 {
+ fill:#00ff26;
+ fill-opacity:0;
+ stroke-width:2px;
+ stroke: #00ff26;
+ }
+
+ .vis-graph-group8 {
+ fill:#ff00ff;
+ fill-opacity:0;
+ stroke-width:2px;
+ stroke: #ff00ff;
+ }
+
+ .vis-graph-group9 {
+ fill: #8f3938;
+ fill-opacity:0;
+ stroke-width:2px;
+ stroke: #8f3938;
+ }
+
+ .vis-fill {
+ fill-opacity:0.1;
+ stroke: none;
+ }
+
+
+ .vis-bar {
+ fill-opacity:0.5;
+ stroke-width:1px;
+ }
+
+ .vis-point {
+ stroke-width:2px;
+ fill-opacity:1.0;
+ }
+
+
+ .vis-legend-background {
+ stroke-width:1px;
+ fill-opacity:0.9;
+ fill: #ffffff;
+ stroke: #c2c2c2;
+ }
+
+
+ .vis-outline {
+ stroke-width:1px;
+ fill-opacity:1;
+ fill: #ffffff;
+ stroke: #e5e5e5;
+ }
+
+ .vis-icon-fill {
+ fill-opacity:0.3;
+ stroke: none;
+ }
+
+ div.description-container {
+ float:left;
+ height:30px;
+ width:160px;
+ padding-left:5px;
+ padding-right:5px;
+ line-height: 30px;
+ }
+
+ div.icon-container {
+ float:left;
+ }
+
+ div.legend-element-container {
+ display:inline-block;
+ width:200px;
+ height:30px;
+ border-style:solid;
+ border-width:1px;
+ border-color: #e0e0e0;
+ background-color: #ffffff;
+ margin:4px;
+ padding:4px;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor:pointer;
+ }
+ div.legend-element-container.hidden {
+ background-color: #d3e6ff;
+ }
+
+ svg.legend-icon {
+ width:30px;
+ height:30px;
+ }
+
+ div.external-legend {
+ position:relative;
+ margin-left: -5px;
+ width: 900px;
+ }
+ </style>
+
+ <script src="../../dist/vis.js"></script>
+
+ <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+<body>
+<h2>Graph2d | External custom legend</h2>
+<div style="width:800px; font-size:14px; text-align: justify;">
+ This example shows how to create an external custom legend using the getLegend function. We use normal JavaScript to show and hide the
+ groups by updating the dataset.
+
+</div>
+<br />
+<div id="Legend" class="external-legend"></div>
+<div id="visualization"></div>
+
+
+<script type="text/javascript">
+ // create a dataSet with groups
+ var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
+ var groups = new vis.DataSet();
+ groups.add({
+ id: 0,
+ content: names[0],
+ className: 'custom-style1',
+ options: {
+ drawPoints: {
+ style: 'square' // square, circle
+ },
+ shaded: {
+ orientation: 'bottom' // top, bottom
+ }
+ }});
+
+ groups.add({
+ id: 1,
+ content: names[1],
+ className: 'custom-style2',
+ 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: 'custom-style3',
+ 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},
+ start: '2014-06-09',
+ end: '2014-07-03'
+ };
+ var graph2d = new vis.Graph2d(container, items, groups, options);
+
+
+ /**
+ * this function fills the external legend with content using the getLegend() function.
+ */
+ function populateExternalLegend() {
+ var groupsData = groups.get();
+ var legendDiv = document.getElementById("Legend");
+ legendDiv.innerHTML = "";
+
+ // get for all groups:
+ for (var i = 0; i < groupsData.length; i++) {
+ // create divs
+ var containerDiv = document.createElement("div");
+ var iconDiv = document.createElement("div");
+ var descriptionDiv = document.createElement("div");
+
+ // give divs classes and Ids where necessary
+ containerDiv.className = 'legend-element-container';
+ containerDiv.id = groupsData[i].id + "_legendContainer"
+ iconDiv.className = "icon-container";
+ descriptionDiv.className = "description-container";
+
+ // get the legend for this group.
+ var legend = graph2d.getLegend(groupsData[i].id,30,30);
+
+ // append class to icon. All styling classes from the vis.css/vis-timeline-graph2d.min.css have been copied over into the head here to be able to style the
+ // icons with the same classes if they are using the default ones.
+ legend.icon.setAttributeNS(null, "class", "legend-icon");
+
+ // append the legend to the corresponding divs
+ iconDiv.appendChild(legend.icon);
+ descriptionDiv.innerHTML = legend.label;
+
+ // determine the order for left and right orientation
+ if (legend.orientation == 'left') {
+ descriptionDiv.style.textAlign = "left";
+ containerDiv.appendChild(iconDiv);
+ containerDiv.appendChild(descriptionDiv);
+ }
+ else {
+ descriptionDiv.style.textAlign = "right";
+ containerDiv.appendChild(descriptionDiv);
+ containerDiv.appendChild(iconDiv);
+ }
+
+ // append to the legend container div
+ legendDiv.appendChild(containerDiv);
+
+ // bind click event to this legend element.
+ containerDiv.onclick = toggleGraph.bind(this,groupsData[i].id);
+ }
+ }
+
+ /**
+ * This function switchs the visible option of the selected group on an off.
+ * @param groupId
+ */
+ function toggleGraph(groupId) {
+ // get the container that was clicked on.
+ var container = document.getElementById(groupId + "_legendContainer")
+ // if visible, hide
+ if (graph2d.isGroupVisible(groupId) == true) {
+ groups.update({id:groupId, visible:false});
+ container.className = container.className + " hidden";
+ }
+ else { // if invisible, show
+ groups.update({id:groupId, visible:true});
+ container.className = container.className.replace("hidden","");
+ }
+ }
+
+ populateExternalLegend()
+
+</script>
+</body>
+</html>
diff --git a/www/lib/vis/examples/graph2d/10_barsSideBySide.html b/www/lib/vis/examples/graph2d/10_barsSideBySide.html
new file mode 100644
index 00000000..7afdf6ef
--- /dev/null
+++ b/www/lib/vis/examples/graph2d/10_barsSideBySide.html
@@ -0,0 +1,75 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>Graph2d | Bar Graphs Side by Side Example</title>
+
+ <style type="text/css">
+ body, html {
+ font-family: sans-serif;
+ }
+ </style>
+
+ <script src="../../dist/vis.js"></script>
+ <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+<body>
+<h2>Graph2d | Bar Graphs Side by Side Example</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+ When using Bar graphs, it can often be the case that there are multiple bars on the same timepoint. This may not always be the desired result. You can use the
+ barChart.handleOverlap option to automatically plot the bars next to eachother or stacked on top of eachother if they occupy the same timeslot. By default, this option is on, the bars overlap.
+ Use the dropdown box to experiment with the options. The stacked only really makes sense when using groups as is shown in the <a href="./11_barsSideBySideGroups.html">next example</a>.
+
+ <br /><br />
+ Handle overlap: <select id="dropdownID">
+ <option value="overlap">overlap</option>
+ <option value="sideBySide">sideBySide</option>
+ <option value="stack">stack</option>
+</select><br/>
+</div>
+<br />
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+
+ var container = document.getElementById('visualization');
+ var items = [
+ {x: '2014-06-11', y: 10},
+ {x: '2014-06-12', y: 25},
+ {x: '2014-06-13', y: 30},
+ {x: '2014-06-14', y: 10},
+ {x: '2014-06-15', y: 15},
+ {x: '2014-06-16', y: 30},
+ {x: '2014-06-11', y: -12},
+ {x: '2014-06-14', y: 24},
+ {x: '2014-06-15', y: 5},
+ {x: '2014-06-16', y: 12}
+ ];
+
+ var dataset = new vis.DataSet(items);
+ var options = {
+ style:'bar',
+ stack:false,
+ barChart: {width:50, align:'center', sideBySide:false}, // align: left, center, right
+ drawPoints: false,
+ dataAxis: {
+ icons:true
+ },
+ orientation:'top',
+ start: '2014-06-10',
+ end: '2014-06-18'
+ };
+ var graph2d = new vis.Graph2d(container, items, options);
+
+
+ var dropdown = document.getElementById("dropdownID");
+ dropdown.onchange = update;
+
+ function update() {
+ var options = {stack:dropdown.value === 'stack',barChart:{sideBySide:dropdown.value === 'sideBySide'}};
+ graph2d.setOptions(options);
+ }
+
+</script>
+</body>
+</html> \ No newline at end of file
diff --git a/www/lib/vis/examples/graph2d/11_barsSideBySideGroups.html b/www/lib/vis/examples/graph2d/11_barsSideBySideGroups.html
new file mode 100644
index 00000000..b1ed1504
--- /dev/null
+++ b/www/lib/vis/examples/graph2d/11_barsSideBySideGroups.html
@@ -0,0 +1,88 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>Graph2d | Bar Graphs Side by Side Example with Groups</title>
+
+ <style type="text/css">
+ body, html {
+ font-family: sans-serif;
+ }
+ </style>
+
+ <script src="../../dist/vis.js"></script>
+ <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+<body>
+<h2>Graph2d | Bar Graphs Side by Side Example with Groups</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+ When using Bar graphs, it can often be the case that there are multiple bars on the same timepoint. This may not always be the desired result. You can use the
+ barChart.handleOverlap option to automatically plot the bars next to eachother or stacked on top of eachother if they occupy the same timeslot. By default, this option is on, the bars overlap.
+ Use the dropdown box to experiment with the options. The stacked only really makes sense when using groups as is shown here.
+
+ <br /><br />
+ Handle overlap: <select id="dropdownID">
+ <option value="overlap">overlap</option>
+ <option value="sideBySide" selected="selected">sideBySide</option>
+ <option value="stack">stack</option>
+ </select>
+</div>
+<br />
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+
+ var container = document.getElementById('visualization');
+ var groups = new vis.DataSet();
+ groups.add({id: 0, content: "group0"})
+ groups.add({id: 1, content: "group1"})
+ groups.add({id: 2, content: "group2"})
+
+ 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},
+ {x: '2014-06-11', y: 12, group:1},
+ {x: '2014-06-12', y: 15, group:1},
+ {x: '2014-06-13', y: 34, group:1},
+ {x: '2014-06-14', y: 24, group:1},
+ {x: '2014-06-15', y: 5, group:1},
+ {x: '2014-06-16', y: 12, group:1},
+ {x: '2014-06-11', y: 22, group:2},
+ {x: '2014-06-12', y: 14, group:2},
+ {x: '2014-06-13', y: 24, group:2},
+ {x: '2014-06-14', y: 21, group:2},
+ {x: '2014-06-15', y: 30, group:2},
+ {x: '2014-06-16', y: 18, group:2}
+ ];
+
+ var dataset = new vis.DataSet(items);
+ var options = {
+ style:'bar',
+ stack:false,
+ barChart: {width:50, align:'center', sideBySide:true}, // align: left, center, right
+ drawPoints: false,
+ dataAxis: {
+ icons:true
+ },
+ orientation:'top',
+ start: '2014-06-10',
+ end: '2014-06-18'
+ };
+ var graph2d = new vis.Graph2d(container, items, groups, options);
+
+ var dropdown = document.getElementById("dropdownID");
+ dropdown.onchange = update;
+
+ function update() {
+ var options = {stack:dropdown.value === 'stack',barChart:{sideBySide:dropdown.value === 'sideBySide'}};
+ graph2d.setOptions(options);
+ }
+
+
+</script>
+</body>
+</html> \ No newline at end of file
diff --git a/www/lib/vis/examples/graph2d/12_customRange.html b/www/lib/vis/examples/graph2d/12_customRange.html
new file mode 100644
index 00000000..0e85ab53
--- /dev/null
+++ b/www/lib/vis/examples/graph2d/12_customRange.html
@@ -0,0 +1,92 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>Graph2d | Bar Graph Example</title>
+
+ <style type="text/css">
+ body, html {
+ font-family: sans-serif;
+ }
+ </style>
+
+ <script src="../../dist/vis.js"></script>
+ <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+<body>
+<h2>Graph2d | Custom axis range</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+ You can define a custom range for the Y axis. Since there are two Y axis, you can define both of them. You can also
+ only define the min or max values. Since one of the Y axis is slaved to the other one (the right one is slaved to the left one),
+ you cannot absolutely define the range of the slaved axis because it has to use the same lines. The values you supply are used as guidelines however.
+ If the zero-lines have to be aligned, you can use the option alignZeros. It is enabled by default.
+
+<pre class="prettyprint lang-js">
+var options = {
+ dataAxis: {
+ left: {
+ range: {min:-5, max:30}
+ },
+ right: {
+ range: {min:-5}
+ }
+ }
+};
+</pre>
+</div>
+<br />
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+
+ var container = document.getElementById('visualization');
+ var groups = new vis.DataSet();
+ groups.add({id: 0, content: "group0"})
+ groups.add({id: 1, content: "group1"})
+ groups.add({id: 2, content: "group2",options:{ yAxisOrientation:'right'}})
+
+ 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},
+ {x: '2014-06-11', y: 12, group:1},
+ {x: '2014-06-12', y: 15, group:1},
+ {x: '2014-06-13', y: 34, group:1},
+ {x: '2014-06-14', y: 24, group:1},
+ {x: '2014-06-15', y: 5, group:1},
+ {x: '2014-06-16', y: 12, group:1},
+ {x: '2014-06-11', y: 22, group:2},
+ {x: '2014-06-12', y: 14, group:2},
+ {x: '2014-06-13', y: 24, group:2},
+ {x: '2014-06-14', y: 21, group:2},
+ {x: '2014-06-15', y: 30, group:2},
+ {x: '2014-06-16', y: 18, group:2}
+ ];
+
+ var dataset = new vis.DataSet(items);
+ var options = {
+ style:'bar',
+ barChart: {width:50, align:'center', sideBySide:true}, // align: left, center, right
+ drawPoints: true,
+ dataAxis: {
+ left: {
+ range: {min:-5, max:30}
+ },
+ right: {
+ range: {min:-5}
+ },
+ icons:true
+ },
+ orientation:'top',
+ start: '2014-06-10',
+ end: '2014-06-18'
+
+ };
+ var graph2d = new vis.Graph2d(container, items, groups, options);
+
+</script>
+</body>
+</html> \ No newline at end of file
diff --git a/www/lib/vis/examples/graph2d/13_localization.html b/www/lib/vis/examples/graph2d/13_localization.html
new file mode 100644
index 00000000..c0130d5d
--- /dev/null
+++ b/www/lib/vis/examples/graph2d/13_localization.html
@@ -0,0 +1,65 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+ <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+ <meta content="utf-8" http-equiv="encoding">
+ <title>Graph2d | Localization</title>
+
+ <style type="text/css">
+ body, html, select {
+ font-family: sans-serif;
+ font-size: 11pt;
+ }
+ </style>
+
+ <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.1/moment-with-locales.min.js"></script>
+ <script src="../../dist/vis.js"></script>
+ <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+<body>
+<h2>Graph2d | Localization</h2>
+<p>
+ To localize Graph2d, one has to load a version of moment.js including locales. To set a locale, specify option <code>{locale: STRING}</code>.
+</p>
+
+<p>
+ <label for="locale">Select a locale:</label>
+ <select id="locale">
+ <option value="en" selected>en</option>
+ <option value="nl">nl</option>
+ </select>
+</p>
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+
+ var container = document.getElementById('visualization');
+ var items = [
+ {x: '2014-06-11', y: 10},
+ {x: '2014-06-12', y: 25},
+ {x: '2014-06-13', y: 30},
+ {x: '2014-06-14', y: 10},
+ {x: '2014-06-15', y: 15},
+ {x: '2014-06-16', y: 30}
+ ];
+
+ var dataset = new vis.DataSet(items);
+ var options = {
+ start: '2014-06-10',
+ end: '2014-06-18'
+ };
+ var graph2d = new vis.Graph2d(container, dataset, options);
+
+ // update the locale when changing the select box value
+ var select = document.getElementById('locale');
+ select.onchange = function () {
+ graph2d.setOptions({
+ locale: this.value
+ });
+ };
+ select.onchange();
+</script>
+</body>
+</html> \ No newline at end of file
diff --git a/www/lib/vis/examples/graph2d/14_toggleGroups.html b/www/lib/vis/examples/graph2d/14_toggleGroups.html
new file mode 100644
index 00000000..60db882b
--- /dev/null
+++ b/www/lib/vis/examples/graph2d/14_toggleGroups.html
@@ -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-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></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', 'Bargraph', '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, groups, options);
+ var graph2d2 = new vis.Graph2d(document.getElementById('visualization2'), dataset, groups, options);
+ var graph2d3 = new vis.Graph2d(document.getElementById('visualization3'), dataset, groups, options);
+ var graph2d4 = new vis.Graph2d(document.getElementById('visualization4'), dataset, groups, options);
+ var graph2d5 = new vis.Graph2d(document.getElementById('visualization5'), dataset, groups, options);
+ var graph2d6 = new vis.Graph2d(document.getElementById('visualization6'), dataset, groups, options);
+
+ 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> \ No newline at end of file
diff --git a/www/lib/vis/examples/graph2d/15_streaming_data.html b/www/lib/vis/examples/graph2d/15_streaming_data.html
new file mode 100644
index 00000000..1a822391
--- /dev/null
+++ b/www/lib/vis/examples/graph2d/15_streaming_data.html
@@ -0,0 +1,122 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+ <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+ <meta content="utf-8" http-equiv="encoding">
+ <title>Graph2d | Streaming data</title>
+
+ <style type="text/css">
+ body, html, select {
+ font: 10pt sans-serif;
+ }
+ </style>
+
+ <script src="../../dist/vis.js"></script>
+ <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+<body>
+<h2>Graph2d | Streaming data</h2>
+<p style="max-width: 700px;">
+ This example demonstrates how to apply streaming data input to the Graph2d. The example shows two different ways to let the window move along with the new data, and there are more strategies for that. Note also that it is possible to disable moving and/or zooming the graph by setting options <code>moveable</code> and <code>zoomable</code> false.
+</p>
+
+<p>
+ <label for="strategy">Strategy:</label>
+ <select id="strategy">
+ <option value="continuous" selected>Continuous (CPU intensive)</option>
+ <option value="discrete">Discrete</option>
+ <option value="static">Static</option>
+ </select>
+</p>
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+ var DELAY = 1000; // delay in ms to add new data points
+
+ var strategy = document.getElementById('strategy');
+
+ // create a graph2d with an (currently empty) dataset
+ var container = document.getElementById('visualization');
+ var dataset = new vis.DataSet();
+
+ var options = {
+ start: vis.moment().add(-30, 'seconds'), // changed so its faster
+ end: vis.moment(),
+ dataAxis: {
+ left: {
+ range: {
+ min:-10, max: 10
+ }
+ }
+ },
+ drawPoints: {
+ style: 'circle' // square, circle
+ },
+ shaded: {
+ orientation: 'bottom' // top, bottom
+ }
+ };
+ var graph2d = new vis.Graph2d(container, dataset, options);
+
+ // a function to generate data points
+ function y(x) {
+ return (Math.sin(x / 2) + Math.cos(x / 4)) * 5;
+ }
+
+ function renderStep() {
+ // move the window (you can think of different strategies).
+ var now = vis.moment();
+ var range = graph2d.getWindow();
+ var interval = range.end - range.start;
+ switch (strategy.value) {
+ case 'continuous':
+ // continuously move the window
+ graph2d.setWindow(now - interval, now, {animation: false});
+ requestAnimationFrame(renderStep);
+ break;
+
+ case 'discrete':
+ graph2d.setWindow(now - interval, now, {animation: false});
+ setTimeout(renderStep, DELAY);
+ break;
+
+ default: // 'static'
+ // move the window 90% to the left when now is larger than the end of the window
+ if (now > range.end) {
+ graph2d.setWindow(now - 0.1 * interval, now + 0.9 * interval);
+ }
+ setTimeout(renderStep, DELAY);
+ break;
+ }
+ }
+ renderStep();
+
+ /**
+ * Add a new datapoint to the graph
+ */
+ function addDataPoint() {
+ // add a new data point to the dataset
+ var now = vis.moment();
+ dataset.add({
+ x: now,
+ y: y(now / 1000)
+ });
+
+ // remove all data points which are no longer visible
+ var range = graph2d.getWindow();
+ var interval = range.end - range.start;
+ var oldIds = dataset.getIds({
+ filter: function (item) {
+ return item.x < range.start - interval;
+ }
+ });
+ dataset.remove(oldIds);
+
+ setTimeout(addDataPoint, DELAY);
+ }
+ addDataPoint();
+</script>
+</body>
+</html> \ No newline at end of file
diff --git a/www/lib/vis/examples/graph2d/16_bothAxisTitles.html b/www/lib/vis/examples/graph2d/16_bothAxisTitles.html
new file mode 100644
index 00000000..5fe0e6d8
--- /dev/null
+++ b/www/lib/vis/examples/graph2d/16_bothAxisTitles.html
@@ -0,0 +1,201 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>Graph2d | Axis Titles and Styling</title>
+ <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+ <script src="../../dist/vis.js"></script>
+
+ <style type="text/css">
+ body, html {
+ font-family: sans-serif;
+ }
+
+ .custom-style1 {
+ fill: #f2ea00;
+ fill-opacity:0;
+ stroke-width:2px;
+ stroke: #b3ab00;
+ }
+
+ .custom-style2 {
+ fill: #00a0f2;
+ fill-opacity:0;
+ stroke-width:2px;
+ stroke: #050092;
+ }
+
+ .custom-style3 {
+ fill: #00f201;
+ fill-opacity:0;
+ stroke-width:2px;
+ stroke: #029200;
+ }
+ path.custom-style3.vis-fill {
+ fill-opacity:0.5 !important;
+ stroke: none;
+ }
+ </style>
+
+ <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</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>
+ </table>
+ </td>
+ </tr>
+</table>
+</div>
+<br />
+<div id="visualization"></div>
+
+<script type="text/javascript">
+ // create a dataSet with groups
+ var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
+ var groups = new vis.DataSet();
+ groups.add({
+ id: 0,
+ content: names[0],
+ className: 'custom-style1',
+ options: {
+ drawPoints: {
+ style: 'square' // square, circle
+ },
+ shaded: {
+ orientation: 'bottom' // top, bottom
+ }
+ }});
+
+ groups.add({
+ id: 1,
+ content: names[1],
+ className: 'custom-style2',
+ 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: 'custom-style3',
+ 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,
+ right: {
+ title: {
+ 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: {left: {title: title}}});
+ }
+ else {
+ graph2d.setOptions({dataAxis: {right: {title: 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: {left: {title: title}}});
+ }
+ else {
+ graph2d.setOptions({dataAxis: {right: {title: title}}});
+ }
+ }
+
+</script>
+</body>
+</html> \ No newline at end of file
diff --git a/www/lib/vis/examples/graph2d/17_dynamicStyling.html b/www/lib/vis/examples/graph2d/17_dynamicStyling.html
new file mode 100644
index 00000000..01beacf4
--- /dev/null
+++ b/www/lib/vis/examples/graph2d/17_dynamicStyling.html
@@ -0,0 +1,257 @@
+<!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-timeline-graph2d.min.css" rel="stylesheet" type="text/css"/>
+<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></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">bottom</option>
+ <option value="zero" selected="selected">zero</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="fill-opacity:0.1;">0.1</option>
+ <option value="fill-opacity:0.2;">0.2</option>
+ <option value="fill-opacity:0.3;">0.3</option>
+ <option value="fill-opacity:0.4;">0.4</option>
+ <option value="fill-opacity:0.5;">0.5</option>
+ <option value="fill-opacity:0.6;" selected="selected">0.6</option>
+ <option value="fill-opacity:0.7;">0.7</option>
+ <option value="fill-opacity:0.8;">0.8</option>
+ <option value="fill-opacity:0.9;">0.9</option>
+ <option value="fill-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: 'zero' // 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>
diff --git a/www/lib/vis/examples/graph2d/18_scatterplot.html b/www/lib/vis/examples/graph2d/18_scatterplot.html
new file mode 100644
index 00000000..bdeb63e4
--- /dev/null
+++ b/www/lib/vis/examples/graph2d/18_scatterplot.html
@@ -0,0 +1,63 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>Graph2d | Scatterplot</title>
+
+ <style type="text/css">
+ body, html {
+ font-family: sans-serif;
+ }
+ </style>
+
+ <script src="../../dist/vis.js"></script>
+ <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+<body>
+<h2>Graph2d | Scatterplot</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+ You can manually disable the automatic sorting of the datapoints by using the <code>sort</code> option. You can use this with the
+ <code>style: 'points'</code> option for making a scatterplot!
+</div>
+<pre class="prettyprint lang-js">
+var options = {
+ sort: false,
+ sampling:false,
+ style:'points'
+};
+</pre>
+<br />
+<div id="visualization"></div>
+
+<script type="text/javascript">
+
+ var container = document.getElementById('visualization');
+ var items = [];
+ for (var i = 0; i < 100; i++) {
+ items.push({x: new Date('2014-06-11').valueOf() + Math.floor(Math.random() * 30000), y: 500 + (Math.random() * 100)});
+ }
+
+ var dataset = new vis.DataSet(items);
+ var options = {
+ sort: false,
+ sampling:false,
+ style:'points',
+ dataAxis: {
+ left: {
+ range: {
+ min: 300, max: 800
+ }
+ }
+ },
+ drawPoints: {
+ enabled: true,
+ size: 6,
+ style: 'circle' // square, circle
+ },
+ defaultGroup: 'Scatterplot',
+ height: '600px'
+ };
+ var graph2d = new vis.Graph2d(container, dataset, options);
+
+</script>
+</body>
+</html> \ No newline at end of file
diff --git a/www/lib/vis/examples/graph2d/19_labels.html b/www/lib/vis/examples/graph2d/19_labels.html
new file mode 100644
index 00000000..f93853eb
--- /dev/null
+++ b/www/lib/vis/examples/graph2d/19_labels.html
@@ -0,0 +1,135 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+ <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+ <meta content="utf-8" http-equiv="encoding">
+ <title>Graph2d | Basic Example</title>
+
+ <style type="text/css">
+ body, html {
+ font-family: sans-serif;
+ }
+
+ .red {
+ fill:red;
+ }
+ </style>
+
+ <script src="../../dist/vis.js"></script>
+ <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+<body>
+<h2>Graph2d | Label Example</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+ This example shows the how to add a label to each point in Graph2d. Each item can have a label object which contains the content and CSS class.In addition, xOffset and yOffset will adjust the location of the label relative to the point being labelled.
+
+
+ <br /><br />
+
+</div>
+<br />
+<div id="visualization"></div>
+
+<script type="text/javascript">
+
+ var container = document.getElementById('visualization');
+ var label1 = {
+ content: "Label 1 (with offset)",
+ xOffset: 20,
+ yOffset: 20
+ }
+
+ var label2 = {
+ content: "Label 2",
+ className: "red"
+ }
+
+ var label3 = {
+ content: "Label 3"
+ }
+ var items = [
+ {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-29',
+ style: 'bar',
+ drawPoints: {
+ onRender: function(item, group, grap2d) {
+ return item.label != null;
+ },
+ style: 'circle'
+ }
+
+ };
+
+ var graph2d = new vis.Graph2d(container, dataset, groups, options);
+
+</script>
+</body>
+</html> \ No newline at end of file
diff --git a/www/lib/vis/examples/graph2d/20_shading.html b/www/lib/vis/examples/graph2d/20_shading.html
new file mode 100644
index 00000000..1bfb4bdb
--- /dev/null
+++ b/www/lib/vis/examples/graph2d/20_shading.html
@@ -0,0 +1,117 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>Graph2d | Shading 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;
+ }
+ </style>
+
+ <script src="../../dist/vis.js"></script>
+ <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
+<body>
+<h2>Graph2d | Shading Example</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+ This example shows the shading functionality within Graph2d.
+</div>
+<br />
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+ // create a dataSet with groups
+ var names = ['top', 'bottom', 'zero', 'none', 'group', 'none'];
+ var groups = new vis.DataSet();
+ groups.add({
+ id: 0,
+ content: names[0],
+ options: {
+ shaded: {
+ orientation: 'top'
+ }
+ }});
+
+ groups.add({
+ id: 1,
+ content: names[1],
+ options: {
+ shaded: {
+ orientation: 'bottom'
+ }
+ }});
+
+ groups.add({
+ id: 2,
+ content: names[2],
+ options: {
+ shaded: {
+ orientation: 'zero'
+ }
+ }});
+
+ groups.add({
+ id: 3,
+ options: {
+ excludeFromLegend: true
+ }
+ });
+
+ groups.add({
+ id: 4,
+ content: names[4],
+ options: {
+ shaded: {
+ orientation: 'group',
+ groupId: '3'
+ }
+ }
+ });
+
+ groups.add({
+ id: 5,
+ content: names[5]
+ });
+
+ var container = document.getElementById('visualization');
+ var items = [
+ {x: '2014-06-11', y: 0, group: 0},
+ {x: '2014-06-12', y: 15, group: 0},
+ {x: '2014-06-13', y: -15, group: 0},
+ {x: '2014-06-14', y: 0, group: 0},
+ {x: '2014-06-15', y: 0, group: 1},
+ {x: '2014-06-16', y: 15, group: 1},
+ {x: '2014-06-17', y: -15, group: 1},
+ {x: '2014-06-18', y: 0, group: 1},
+ {x: '2014-06-19', y: 0, group: 2},
+ {x: '2014-06-20', y: 15, group: 2},
+ {x: '2014-06-21', y: -15, group: 2},
+ {x: '2014-06-22', y: 0, group: 2},
+ {x: '2014-06-23', y: -2, group: 3},
+ {x: '2014-06-24', y: 13, group: 3},
+ {x: '2014-06-25', y: -17, group: 3},
+ {x: '2014-06-26', y: -2, group: 3},
+ {x: '2014-06-23', y: 2, group: 4},
+ {x: '2014-06-24', y: 17, group: 4},
+ {x: '2014-06-25', y: -13, group: 4},
+ {x: '2014-06-26', y: 2, group: 4},
+ {x: '2014-06-27', y: 0, group: 5},
+ {x: '2014-06-28', y: 15, group: 5},
+ {x: '2014-06-29', y: -15, group: 5},
+ {x: '2014-06-30', y: 0, group: 5}
+ ];
+
+ var dataset = new vis.DataSet(items);
+ var options = {
+ legend: true,
+ start: '2014-06-07',
+ end: '2014-07-03'
+ };
+ var graph2d = new vis.Graph2d(container, dataset, groups, options);
+
+</script>
+</body>
+</html>
diff --git a/www/lib/vis/examples/graph2d/default.css b/www/lib/vis/examples/graph2d/default.css
new file mode 100644
index 00000000..f7afb828
--- /dev/null
+++ b/www/lib/vis/examples/graph2d/default.css
@@ -0,0 +1,87 @@
+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 {
+ margin: 0 auto;
+ padding-bottom: 50px;
+ width: 900px;
+}
+
+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 #a0c0f0;
+ color: #2B7CE9;
+}
+
+h3 {
+ font-size: 140%;
+}
+
+
+a {
+ color: #2B7CE9;
+ text-decoration: none;
+}
+a:visited {
+ color: #2E60A4;
+}
+a:hover {
+ color: red;
+ text-decoration: underline;
+}
+
+hr {
+ border: none 0;
+ border-top: 1px solid #abc;
+ height: 1px;
+}
+
+pre {
+ display: block;
+ font-size: 10pt;
+ line-height: 1.5em;
+ font-family: monospace;
+}
+
+pre, code {
+ background-color: #f5f5f5;
+}
+
+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;
+}
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-06 14:36:03 +0000