diff options
Diffstat (limited to 'www/lib/vis/examples')
125 files changed, 1457 insertions, 207 deletions
diff --git a/www/lib/vis/examples/graph2d/01_basic.html b/www/lib/vis/examples/graph2d/01_basic.html index 68ec7cbd..22c0931f 100644 --- a/www/lib/vis/examples/graph2d/01_basic.html +++ b/www/lib/vis/examples/graph2d/01_basic.html @@ -13,7 +13,7 @@ </style> <script src="../../dist/vis.js"></script> - <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> + <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> diff --git a/www/lib/vis/examples/graph2d/02_bars.html b/www/lib/vis/examples/graph2d/02_bars.html index 28493c42..42957d74 100644 --- a/www/lib/vis/examples/graph2d/02_bars.html +++ b/www/lib/vis/examples/graph2d/02_bars.html @@ -10,7 +10,7 @@ </style> <script src="../../dist/vis.js"></script> - <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> + <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> diff --git a/www/lib/vis/examples/graph2d/03_groups.html b/www/lib/vis/examples/graph2d/03_groups.html index 19f3ab8c..fe5fa887 100644 --- a/www/lib/vis/examples/graph2d/03_groups.html +++ b/www/lib/vis/examples/graph2d/03_groups.html @@ -11,7 +11,7 @@ </style> <script src="../../dist/vis.js"></script> - <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> + <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> diff --git a/www/lib/vis/examples/graph2d/04_rightAxis.html b/www/lib/vis/examples/graph2d/04_rightAxis.html index 756d9045..f13af137 100644 --- a/www/lib/vis/examples/graph2d/04_rightAxis.html +++ b/www/lib/vis/examples/graph2d/04_rightAxis.html @@ -24,7 +24,7 @@ </style> <script src="../../dist/vis.js"></script> - <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> + <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> diff --git a/www/lib/vis/examples/graph2d/05_bothAxis.html b/www/lib/vis/examples/graph2d/05_bothAxis.html index 093c896f..7b2a04c2 100644 --- a/www/lib/vis/examples/graph2d/05_bothAxis.html +++ b/www/lib/vis/examples/graph2d/05_bothAxis.html @@ -2,7 +2,7 @@ <html> <head> <title>Graph2d | Both Axis Example</title> - <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../dist/vis.js"></script> <style type="text/css"> diff --git a/www/lib/vis/examples/graph2d/06_interpolation.html b/www/lib/vis/examples/graph2d/06_interpolation.html index a6ddc53b..9daa7e07 100644 --- a/www/lib/vis/examples/graph2d/06_interpolation.html +++ b/www/lib/vis/examples/graph2d/06_interpolation.html @@ -2,7 +2,7 @@ <html> <head> <title>Graph2d | Interpolation</title> - <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body, html { font-family: sans-serif; diff --git a/www/lib/vis/examples/graph2d/07_scrollingAndSorting.html b/www/lib/vis/examples/graph2d/07_scrollingAndSorting.html index 2b997e45..f9328dc7 100644 --- a/www/lib/vis/examples/graph2d/07_scrollingAndSorting.html +++ b/www/lib/vis/examples/graph2d/07_scrollingAndSorting.html @@ -10,7 +10,7 @@ </style> <script src="../../dist/vis.js"></script> - <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> + <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> diff --git a/www/lib/vis/examples/graph2d/08_performance.html b/www/lib/vis/examples/graph2d/08_performance.html index 9625b51d..9a2ad2e1 100644 --- a/www/lib/vis/examples/graph2d/08_performance.html +++ b/www/lib/vis/examples/graph2d/08_performance.html @@ -18,7 +18,7 @@ <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.css" rel="stylesheet" type="text/css" /> + <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> diff --git a/www/lib/vis/examples/graph2d/09_external_legend.html b/www/lib/vis/examples/graph2d/09_external_legend.html index 39ec3228..8ec82fa8 100644 --- a/www/lib/vis/examples/graph2d/09_external_legend.html +++ b/www/lib/vis/examples/graph2d/09_external_legend.html @@ -2,7 +2,7 @@ <html> <head> <title>Graph2d | External legend Example</title> - <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body, html { font-family: sans-serif; @@ -310,7 +310,7 @@ // 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 have been copied over into the head here to be able to style the + // 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"); @@ -360,4 +360,4 @@ </script> </body> -</html>
\ No newline at end of file +</html> diff --git a/www/lib/vis/examples/graph2d/10_barsSideBySide.html b/www/lib/vis/examples/graph2d/10_barsSideBySide.html index c9d89f0f..7afdf6ef 100644 --- a/www/lib/vis/examples/graph2d/10_barsSideBySide.html +++ b/www/lib/vis/examples/graph2d/10_barsSideBySide.html @@ -10,7 +10,7 @@ </style> <script src="../../dist/vis.js"></script> - <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> + <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> diff --git a/www/lib/vis/examples/graph2d/11_barsSideBySideGroups.html b/www/lib/vis/examples/graph2d/11_barsSideBySideGroups.html index 945fd30a..b1ed1504 100644 --- a/www/lib/vis/examples/graph2d/11_barsSideBySideGroups.html +++ b/www/lib/vis/examples/graph2d/11_barsSideBySideGroups.html @@ -10,7 +10,7 @@ </style> <script src="../../dist/vis.js"></script> - <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> + <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> diff --git a/www/lib/vis/examples/graph2d/12_customRange.html b/www/lib/vis/examples/graph2d/12_customRange.html index 79e6a14f..0e85ab53 100644 --- a/www/lib/vis/examples/graph2d/12_customRange.html +++ b/www/lib/vis/examples/graph2d/12_customRange.html @@ -10,7 +10,7 @@ </style> <script src="../../dist/vis.js"></script> - <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> + <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> diff --git a/www/lib/vis/examples/graph2d/13_localization.html b/www/lib/vis/examples/graph2d/13_localization.html index 5410b05b..c0130d5d 100644 --- a/www/lib/vis/examples/graph2d/13_localization.html +++ b/www/lib/vis/examples/graph2d/13_localization.html @@ -15,7 +15,7 @@ <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.css" rel="stylesheet" type="text/css" /> + <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> diff --git a/www/lib/vis/examples/graph2d/14_toggleGroups.html b/www/lib/vis/examples/graph2d/14_toggleGroups.html index c699003f..60db882b 100644 --- a/www/lib/vis/examples/graph2d/14_toggleGroups.html +++ b/www/lib/vis/examples/graph2d/14_toggleGroups.html @@ -16,7 +16,7 @@ </style> <script src="../../dist/vis.js"></script> - <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> + <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> diff --git a/www/lib/vis/examples/graph2d/15_streaming_data.html b/www/lib/vis/examples/graph2d/15_streaming_data.html index 0eb7cac0..1a822391 100644 --- a/www/lib/vis/examples/graph2d/15_streaming_data.html +++ b/www/lib/vis/examples/graph2d/15_streaming_data.html @@ -13,7 +13,7 @@ </style> <script src="../../dist/vis.js"></script> - <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> + <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> diff --git a/www/lib/vis/examples/graph2d/16_bothAxisTitles.html b/www/lib/vis/examples/graph2d/16_bothAxisTitles.html index 3c08b18a..5fe0e6d8 100644 --- a/www/lib/vis/examples/graph2d/16_bothAxisTitles.html +++ b/www/lib/vis/examples/graph2d/16_bothAxisTitles.html @@ -2,7 +2,7 @@ <html> <head> <title>Graph2d | Axis Titles and Styling</title> - <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../dist/vis.js"></script> <style type="text/css"> diff --git a/www/lib/vis/examples/graph2d/17_dynamicStyling.html b/www/lib/vis/examples/graph2d/17_dynamicStyling.html index 414313f5..01beacf4 100644 --- a/www/lib/vis/examples/graph2d/17_dynamicStyling.html +++ b/www/lib/vis/examples/graph2d/17_dynamicStyling.html @@ -13,7 +13,7 @@ </style> <script src="../../dist/vis.js"></script> - <link href="../../dist/vis.css" rel="stylesheet" type="text/css"/> + <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> diff --git a/www/lib/vis/examples/graph2d/18_scatterplot.html b/www/lib/vis/examples/graph2d/18_scatterplot.html index d56f8222..bdeb63e4 100644 --- a/www/lib/vis/examples/graph2d/18_scatterplot.html +++ b/www/lib/vis/examples/graph2d/18_scatterplot.html @@ -10,7 +10,7 @@ </style> <script src="../../dist/vis.js"></script> - <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> + <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> diff --git a/www/lib/vis/examples/graph2d/19_labels.html b/www/lib/vis/examples/graph2d/19_labels.html index 6fd102bf..f93853eb 100644 --- a/www/lib/vis/examples/graph2d/19_labels.html +++ b/www/lib/vis/examples/graph2d/19_labels.html @@ -17,7 +17,7 @@ </style> <script src="../../dist/vis.js"></script> - <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> + <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> diff --git a/www/lib/vis/examples/graph2d/20_shading.html b/www/lib/vis/examples/graph2d/20_shading.html index 1fc0980c..1bfb4bdb 100644 --- a/www/lib/vis/examples/graph2d/20_shading.html +++ b/www/lib/vis/examples/graph2d/20_shading.html @@ -11,7 +11,7 @@ </style> <script src="../../dist/vis.js"></script> - <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> + <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> diff --git a/www/lib/vis/examples/graph3d/11_tooltips.html b/www/lib/vis/examples/graph3d/11_tooltips.html index 6ae32a39..c37b35f4 100644 --- a/www/lib/vis/examples/graph3d/11_tooltips.html +++ b/www/lib/vis/examples/graph3d/11_tooltips.html @@ -5,6 +5,12 @@ <style> body {font: 10pt arial;} + div#info { + width : 600px; + text-align: center; + margin-top: 2em; + font-size : 1.2em; + } </style> <script type="text/javascript" src="../../dist/vis.js"></script> @@ -24,6 +30,11 @@ // Create and populate a data table. data = new vis.DataSet(); + var extra_content = [ + 'Arbitrary information', + 'You can access data from the point source object', + 'Tooltip example content', + ]; // create some nice looking data with sin/cos var steps = 5; // number of datapoints will be steps*steps @@ -34,10 +45,10 @@ var z = custom(x,y); if (withValue) { var value = (y - x); - data.add({x:x, y:y, z: z, style:value}); + data.add({x:x, y:y, z: z, style:value, extra: extra_content[(x*y) % extra_content.length]}); } else { - data.add({x:x, y:y, z: z}); + data.add({x:x, y:y, z: z, extra: extra_content[(x*y) % extra_content.length]}); } } } @@ -48,14 +59,16 @@ height: '600px', style: style, showPerspective: true, + showLegend: true, showGrid: true, showShadow: false, // Option tooltip can be true, false, or a function returning a string with HTML contents //tooltip: true, tooltip: function (point) { - // parameter point contains properties x, y, z - return 'value: <b>' + point.z + '</b>'; + // parameter point contains properties x, y, z, and data + // data is the original object passed to the point constructor + return 'value: <b>' + point.z + '</b><br>' + point.data.extra; }, keepAspectRatio: true, @@ -99,6 +112,7 @@ <div id="mygraph"></div> -<div id="info"></div> +<div id="info">Hover the mouse cursor over the graph to see tooltips.</div> + </body> </html> diff --git a/www/lib/vis/examples/graph3d/playground/index.html b/www/lib/vis/examples/graph3d/playground/index.html index 4f42260e..134bb264 100644 --- a/www/lib/vis/examples/graph3d/playground/index.html +++ b/www/lib/vis/examples/graph3d/playground/index.html @@ -117,6 +117,10 @@ <td><input type="checkbox" id="showPerspective" checked /></td> </tr> <tr> + <td>showLegend</td> + <td><input type="checkbox" id="showLegend" checked /></td> + </tr> + <tr> <td>showShadow</td> <td><input type="checkbox" id="showShadow" /></td> </tr> diff --git a/www/lib/vis/examples/graph3d/playground/playground.js b/www/lib/vis/examples/graph3d/playground/playground.js index 5b93dddb..a2e28728 100644 --- a/www/lib/vis/examples/graph3d/playground/playground.js +++ b/www/lib/vis/examples/graph3d/playground/playground.js @@ -407,6 +407,7 @@ function getOptions() { showAnimationControls: (document.getElementById("showAnimationControls").checked != false), showGrid: (document.getElementById("showGrid").checked != false), showPerspective: (document.getElementById("showPerspective").checked != false), + showLegend: (document.getElementById("showLegend").checked != false), showShadow: (document.getElementById("showShadow").checked != false), keepAspectRatio: (document.getElementById("keepAspectRatio").checked != false), verticalRatio: document.getElementById("verticalRatio").value, diff --git a/www/lib/vis/examples/network/basicUsage.html b/www/lib/vis/examples/network/basicUsage.html index 278b938e..2b8b086c 100644 --- a/www/lib/vis/examples/network/basicUsage.html +++ b/www/lib/vis/examples/network/basicUsage.html @@ -4,7 +4,7 @@ <title>Network | Basic usage</title> <script type="text/javascript" src="../../dist/vis.js"></script> - <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/data/datasets.html b/www/lib/vis/examples/network/data/datasets.html index df93b81a..c4bb5f8f 100644 --- a/www/lib/vis/examples/network/data/datasets.html +++ b/www/lib/vis/examples/network/data/datasets.html @@ -4,7 +4,7 @@ <title>Network | Dynamic Data</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/data/dotLanguage/dotLanguage.html b/www/lib/vis/examples/network/data/dotLanguage/dotLanguage.html index d7ae8c63..318aa91d 100644 --- a/www/lib/vis/examples/network/data/dotLanguage/dotLanguage.html +++ b/www/lib/vis/examples/network/data/dotLanguage/dotLanguage.html @@ -3,7 +3,7 @@ <title>Network | DOT Language</title> <script src="../../../../dist/vis.js"></script> - <link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script src="../../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/network/data/dotLanguage/dotPlayground.html b/www/lib/vis/examples/network/data/dotLanguage/dotPlayground.html index 352c553d..b31bfd48 100644 --- a/www/lib/vis/examples/network/data/dotLanguage/dotPlayground.html +++ b/www/lib/vis/examples/network/data/dotLanguage/dotPlayground.html @@ -5,7 +5,7 @@ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="../../../../dist/vis.js"></script> - <link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body, html { diff --git a/www/lib/vis/examples/network/data/dynamicData.html b/www/lib/vis/examples/network/data/dynamicData.html index 0b736675..1c54e34b 100644 --- a/www/lib/vis/examples/network/data/dynamicData.html +++ b/www/lib/vis/examples/network/data/dynamicData.html @@ -53,7 +53,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/> <script type="text/javascript"> var nodes, edges, network; diff --git a/www/lib/vis/examples/network/data/importingFromGephi.html b/www/lib/vis/examples/network/data/importingFromGephi.html index 857acb91..f39f15a4 100644 --- a/www/lib/vis/examples/network/data/importingFromGephi.html +++ b/www/lib/vis/examples/network/data/importingFromGephi.html @@ -7,7 +7,7 @@ <script type="text/javascript" src="../exampleUtil.js"></script> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link type="text/css" rel="stylesheet" href="../../../dist/vis.css"> + <link type="text/css" rel="stylesheet" href="../../../dist/vis-network.min.css"> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/data/scalingCustom.html b/www/lib/vis/examples/network/data/scalingCustom.html index 0172a886..b1ffede5 100644 --- a/www/lib/vis/examples/network/data/scalingCustom.html +++ b/www/lib/vis/examples/network/data/scalingCustom.html @@ -15,7 +15,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; diff --git a/www/lib/vis/examples/network/data/scalingNodesEdges.html b/www/lib/vis/examples/network/data/scalingNodesEdges.html index 3d80fa33..a19e7e10 100644 --- a/www/lib/vis/examples/network/data/scalingNodesEdges.html +++ b/www/lib/vis/examples/network/data/scalingNodesEdges.html @@ -15,7 +15,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; diff --git a/www/lib/vis/examples/network/data/scalingNodesEdgesLabels.html b/www/lib/vis/examples/network/data/scalingNodesEdgesLabels.html index bf8b2571..fc41fbb7 100644 --- a/www/lib/vis/examples/network/data/scalingNodesEdgesLabels.html +++ b/www/lib/vis/examples/network/data/scalingNodesEdgesLabels.html @@ -15,7 +15,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; diff --git a/www/lib/vis/examples/network/edgeStyles/arrowTypes.html b/www/lib/vis/examples/network/edgeStyles/arrowTypes.html new file mode 100644 index 00000000..25cf63bf --- /dev/null +++ b/www/lib/vis/examples/network/edgeStyles/arrowTypes.html @@ -0,0 +1,55 @@ +<!doctype html> +<html> +<head> + <title>Network | Basic usage</title> + + <script type="text/javascript" src="../../../dist/vis.js"></script> + <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + + <style type="text/css"> + #mynetwork { + width: 600px; + height: 400px; + border: 1px solid lightgray; + } + </style> +</head> +<body> + +<p> + There two type of liner endings. The classical "arrow" (default) and "circle". +</p> + +<div id="mynetwork"></div> + +<script type="text/javascript"> + // create an array with nodes + var nodes = new vis.DataSet([ + {id: 1, label: 'X'}, + {id: 2, label: 'Y'}, + {id: 3, label: 'Z'} + ]); + + // create an array with edges + var edges = new vis.DataSet([ + {from: 1, to: 2, arrows:'to'}, + {from: 2, to: 3, arrows:{ + to: { + type: 'circle' + } + }}, + ]); + + // create a network + var container = document.getElementById('mynetwork'); + var data = { + nodes: nodes, + edges: edges + }; + var options = {}; + var network = new vis.Network(container, data, options); +</script> + +<script src="../../googleAnalytics.js"></script> +</body> +</html> diff --git a/www/lib/vis/examples/network/edgeStyles/arrows.html b/www/lib/vis/examples/network/edgeStyles/arrows.html index 6baed1cf..b9d43636 100644 --- a/www/lib/vis/examples/network/edgeStyles/arrows.html +++ b/www/lib/vis/examples/network/edgeStyles/arrows.html @@ -4,7 +4,7 @@ <title>Network | Basic usage</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/edgeStyles/colors.html b/www/lib/vis/examples/network/edgeStyles/colors.html index 2c2916ac..99d98b11 100644 --- a/www/lib/vis/examples/network/edgeStyles/colors.html +++ b/www/lib/vis/examples/network/edgeStyles/colors.html @@ -4,7 +4,7 @@ <title>Network | Basic usage</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/edgeStyles/dashes.html b/www/lib/vis/examples/network/edgeStyles/dashes.html index f545b832..941fdc5e 100644 --- a/www/lib/vis/examples/network/edgeStyles/dashes.html +++ b/www/lib/vis/examples/network/edgeStyles/dashes.html @@ -4,7 +4,7 @@ <title>Network | Basic usage</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/edgeStyles/smooth.html b/www/lib/vis/examples/network/edgeStyles/smooth.html index 899ed627..2b222bdb 100644 --- a/www/lib/vis/examples/network/edgeStyles/smooth.html +++ b/www/lib/vis/examples/network/edgeStyles/smooth.html @@ -4,7 +4,7 @@ <title>Network | Static smooth curves</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/edgeStyles/smoothWorldCup.html b/www/lib/vis/examples/network/edgeStyles/smoothWorldCup.html index 12846011..02b95d6b 100644 --- a/www/lib/vis/examples/network/edgeStyles/smoothWorldCup.html +++ b/www/lib/vis/examples/network/edgeStyles/smoothWorldCup.html @@ -6,7 +6,7 @@ <title>Network | Static smooth curves - World Cup Network</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link type="text/css" rel="stylesheet" href="../../../dist/vis.css"> + <link type="text/css" rel="stylesheet" href="../../../dist/vis-network.min.css"> <script src="../datasources/WorldCup2014.js"></script> diff --git a/www/lib/vis/examples/network/events/interactionEvents.html b/www/lib/vis/examples/network/events/interactionEvents.html index 3e329723..33f1ae70 100644 --- a/www/lib/vis/examples/network/events/interactionEvents.html +++ b/www/lib/vis/examples/network/events/interactionEvents.html @@ -4,7 +4,7 @@ <title>Network | Interaction events</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/events/physicsEvents.html b/www/lib/vis/examples/network/events/physicsEvents.html index 83933e9f..418f403a 100644 --- a/www/lib/vis/examples/network/events/physicsEvents.html +++ b/www/lib/vis/examples/network/events/physicsEvents.html @@ -4,7 +4,7 @@ <title>Network | Basic usage</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/events/renderEvents.html b/www/lib/vis/examples/network/events/renderEvents.html index ec0ad440..e28e4ea3 100644 --- a/www/lib/vis/examples/network/events/renderEvents.html +++ b/www/lib/vis/examples/network/events/renderEvents.html @@ -4,7 +4,7 @@ <title>Network | Basic usage</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/exampleApplications/disassemblerExample.html b/www/lib/vis/examples/network/exampleApplications/disassemblerExample.html index 0245999a..8ecd8e39 100644 --- a/www/lib/vis/examples/network/exampleApplications/disassemblerExample.html +++ b/www/lib/vis/examples/network/exampleApplications/disassemblerExample.html @@ -7,7 +7,7 @@ border: 1px solid lightgray; } </style> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script src="../../../dist/vis.js"></script> </head> <body> diff --git a/www/lib/vis/examples/network/exampleApplications/lesMiserables.html b/www/lib/vis/examples/network/exampleApplications/lesMiserables.html index bf39a462..b97c32b0 100644 --- a/www/lib/vis/examples/network/exampleApplications/lesMiserables.html +++ b/www/lib/vis/examples/network/exampleApplications/lesMiserables.html @@ -12,7 +12,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/> <script type="text/javascript"> function draw() { diff --git a/www/lib/vis/examples/network/exampleApplications/loadingBar.html b/www/lib/vis/examples/network/exampleApplications/loadingBar.html index e410312d..519289e4 100644 --- a/www/lib/vis/examples/network/exampleApplications/loadingBar.html +++ b/www/lib/vis/examples/network/exampleApplications/loadingBar.html @@ -86,7 +86,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/> <script type="text/javascript"> function draw() { diff --git a/www/lib/vis/examples/network/exampleApplications/neighbourhoodHighlight.html b/www/lib/vis/examples/network/exampleApplications/neighbourhoodHighlight.html index 1db8623e..8e05d482 100644 --- a/www/lib/vis/examples/network/exampleApplications/neighbourhoodHighlight.html +++ b/www/lib/vis/examples/network/exampleApplications/neighbourhoodHighlight.html @@ -4,7 +4,7 @@ <title>Network | Static smooth curves - World Cup Network</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link type="text/css" rel="stylesheet" href="../../../dist/vis.css"> + <link type="text/css" rel="stylesheet" href="../../../dist/vis-network.min.css"> <script src="../datasources/WorldCup2014.js"></script> diff --git a/www/lib/vis/examples/network/exampleApplications/nodeLegend.html b/www/lib/vis/examples/network/exampleApplications/nodeLegend.html index fdf4ef81..69769d9b 100644 --- a/www/lib/vis/examples/network/exampleApplications/nodeLegend.html +++ b/www/lib/vis/examples/network/exampleApplications/nodeLegend.html @@ -19,7 +19,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; diff --git a/www/lib/vis/examples/network/exampleApplications/worldCupPerformance.html b/www/lib/vis/examples/network/exampleApplications/worldCupPerformance.html index 191ad22d..7de0667b 100644 --- a/www/lib/vis/examples/network/exampleApplications/worldCupPerformance.html +++ b/www/lib/vis/examples/network/exampleApplications/worldCupPerformance.html @@ -6,7 +6,7 @@ <title>Network | Static smooth curves - World Cup Network</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link type="text/css" rel="stylesheet" href="../../../dist/vis.css"> + <link type="text/css" rel="stylesheet" href="../../../dist/vis-network.min.css"> <script src="../datasources/WorldCup2014.js"></script> diff --git a/www/lib/vis/examples/network/labels/labelAlignment.html b/www/lib/vis/examples/network/labels/labelAlignment.html index 2397e219..42eb9bd0 100644 --- a/www/lib/vis/examples/network/labels/labelAlignment.html +++ b/www/lib/vis/examples/network/labels/labelAlignment.html @@ -4,7 +4,7 @@ <title>Network | Label alignment</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/labels/labelBackground.html b/www/lib/vis/examples/network/labels/labelBackground.html index 33bcd2d4..01664a67 100644 --- a/www/lib/vis/examples/network/labels/labelBackground.html +++ b/www/lib/vis/examples/network/labels/labelBackground.html @@ -4,7 +4,7 @@ <title>Network | Label alignment</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/labels/labelColorAndSize.html b/www/lib/vis/examples/network/labels/labelColorAndSize.html index e387b9a7..f91a0d22 100644 --- a/www/lib/vis/examples/network/labels/labelColorAndSize.html +++ b/www/lib/vis/examples/network/labels/labelColorAndSize.html @@ -3,7 +3,7 @@ <head> <title>Network | Label stroke</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/labels/labelStroke.html b/www/lib/vis/examples/network/labels/labelStroke.html index 89794501..71a7dccd 100644 --- a/www/lib/vis/examples/network/labels/labelStroke.html +++ b/www/lib/vis/examples/network/labels/labelStroke.html @@ -3,7 +3,7 @@ <head> <title>Network | Label stroke</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/labels/multilineText.html b/www/lib/vis/examples/network/labels/multilineText.html index 852b18d6..99dc8eb2 100644 --- a/www/lib/vis/examples/network/labels/multilineText.html +++ b/www/lib/vis/examples/network/labels/multilineText.html @@ -12,7 +12,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> function draw() { diff --git a/www/lib/vis/examples/network/layout/hierarchicalLayout.html b/www/lib/vis/examples/network/layout/hierarchicalLayout.html index d827814c..d8e317ec 100644 --- a/www/lib/vis/examples/network/layout/hierarchicalLayout.html +++ b/www/lib/vis/examples/network/layout/hierarchicalLayout.html @@ -17,7 +17,7 @@ <script type="text/javascript" src="../exampleUtil.js"></script> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/> <script type="text/javascript"> diff --git a/www/lib/vis/examples/network/layout/hierarchicalLayoutMethods.html b/www/lib/vis/examples/network/layout/hierarchicalLayoutMethods.html index 51f55267..6664bd2d 100644 --- a/www/lib/vis/examples/network/layout/hierarchicalLayoutMethods.html +++ b/www/lib/vis/examples/network/layout/hierarchicalLayoutMethods.html @@ -15,7 +15,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var network = null; diff --git a/www/lib/vis/examples/network/layout/hierarchicalLayoutUserdefined.html b/www/lib/vis/examples/network/layout/hierarchicalLayoutUserdefined.html index dd77bb6b..de536e54 100644 --- a/www/lib/vis/examples/network/layout/hierarchicalLayoutUserdefined.html +++ b/www/lib/vis/examples/network/layout/hierarchicalLayoutUserdefined.html @@ -15,7 +15,7 @@ } </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/> <script type="text/javascript"> diff --git a/www/lib/vis/examples/network/layout/hierarchicalLayoutWithoutPhysics.html b/www/lib/vis/examples/network/layout/hierarchicalLayoutWithoutPhysics.html index 27854810..55670d7c 100644 --- a/www/lib/vis/examples/network/layout/hierarchicalLayoutWithoutPhysics.html +++ b/www/lib/vis/examples/network/layout/hierarchicalLayoutWithoutPhysics.html @@ -4,7 +4,7 @@ <title>Hierarchical Layout without Physics</title> <script type="text/javascript" src="../../../dist/vis.js"></script> <script type="text/javascript" src="../datasources/largeHierarchicalDataset.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #network{ width: 1000px; diff --git a/www/lib/vis/examples/network/layout/randomSeed.html b/www/lib/vis/examples/network/layout/randomSeed.html index f2b6d131..1ca075ae 100644 --- a/www/lib/vis/examples/network/layout/randomSeed.html +++ b/www/lib/vis/examples/network/layout/randomSeed.html @@ -4,7 +4,7 @@ <title>Network | Setting the random seed</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/nodeStyles/HTMLInNodes.html b/www/lib/vis/examples/network/nodeStyles/HTMLInNodes.html index 4eca8191..e80590b7 100644 --- a/www/lib/vis/examples/network/nodeStyles/HTMLInNodes.html +++ b/www/lib/vis/examples/network/nodeStyles/HTMLInNodes.html @@ -17,7 +17,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; @@ -29,7 +29,7 @@ var LENGTH_SUB = 50; - var data = '<svg xmlns="http://www.w3.org/2000/svg" width="390" height="65">' + + var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="390" height="65">' + '<rect x="0" y="0" width="100%" height="100%" fill="#7890A7" stroke-width="20" stroke="#ffffff" ></rect>' + '<foreignObject x="15" y="10" width="100%" height="100%">' + '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' + @@ -40,11 +40,8 @@ '</foreignObject>' + '</svg>'; - var DOMURL = window.URL || window.webkitURL || window; - var img = new Image(); - var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'}); - var url = DOMURL.createObjectURL(svg); + var url = "data:image/svg+xml;charset=utf-8,"+ encodeURIComponent(svg); // Called when the Visualization API is loaded. function draw() { diff --git a/www/lib/vis/examples/network/nodeStyles/circularImages.html b/www/lib/vis/examples/network/nodeStyles/circularImages.html index 46cf898e..b0f144c5 100644 --- a/www/lib/vis/examples/network/nodeStyles/circularImages.html +++ b/www/lib/vis/examples/network/nodeStyles/circularImages.html @@ -16,7 +16,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var DIR = 'img/soft-scraps-icons/'; diff --git a/www/lib/vis/examples/network/nodeStyles/colors.html b/www/lib/vis/examples/network/nodeStyles/colors.html index 900ab3bf..05bae1dd 100644 --- a/www/lib/vis/examples/network/nodeStyles/colors.html +++ b/www/lib/vis/examples/network/nodeStyles/colors.html @@ -4,7 +4,7 @@ <title>Network | Basic usage</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/nodeStyles/customGroups.html b/www/lib/vis/examples/network/nodeStyles/customGroups.html index bf810bcc..5c4b11c9 100644 --- a/www/lib/vis/examples/network/nodeStyles/customGroups.html +++ b/www/lib/vis/examples/network/nodeStyles/customGroups.html @@ -19,7 +19,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <script src="../../googleAnalytics.js"></script> diff --git a/www/lib/vis/examples/network/nodeStyles/groups.html b/www/lib/vis/examples/network/nodeStyles/groups.html index 03778330..148ffa64 100644 --- a/www/lib/vis/examples/network/nodeStyles/groups.html +++ b/www/lib/vis/examples/network/nodeStyles/groups.html @@ -19,7 +19,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/> <script src="../../googleAnalytics.js"></script> </head> diff --git a/www/lib/vis/examples/network/nodeStyles/icons.html b/www/lib/vis/examples/network/nodeStyles/icons.html index 0b27fbcb..859fc065 100644 --- a/www/lib/vis/examples/network/nodeStyles/icons.html +++ b/www/lib/vis/examples/network/nodeStyles/icons.html @@ -6,7 +6,7 @@ <title>Network | node as icon</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> diff --git a/www/lib/vis/examples/network/nodeStyles/images.html b/www/lib/vis/examples/network/nodeStyles/images.html index a64689d5..78810181 100644 --- a/www/lib/vis/examples/network/nodeStyles/images.html +++ b/www/lib/vis/examples/network/nodeStyles/images.html @@ -12,7 +12,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; diff --git a/www/lib/vis/examples/network/nodeStyles/imagesWithBorders.html b/www/lib/vis/examples/network/nodeStyles/imagesWithBorders.html index fdfe4abf..7c65cee6 100644 --- a/www/lib/vis/examples/network/nodeStyles/imagesWithBorders.html +++ b/www/lib/vis/examples/network/nodeStyles/imagesWithBorders.html @@ -16,7 +16,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var DIR = 'img/soft-scraps-icons/'; diff --git a/www/lib/vis/examples/network/nodeStyles/shadows.html b/www/lib/vis/examples/network/nodeStyles/shadows.html index bfa7b86a..277b8b00 100644 --- a/www/lib/vis/examples/network/nodeStyles/shadows.html +++ b/www/lib/vis/examples/network/nodeStyles/shadows.html @@ -19,7 +19,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/> <script src="../../googleAnalytics.js"></script> </head> diff --git a/www/lib/vis/examples/network/nodeStyles/shapes.html b/www/lib/vis/examples/network/nodeStyles/shapes.html index 1f4b92ba..26625301 100644 --- a/www/lib/vis/examples/network/nodeStyles/shapes.html +++ b/www/lib/vis/examples/network/nodeStyles/shapes.html @@ -12,7 +12,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; @@ -34,15 +34,16 @@ {id: 11, label: 'star', shape: 'star'}, {id: 21, font:{size:30}, label: 'big circle', shape: 'circle' }, {id: 22, font:{size:30}, label: 'big ellipse', shape: 'ellipse'}, - {id: 23, font:{size:30}, label: 'big database',shape: 'database'}, - {id: 24, font:{size:30}, label: 'big box', shape: 'box' }, - {id: 25, font:{size:30}, size:40, label: 'big diamond', shape: 'diamond'}, - {id: 26, font:{size:30}, size:40, label: 'big dot', shape: 'dot'}, - {id: 27, font:{size:30}, size:40, label: 'big square', shape: 'square'}, - {id: 28, font:{size:30}, size:40, label: 'big triangle',shape: 'triangle'}, - {id: 29, font:{size:30}, size:40, label: 'big triangleDown', shape: 'triangleDown'}, - {id: 30, font:{size:30}, label: 'big text', shape: 'text'}, - {id: 31, font:{size:30}, size:40, label: 'big star', shape: 'star'} + {id: 23, font:{size:30}, label: 'ellipse with a long label text', shape: 'ellipse'}, + {id: 24, font:{size:30}, label: 'big database',shape: 'database'}, + {id: 25, font:{size:30}, label: 'big box', shape: 'box' }, + {id: 26, font:{size:30}, size:40, label: 'big diamond', shape: 'diamond'}, + {id: 27, font:{size:30}, size:40, label: 'big dot', shape: 'dot'}, + {id: 28, font:{size:30}, size:40, label: 'big square', shape: 'square'}, + {id: 29, font:{size:30}, size:40, label: 'big triangle',shape: 'triangle'}, + {id: 30, font:{size:30}, size:40, label: 'big triangleDown', shape: 'triangleDown'}, + {id: 31, font:{size:30}, label: 'big text', shape: 'text'}, + {id: 32, font:{size:30}, size:40, label: 'big star', shape: 'star'} ]; edges = [ diff --git a/www/lib/vis/examples/network/nodeStyles/shapesWithDashedBorders.html b/www/lib/vis/examples/network/nodeStyles/shapesWithDashedBorders.html index 9ba68e86..a2d65aed 100644 --- a/www/lib/vis/examples/network/nodeStyles/shapesWithDashedBorders.html +++ b/www/lib/vis/examples/network/nodeStyles/shapesWithDashedBorders.html @@ -12,7 +12,7 @@ </style> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; diff --git a/www/lib/vis/examples/network/other/animationShowcase.html b/www/lib/vis/examples/network/other/animationShowcase.html index d68ef75e..1e0d82ae 100644 --- a/www/lib/vis/examples/network/other/animationShowcase.html +++ b/www/lib/vis/examples/network/other/animationShowcase.html @@ -36,7 +36,7 @@ <script type="text/javascript" src="../exampleUtil.js"></script> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; diff --git a/www/lib/vis/examples/network/other/changingClusteredEdgesNodes.html b/www/lib/vis/examples/network/other/changingClusteredEdgesNodes.html new file mode 100644 index 00000000..145dcb72 --- /dev/null +++ b/www/lib/vis/examples/network/other/changingClusteredEdgesNodes.html @@ -0,0 +1,107 @@ +<!doctype html> +<html> +<head> + <title>Network | Clustering</title> + + <script type="text/javascript" src="../../../dist/vis.js"></script> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> + + <style type="text/css"> + #mynetwork { + width: 600px; + height: 600px; + border: 1px solid lightgray; + } + p { + max-width:600px; + } + + h4 { + margin-bottom:3px; + } + </style> + <script src="../../googleAnalytics.js"></script> +</head> + +<body> + + +<p> +Demonstrating getBaseEdge, getClusteredEdges updateEdge and updateClusteredNode. <br/><ul><li>Clicking on the cluster will change it to a star (updateClusteredNode).</li> +<li>Clicking on an edge will make it red regardless of whether it is a clusteredEdge or not (updateEdge)</li> +<li>Clicking on an edge will also show the results of getBaseEdge and getClusteredEdge</li> +</ul> +</p> + +<div id="mynetwork"></div> +<pre id="eventSpan"></pre> + +<script type="text/javascript"> + // create an array with nodes + var nodes = [ + {id: 1, label: 'Node 1', color:'orange'}, + {id: 2, label: 'Node 2', color:'DarkViolet', font:{color:'white'}}, + {id: 3, label: 'Node 3', color:'orange'}, + {id: 4, label: 'Node 4', color:'DarkViolet', font:{color:'white'}}, + {id: 5, label: 'Node 5', color:'orange'}, + {id: 6, label: 'cid = 1', cid:1, color:'orange'}, + {id: 7, label: 'cid = 1', cid:1, color:'DarkViolet', font:{color:'white'}}, + {id: 8, label: 'cid = 1', cid:1, color:'lime'}, + {id: 9, label: 'cid = 1', cid:1, color:'orange'}, + {id: 10, label: 'cid = 1', cid:1, color:'lime'} + ]; + + // create an array with edges + var edges = [ + {from: 1, to: 2}, + {from: 1, to: 3}, + {from: 10, to: 4}, + {from: 2, to: 5}, + {from: 6, to: 2}, + {from: 7, to: 5}, + {from: 8, to: 6}, + {from: 9, to: 7}, + {from: 10, to: 9} + ]; + + // create a network + var container = document.getElementById('mynetwork'); + var data = { + nodes: nodes, + edges: edges + }; + var options = {layout:{randomSeed:8}}; + var network = new vis.Network(container, data, options); + var clusterOptionsByData = { + joinCondition:function(childOptions) { + return childOptions.cid == 1; + }, + clusterNodeProperties: {id:'cidCluster', borderWidth:3, shape:'database'} + }; + network.cluster(clusterOptionsByData); + + network.on("selectNode", function(params) { + if (params.nodes.length == 1) { + if (network.isCluster(params.nodes[0]) == true) { + network.clustering.updateClusteredNode(params.nodes[0], {shape : 'star'}); + } + } + }); + + network.on("selectEdge", function(params) { + if (params.edges.length == 1) { + // Single edge selected + var obj = {}; + obj.clicked_id = params.edges[0]; + network.clustering.updateEdge(params.edges[0], {color : '#aa0000'}); + obj.base_edge = network.clustering.getBaseEdge(params.edges[0]); + obj.all_clustered_edges = network.clustering.getClusteredEdges(params.edges[0]); + document.getElementById('eventSpan').innerHTML = '<h2>selectEdge event:</h2>' + JSON.stringify(obj, null, 4); + } + }); + + +</script> + +</body> +</html> diff --git a/www/lib/vis/examples/network/other/clustering.html b/www/lib/vis/examples/network/other/clustering.html index 2f2eb8eb..bd68c42f 100644 --- a/www/lib/vis/examples/network/other/clustering.html +++ b/www/lib/vis/examples/network/other/clustering.html @@ -4,7 +4,7 @@ <title>Network | Clustering</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/other/clusteringByZoom.html b/www/lib/vis/examples/network/other/clusteringByZoom.html index f7f8fa5a..e2391f16 100644 --- a/www/lib/vis/examples/network/other/clusteringByZoom.html +++ b/www/lib/vis/examples/network/other/clusteringByZoom.html @@ -4,7 +4,7 @@ <title>Network | Clustering</title> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/> <style type="text/css"> #mynetwork { diff --git a/www/lib/vis/examples/network/other/clustersOfclusters.html b/www/lib/vis/examples/network/other/clustersOfclusters.html new file mode 100644 index 00000000..0e90bcf0 --- /dev/null +++ b/www/lib/vis/examples/network/other/clustersOfclusters.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Cluster Test</title> + <script type="text/javascript" src="../../../dist/vis.js"></script> + <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <style type="text/css"> + #network_graph { + width: 1000px; + height: 800px; + border: 1px solid lightgray; + } + </style> +</head> +<body onload="draw()"> +<p> + Clusters can contain other clusters, but clusters of a single node is only possible by adding +<pre>allowSingleNodeCluster: true</pre> +to clusterNodeProperties<br/> +In this example repeatedly clicking on the node with open the Clusters. +</p> +<div id="network_graph"></div> +<div id="info"></div> +<script type="text/javascript"> + var network; + + var node_color = ['orange', 'green', 'red', 'yellow', 'cyan']; + var node_shape = ['star', 'database', 'diamond', 'square', 'triangle']; + var nodes = new vis.DataSet([ + {id: 'x', label: 'Node X'}, + {id: 'y', label: 'Node Y'}, + ]); + var network_options = {}; + var edges = new vis.DataSet([ + {from: 'x', to: 'y'} + ]); + + var cluster_id = 1; + + function draw() { + network = new vis.Network( + document.getElementById('network_graph'), + { + nodes: nodes, + edges: edges + }, + network_options + ); + network.on('click', function (params) { + if (params.nodes.length == 1) { + if (network.isCluster(params.nodes[0]) == true) { + network.openCluster(params.nodes[0]); + } + } + }); + cluster(); + cluster(); + cluster(); + } + + function cluster() { + var clusterOptions = { + joinCondition: function (childOptions) { + console.log(childOptions); + return true; + }, + clusterNodeProperties: {id: cluster_id, label: "Cluster " + cluster_id, color: node_color[cluster_id - 1], shape: node_shape[cluster_id - 1], allowSingleNodeCluster: true} + }; + cluster_id++; + network.cluster(clusterOptions); + } +</script> +</body> +</html> diff --git a/www/lib/vis/examples/network/other/configuration.html b/www/lib/vis/examples/network/other/configuration.html index 74bf9e79..a13470d4 100644 --- a/www/lib/vis/examples/network/other/configuration.html +++ b/www/lib/vis/examples/network/other/configuration.html @@ -29,7 +29,7 @@ <script type="text/javascript" src="../exampleUtil.js"></script> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; diff --git a/www/lib/vis/examples/network/other/manipulation.html b/www/lib/vis/examples/network/other/manipulation.html index c2b34cd9..b399c098 100644 --- a/www/lib/vis/examples/network/other/manipulation.html +++ b/www/lib/vis/examples/network/other/manipulation.html @@ -1,6 +1,7 @@ <!doctype html> <html> <head> + <meta charset="utf-8"/> <title>Network | Manipulation</title> <style type="text/css"> @@ -54,7 +55,7 @@ </style> <script type="text/javascript" src="../exampleUtil.js"></script> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; @@ -64,6 +65,17 @@ var data = getScaleFreeNetwork(25); var seed = 2; + function setDefaultLocale() { + var defaultLocal = navigator.language; + var select = document.getElementById('locale'); + select.selectedIndex = 0; // set fallback value + for (var i = 0, j = select.options.length; i < j; ++i) { + if (select.options[i].getAttribute('value') === defaultLocal) { + select.selectedIndex = i; + break; + } + } + } function destroy() { if (network !== null) { @@ -135,11 +147,16 @@ callback(data); } + function init() { + setDefaultLocale(); + draw(); + } + </script> <script src="../../googleAnalytics.js"></script> </head> -<body onload="draw();"> +<body onload="init();"> <h2>Editing the nodes and edges (localized)</h2> <p style="width: 700px; font-size:14px; text-align: justify;"> The localization is only relevant to the manipulation buttons. @@ -148,8 +165,13 @@ <p> <label for="locale">Select a locale:</label> <select id="locale" onchange="draw();"> - <option value="en" selected>en</option> + <option value="en">en</option> + <option value="de">de</option> + <option value="es">es</option> + <option value="it">it</option> <option value="nl">nl</option> + <option value="pt-br">pt</option> + <option value="ru">ru</option> </select> </p> @@ -169,4 +191,3 @@ </body> </html> - diff --git a/www/lib/vis/examples/network/other/navigation.html b/www/lib/vis/examples/network/other/navigation.html index 3d7eda25..760bb539 100644 --- a/www/lib/vis/examples/network/other/navigation.html +++ b/www/lib/vis/examples/network/other/navigation.html @@ -29,7 +29,7 @@ <script type="text/javascript" src="../exampleUtil.js"></script> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; @@ -124,7 +124,7 @@ </table> <br /> Apart from clicking the icons, you can also navigate using the keyboard. The buttons are in table above. - Zoom Extends changes the zoom and position of the camera to encompass all visible nodes. <u>To correctly display the navigation icons, the <b>vis.css</b> file must be included.</u> + Zoom Extends changes the zoom and position of the camera to encompass all visible nodes. <u>To correctly display the navigation icons, <b>vis.css</b> or <b>vis-network.min.css</b> must be included.</u> The user is free to alter or overload the CSS classes but without them the navigation icons are not visible. </div> diff --git a/www/lib/vis/examples/network/other/performance.html b/www/lib/vis/examples/network/other/performance.html index 4d67fcc5..0b3ea663 100644 --- a/www/lib/vis/examples/network/other/performance.html +++ b/www/lib/vis/examples/network/other/performance.html @@ -24,7 +24,7 @@ <script type="text/javascript" src="../exampleUtil.js"></script> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; diff --git a/www/lib/vis/examples/network/other/saveAndLoad.html b/www/lib/vis/examples/network/other/saveAndLoad.html new file mode 100644 index 00000000..08165c85 --- /dev/null +++ b/www/lib/vis/examples/network/other/saveAndLoad.html @@ -0,0 +1,177 @@ +<!doctype html> +<html> + <head> + <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> + <meta content="utf-8" http-equiv="encoding"> + <title>Network | Saving and loading networks</title> + + <style type="text/css"> + body { + font: 10pt sans; + } + #network { + float:left; + width: 600px; + height: 600px; + margin:5px; + border: 1px solid lightgray; + } + #config { + float:left; + width: 400px; + height: 600px; + } + #input_output { + height: 10%; + width: 15%; + } + + p { + font-size:16px; + max-width:700px; + } + </style> + + <script type="text/javascript" src="../exampleUtil.js"></script> + <script type="text/javascript" src="../../../dist/vis.js"></script> + <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + + <script src="../../googleAnalytics.js"></script> + </head> + + <body> + <p> + In this example, the network data can be exported to JSON and imported back into the network. + + Try this out by exporting the network to JSON, clearing the network and then importing it again. The nodes will all appear in the same position as they were before the network was destroyed. + </p> + + <div id="network"></div> + + <div> + <textarea id=input_output></textarea> + <input type="button" id="import_button" onclick="importNetwork()" value="import"></input> + <input type="button" id="export_button" onclick="exportNetwork()" value="export"></input> + <input type="button" id="destroy_button" onclick="destroyNetwork()" value="destroy"></input> + </div> + + <script type="text/javascript"> + var network; + var container; + var exportArea; + var importButton; + var exportButton; + + function init() { + container = document.getElementById('network'); + exportArea = document.getElementById('input_output'); + importButton = document.getElementById('import_button'); + exportButton = document.getElementById('export_button'); + + draw(); + } + + function addContextualInformation(elem, index, array) { + addId(elem, index); + addConnections(elem, index); + } + + function addId(elem, index) { + elem.id = index; + } + + function addConnections(elem, index) { + // need to replace this with a tree of the network, then get child direct children of the element + elem.connections = network.getConnectedNodes(index); + } + + function destroyNetwork() { + network.destroy(); + } + + function clearOutputArea() { + exportArea.value = ""; + } + + function draw() { + // create a network of nodes + var data = getScaleFreeNetwork(5); + + network = new vis.Network(container, data, {manipulation:{enabled:true}}); + + clearOutputArea(); + } + + function exportNetwork() { + clearOutputArea(); + + var nodes = objectToArray(network.getPositions()); + + nodes.forEach(addContextualInformation); + + // pretty print node data + var exportValue = JSON.stringify(nodes, undefined, 2); + + exportArea.value = exportValue; + + resizeExportArea(); + } + + function importNetwork() { + var inputValue = exportArea.value; + var inputData = JSON.parse(inputValue); + + var data = { + nodes: getNodeData(inputData), + edges: getEdgeData(inputData) + } + + network = new vis.Network(container, data, {}); + + resizeExportArea(); + } + + function getNodeData(data) { + var networkNodes = []; + + data.forEach(function(elem, index, array) { + networkNodes.push({id: elem.id, label: elem.id, x: elem.x, y: elem.y}); + }); + + return new vis.DataSet(networkNodes); + } + + function getEdgeData(data) { + var networkEdges = []; + + data.forEach(function(node, index, array) { + // add the connection + node.connections.forEach(function(connId, cIndex, conns) { + networkEdges.push({from: node.id, to: connId}); + + var elementConnections = array[connId].connections; + + // remove the connection from the other node to prevent duplicate connections + var duplicateIndex = elementConnections.findIndex(function(connection) { + connection === node.id; + }); + + elementConnections = elementConnections.splice(0, duplicateIndex - 1).concat(elementConnections.splice(duplicateIndex + 1, elementConnections.length)) + }); + }); + + return new vis.DataSet(networkEdges); + } + + function objectToArray(obj) { + return Object.keys(obj).map(function (key) { return obj[key]; }); + } + + function resizeExportArea() { + exportArea.style.height = (1 + exportArea.scrollHeight) + "px"; + } + + init(); + </script> + </body> +</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/network/physics/physicsConfiguration.html b/www/lib/vis/examples/network/physics/physicsConfiguration.html index 5a95f215..d28d20db 100644 --- a/www/lib/vis/examples/network/physics/physicsConfiguration.html +++ b/www/lib/vis/examples/network/physics/physicsConfiguration.html @@ -24,7 +24,7 @@ <script type="text/javascript" src="../exampleUtil.js"></script> <script type="text/javascript" src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; diff --git a/www/lib/vis/examples/timeline/basicUsage.html b/www/lib/vis/examples/timeline/basicUsage.html index 16ea4d4f..8ad5fda1 100644 --- a/www/lib/vis/examples/timeline/basicUsage.html +++ b/www/lib/vis/examples/timeline/basicUsage.html @@ -10,7 +10,7 @@ </style> <script src="../../dist/vis.js"></script> - <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/dataHandling/dataSerialization.html b/www/lib/vis/examples/timeline/dataHandling/dataSerialization.html index 1b3fcfa7..79b6aebf 100644 --- a/www/lib/vis/examples/timeline/dataHandling/dataSerialization.html +++ b/www/lib/vis/examples/timeline/dataHandling/dataSerialization.html @@ -24,7 +24,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> @@ -35,12 +35,12 @@ <textarea id="data"> [ - {"id": 1, "content": "item 1<br>start", "start": "2014-01-23"}, - {"id": 2, "content": "item 2", "start": "2014-01-18"}, - {"id": 3, "content": "item 3", "start": "2014-01-21"}, - {"id": 4, "content": "item 4", "start": "2014-01-19", "end": "2014-01-24"}, - {"id": 5, "content": "item 5", "start": "2014-01-28", "type": "point"}, - {"id": 6, "content": "item 6", "start": "2014-01-26"} + {"id": 1, "content": "item 1", "start": "2014-01-01 01:00:00"}, + {"id": 2, "content": "item 2", "start": "2014-01-01 02:00:00"}, + {"id": 3, "content": "item 3", "start": "2014-01-01 03:00:00"}, + {"id": 4, "content": "item 4", "start": "2014-01-01 04:00:00", "end": "2014-01-01 04:30:00"}, + {"id": 5, "content": "item 5", "start": "2014-01-01 05:00:00", "type": "point"}, + {"id": 6, "content": "item 6", "start": "2014-01-01 06:00:00"} ] </textarea> @@ -89,9 +89,10 @@ function saveData() { // get the data from the DataSet + // // Note that we specify the output type of the fields start and end - // as ISODate, which is safely serializable. Other serializable types - // are Number (unix timestamp) or ASPDate. + // as "ISODate", which is safely serializable. Other serializable types + // are "Number" (unix timestamp), "ASPDate" or "String" (without timezone!). // // Alternatively, it is possible to configure the DataSet to convert // the output automatically to ISODates like: @@ -118,4 +119,4 @@ loadData(); </script> </body> -</html>
\ No newline at end of file +</html> diff --git a/www/lib/vis/examples/timeline/dataHandling/loadExternalData.html b/www/lib/vis/examples/timeline/dataHandling/loadExternalData.html index a5002726..f594d2aa 100644 --- a/www/lib/vis/examples/timeline/dataHandling/loadExternalData.html +++ b/www/lib/vis/examples/timeline/dataHandling/loadExternalData.html @@ -13,7 +13,7 @@ <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/editing/customSnappingOfItems.html b/www/lib/vis/examples/timeline/editing/customSnappingOfItems.html index 65a9a510..b1c8ef75 100644 --- a/www/lib/vis/examples/timeline/editing/customSnappingOfItems.html +++ b/www/lib/vis/examples/timeline/editing/customSnappingOfItems.html @@ -4,7 +4,7 @@ <title>Timeline | Custom snapping</title> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/editing/editingItems.html b/www/lib/vis/examples/timeline/editing/editingItems.html index 41f6e7c0..186a363c 100644 --- a/www/lib/vis/examples/timeline/editing/editingItems.html +++ b/www/lib/vis/examples/timeline/editing/editingItems.html @@ -11,7 +11,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/editing/editingItemsCallbacks.html b/www/lib/vis/examples/timeline/editing/editingItemsCallbacks.html index e5a7d864..7c15d878 100644 --- a/www/lib/vis/examples/timeline/editing/editingItemsCallbacks.html +++ b/www/lib/vis/examples/timeline/editing/editingItemsCallbacks.html @@ -14,7 +14,7 @@ <link href="http://t4t5.github.io/sweetalert/dist/sweetalert.css" rel="stylesheet" type="text/css"/> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/editing/individualEditableItems.html b/www/lib/vis/examples/timeline/editing/individualEditableItems.html index 54312e0d..d6210305 100644 --- a/www/lib/vis/examples/timeline/editing/individualEditableItems.html +++ b/www/lib/vis/examples/timeline/editing/individualEditableItems.html @@ -24,7 +24,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/editing/tooltipOnItemChange.html b/www/lib/vis/examples/timeline/editing/tooltipOnItemChange.html new file mode 100644 index 00000000..18380beb --- /dev/null +++ b/www/lib/vis/examples/timeline/editing/tooltipOnItemChange.html @@ -0,0 +1,130 @@ +<html> +<head> + <title>Timeline | Tooltip on item onUpdateTime Option</title> + + <script src="../../../dist/vis.js"></script> + <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + + <style type="text/css"> + .vis-item .vis-onUpdateTime-tooltip { + border-radius: 4px; + } + </style> + + <script src="../../googleAnalytics.js"></script> +</head> + +<body> + +<h1>Timeline Tooltip on item onUpdateTime Option</h1> + +<h2>With <code>tooltipOnItemUpdateTime: true</code> +</h2> + +<div id="mytimeline1"></div> + +<h2>With <code>tooltipOnItemUpdateTime: { template: [Function] }</code> +</h2> + +<div id="mytimeline2"></div> + + +<h2>With groups</h2> + +<div id="mytimeline3"></div> +<script> + + // create items + var numberOfItems = 10; + var items = new vis.DataSet(); + var types = [ 'box', 'point', 'range'] + + + for (var order = 0; order < numberOfItems; order++) { + var date = vis.moment(); + + + date.add(Math.round(Math.random() * 2), 'hour'); + items.add({ + id: order, + type: types[Math.floor(3 * Math.random())], + content: 'Item ' + order, + start: date.clone().add(order + 1, 'hour'), + end: date.clone().add(order + 3, 'hour') + }); + } + + // specify options + var options = { + multiselect: true, + maxHeight: 400, + start: new Date((new Date()).valueOf() - 10000000), + end: new Date(1000*60*60*24 + (new Date()).valueOf()), + editable: true + }; + + var options1 = Object.assign({ + tooltipOnItemUpdateTime: true + }, options) + var container1 = document.getElementById('mytimeline1'); + timeline1 = new vis.Timeline(container1, items, null, options1); + + var options2 = Object.assign({ + orientation: 'top', + tooltipOnItemUpdateTime: { + template: function(item) { + return 'html template for tooltip with <b>item.start</b>: ' + item.start; + } + } + }, options) + var container2 = document.getElementById('mytimeline2'); + timeline2 = new vis.Timeline(container2, items, null, options2); + + + // create groups + var numberOfGroups = 25; + var groups = new vis.DataSet() + for (var i = 0; i < numberOfGroups; i++) { + groups.add({ + id: i, + content: 'Truck ' + i + }) + } + + // create items for groups + var numberOfItems = 1000; + var itemsWithGroups = new vis.DataSet(); + + var itemsPerGroup = Math.round(numberOfItems/numberOfGroups); + + for (var truck = 0; truck < numberOfGroups; truck++) { + var date = new Date(); + for (var order = 0; order < itemsPerGroup; order++) { + date.setHours(date.getHours() + 4 * (Math.random() < 0.2)); + var start = new Date(date); + + date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4)); + var end = new Date(date); + + itemsWithGroups.add({ + id: order + itemsPerGroup * truck, + group: truck, + start: start, + end: end, + content: 'Order ' + order + }); + } + } + + + var options3 = Object.assign({ + orientation: 'top', + tooltipOnItemUpdateTime: true + }, options) + var container3 = document.getElementById('mytimeline3'); + timeline3 = new vis.Timeline(container3, itemsWithGroups, groups, options3); + +</script> + +</body> +</html> diff --git a/www/lib/vis/examples/timeline/editing/updateDataOnEvent.html b/www/lib/vis/examples/timeline/editing/updateDataOnEvent.html index aedb885f..985551ee 100644 --- a/www/lib/vis/examples/timeline/editing/updateDataOnEvent.html +++ b/www/lib/vis/examples/timeline/editing/updateDataOnEvent.html @@ -14,7 +14,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> diff --git a/www/lib/vis/examples/timeline/groups/groups.html b/www/lib/vis/examples/timeline/groups/groups.html index 1fe6938e..56bad599 100644 --- a/www/lib/vis/examples/timeline/groups/groups.html +++ b/www/lib/vis/examples/timeline/groups/groups.html @@ -20,7 +20,7 @@ <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.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/groups/groupsEditable.html b/www/lib/vis/examples/timeline/groups/groupsEditable.html index 25ac3a57..a7d275fa 100644 --- a/www/lib/vis/examples/timeline/groups/groupsEditable.html +++ b/www/lib/vis/examples/timeline/groups/groupsEditable.html @@ -23,7 +23,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <!-- <script src="../../googleAnalytics.js"></script> --> </head> <body> diff --git a/www/lib/vis/examples/timeline/groups/groupsOrdering.html b/www/lib/vis/examples/timeline/groups/groupsOrdering.html index 8b9d03e2..b4da7755 100644 --- a/www/lib/vis/examples/timeline/groups/groupsOrdering.html +++ b/www/lib/vis/examples/timeline/groups/groupsOrdering.html @@ -17,7 +17,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/groups/subgroups.html b/www/lib/vis/examples/timeline/groups/subgroups.html index 770a88d8..0056705d 100644 --- a/www/lib/vis/examples/timeline/groups/subgroups.html +++ b/www/lib/vis/examples/timeline/groups/subgroups.html @@ -21,7 +21,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/groups/verticalItemsHide.html b/www/lib/vis/examples/timeline/groups/verticalItemsHide.html new file mode 100644 index 00000000..1f38fffe --- /dev/null +++ b/www/lib/vis/examples/timeline/groups/verticalItemsHide.html @@ -0,0 +1,126 @@ +<html> +<head> + <title>Timeline | A lot of grouped data</title> + + <script src="../../../docs/js/jquery.min.js"></script> + <script src="../../../dist/vis.js"></script> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> + + <style type="text/css"> + body { + color: #4D4D4D; + font: 10pt arial; + } + </style> + <script src="../../googleAnalytics.js"></script> +</head> + +<body onresize="/*timeline.checkResize();*/"> +<h1>Timeline vertical visibility</h1> + + +<button onclick="showVisibleItems()">Show current visible items</button> +<div> + <h2>visible items:</h2> + <h3 id="visibleItemsContainer"></h3> +</div> + +<div id="mytimeline"></div> +<br> + +<script> + function showVisibleItems() { + var a = timeline.getVisibleItems(); + console.log(a); + document.getElementById("visibleItemsContainer").innerHTML = "" + document.getElementById("visibleItemsContainer").innerHTML += a; + }; + + // get selected item count from url parameter + var count = 1000; + + // create groups + var groups = new vis.DataSet([ + {id: 1, content: 'Truck 1'}, + {id: 2, content: 'Truck 2'}, + {id: 3, content: 'Truck 3'}, + {id: 4, content: 'Truck 4'}, + {id: 5, content: 'Truck 5'}, + {id: 6, content: 'Truck 6'}, + {id: 7, content: 'Truck 7'}, + {id: 8, content: 'Truck 8'}, + {id: 9, content: 'Truck 9'}, + {id: 10, content: 'Truck 10'}, + {id: 11, content: 'Truck 11'}, + {id: 12, content: 'Truck 12'}, + {id: 13, content: 'Truck 13'}, + {id: 14, content: 'Truck 14'}, + {id: 15, content: 'Truck 15'}, + {id: 16, content: 'Truck 16'}, + {id: 17, content: 'Truck 17'}, + {id: 18, content: 'Truck 18'}, + {id: 19, content: 'Truck 19'}, + {id: 20, content: 'Truck 20'}, + {id: 21, content: 'Truck 21'}, + {id: 22, content: 'Truck 22'}, + {id: 23, content: 'Truck 23'}, + {id: 24, content: 'Truck 24'}, + {id: 25, content: 'Truck 25'}, + + ]); + + // create items + var items = new vis.DataSet(); + + var types = [ 'box', 'point', 'range', 'background'] + var order = 1; + var truck = 1; + for (var j = 0; j < 25; j++) { + var date = new Date(); + for (var i = 0; i < count/25; i++) { + date.setHours(date.getHours() + 4 * (Math.random() < 0.2)); + var start = new Date(date); + + date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4)); + var end = new Date(date); + + var type = types[Math.floor(4 * Math.random())] + + items.add({ + id: order, + group: truck, + start: start, + end: end, + type: type, + content: 'Order ' + order + }); + + order++; + } + truck++; + } + + // specify options + var options = { + stack: true, + maxHeight: 400, + start: new Date(), + end: new Date(1000*60*60*24 + (new Date()).valueOf()), + editable: true, + margin: { + item: 10, // minimal margin between items + axis: 5 // minimal margin between items and the axis + }, + orientation: 'top' + }; + + + // create a Timeline + var container = document.getElementById('mytimeline'); + timeline = new vis.Timeline(container, null, options); + timeline.setGroups(groups); + timeline.setItems(items); +</script> + +</body> +</html> diff --git a/www/lib/vis/examples/timeline/interaction/animateWindow.html b/www/lib/vis/examples/timeline/interaction/animateWindow.html index 5ec8d7bd..40a416f1 100644 --- a/www/lib/vis/examples/timeline/interaction/animateWindow.html +++ b/www/lib/vis/examples/timeline/interaction/animateWindow.html @@ -14,7 +14,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/interaction/clickToUse.html b/www/lib/vis/examples/timeline/interaction/clickToUse.html index 97d465f6..d00f4428 100644 --- a/www/lib/vis/examples/timeline/interaction/clickToUse.html +++ b/www/lib/vis/examples/timeline/interaction/clickToUse.html @@ -18,7 +18,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/interaction/eventListeners.html b/www/lib/vis/examples/timeline/interaction/eventListeners.html index 53f94da6..f3a9bcc5 100644 --- a/www/lib/vis/examples/timeline/interaction/eventListeners.html +++ b/www/lib/vis/examples/timeline/interaction/eventListeners.html @@ -10,7 +10,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> @@ -19,6 +19,7 @@ </p> <div id="visualization"></div> <p></p> + <div id="hoveredItem"></div> <div id="log"></div> <script type="text/javascript"> @@ -47,6 +48,15 @@ logEvent('select', properties); }); + timeline.on('itemover', function (properties) { + logEvent('itemover', properties); + setHoveredItem(properties.item); + }); + timeline.on('itemout', function (properties) { + logEvent('itemout', properties); + setHoveredItem('none'); + }); + items.on('*', function (event, properties) { logEvent(event, properties); }); @@ -59,6 +69,11 @@ log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg); } + function setHoveredItem(id) { + var hoveredItem = document.getElementById('hoveredItem'); + hoveredItem.innerHTML = 'hoveredItem=' + id; + } + </script> </body> </html>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/interaction/limitMoveAndZoom.html b/www/lib/vis/examples/timeline/interaction/limitMoveAndZoom.html index d6632187..4eadd36a 100644 --- a/www/lib/vis/examples/timeline/interaction/limitMoveAndZoom.html +++ b/www/lib/vis/examples/timeline/interaction/limitMoveAndZoom.html @@ -11,7 +11,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/interaction/navigationMenu.html b/www/lib/vis/examples/timeline/interaction/navigationMenu.html index 07ec66c1..cb7c19ad 100755 --- a/www/lib/vis/examples/timeline/interaction/navigationMenu.html +++ b/www/lib/vis/examples/timeline/interaction/navigationMenu.html @@ -23,7 +23,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> @@ -69,26 +69,12 @@ }); } - /** - * Zoom the timeline a given percentage in or out - * @param {Number} percentage For example 0.1 (zoom out) or -0.1 (zoom in) - */ - function zoom (percentage) { - var range = timeline.getWindow(); - var interval = range.end - range.start; - - timeline.setWindow({ - start: range.start.valueOf() - interval * percentage, - end: range.end.valueOf() + interval * percentage - }); - } - // attach events to the navigation buttons - document.getElementById('zoomIn').onclick = function () { zoom(-0.2); }; - document.getElementById('zoomOut').onclick = function () { zoom( 0.2); }; + document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); }; + document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); }; document.getElementById('moveLeft').onclick = function () { move( 0.2); }; document.getElementById('moveRight').onclick = function () { move(-0.2); }; </script> </body> -</html>
\ No newline at end of file +</html> diff --git a/www/lib/vis/examples/timeline/interaction/setSelection.html b/www/lib/vis/examples/timeline/interaction/setSelection.html index b68fb022..f6a038ce 100644 --- a/www/lib/vis/examples/timeline/interaction/setSelection.html +++ b/www/lib/vis/examples/timeline/interaction/setSelection.html @@ -11,7 +11,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/items/backgroundAreas.html b/www/lib/vis/examples/timeline/items/backgroundAreas.html index 5f6d547c..3ec18a66 100644 --- a/www/lib/vis/examples/timeline/items/backgroundAreas.html +++ b/www/lib/vis/examples/timeline/items/backgroundAreas.html @@ -15,7 +15,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/items/backgroundAreasWithGroups.html b/www/lib/vis/examples/timeline/items/backgroundAreasWithGroups.html index 409f3e54..f8a78608 100644 --- a/www/lib/vis/examples/timeline/items/backgroundAreasWithGroups.html +++ b/www/lib/vis/examples/timeline/items/backgroundAreasWithGroups.html @@ -11,7 +11,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/items/htmlContents.html b/www/lib/vis/examples/timeline/items/htmlContents.html index 6a818c30..d790133a 100644 --- a/www/lib/vis/examples/timeline/items/htmlContents.html +++ b/www/lib/vis/examples/timeline/items/htmlContents.html @@ -17,7 +17,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> diff --git a/www/lib/vis/examples/timeline/items/itemOrdering.html b/www/lib/vis/examples/timeline/items/itemOrdering.html index e8cafdc9..323c9501 100644 --- a/www/lib/vis/examples/timeline/items/itemOrdering.html +++ b/www/lib/vis/examples/timeline/items/itemOrdering.html @@ -13,7 +13,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> diff --git a/www/lib/vis/examples/timeline/items/pointItems.html b/www/lib/vis/examples/timeline/items/pointItems.html index 67082cc0..68201801 100755 --- a/www/lib/vis/examples/timeline/items/pointItems.html +++ b/www/lib/vis/examples/timeline/items/pointItems.html @@ -10,7 +10,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> @@ -49,7 +49,7 @@ var options = { // Set global item type. Type can also be specified for items individually - // Available types: 'box' (default), 'point', 'range', 'rangeoverflow' + // Available types: 'box' (default), 'point', 'range' type: 'point', showMajorLabels: false }; diff --git a/www/lib/vis/examples/timeline/items/rangeOverflowItem.html b/www/lib/vis/examples/timeline/items/rangeOverflowItem.html index 12582a69..fbea2f37 100644 --- a/www/lib/vis/examples/timeline/items/rangeOverflowItem.html +++ b/www/lib/vis/examples/timeline/items/rangeOverflowItem.html @@ -4,7 +4,7 @@ <title>Timeline | Range overflow</title> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body, html { diff --git a/www/lib/vis/examples/timeline/other/customTimeBars.html b/www/lib/vis/examples/timeline/other/customTimeBars.html index 37310165..2c1a5f7c 100644 --- a/www/lib/vis/examples/timeline/other/customTimeBars.html +++ b/www/lib/vis/examples/timeline/other/customTimeBars.html @@ -11,7 +11,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/other/dataAttributes.html b/www/lib/vis/examples/timeline/other/dataAttributes.html index f852fffb..0aa1f14e 100644 --- a/www/lib/vis/examples/timeline/other/dataAttributes.html +++ b/www/lib/vis/examples/timeline/other/dataAttributes.html @@ -10,7 +10,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/other/dataAttributesAll.html b/www/lib/vis/examples/timeline/other/dataAttributesAll.html index 7938f0bd..5b926b54 100644 --- a/www/lib/vis/examples/timeline/other/dataAttributesAll.html +++ b/www/lib/vis/examples/timeline/other/dataAttributesAll.html @@ -10,7 +10,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/other/drag&drop.html b/www/lib/vis/examples/timeline/other/drag&drop.html new file mode 100644 index 00000000..81bcb1f1 --- /dev/null +++ b/www/lib/vis/examples/timeline/other/drag&drop.html @@ -0,0 +1,131 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"/> + <title>Timeline | Drag & Drop</title> + + <script src="../../../dist/vis.js"></script> + <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + + <script src="../../googleAnalytics.js"></script> + + <style type="text/css"> + li.item { + list-style: none; + width: 150px; + color: #1A1A1A; + background-color: #D5DDF6; + border: 1px solid #97B0F8; + border-radius: 2px; + margin-bottom: 5px; + padding: 5px 12px; + } + li.item:before { + content: "≣"; + font-family: Arial, sans-serif; + display: inline-block; + font-size: inherit; + cursor: move; + } + </style> +</head> + +<body> + +<h1>Timeline Drag & Drop Example</h1> + +<p>For this to work, you will have to define your own <code>'dragstart'</code> eventListener on each item in your list of items (make sure that any new item added to the list is attached to this eventListener 'dragstart' handler). This 'dragstart' handler must set <code>dataTransfer</code> - notice you can set the item's information as you want this way.</p> + +<div id="mytimeline" ></div> +<div> + <h3>Items:</h3> + <ul class="items"> + <li draggable="true" class="item"> + item 1 - box + </li> + <li draggable="true" class="item"> + item 2 - point + </li> + <li draggable="true" class="item"> + item 3 - range + </li> + </ul> +</div> + +<script> + + // create groups + var numberOfGroups = 3; + var groups = new vis.DataSet() + for (var i = 0; i < numberOfGroups; i++) { + groups.add({ + id: i, + content: 'Truck ' + i + }) + } + + // create items + var numberOfItems = 10; + var items = new vis.DataSet(); + + var itemsPerGroup = Math.round(numberOfItems/numberOfGroups); + + for (var truck = 0; truck < numberOfGroups; truck++) { + var date = new Date(); + for (var order = 0; order < itemsPerGroup; order++) { + date.setHours(date.getHours() + 4 * (Math.random() < 0.2)); + var start = new Date(date); + + date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4)); + var end = new Date(date); + + items.add({ + id: order + itemsPerGroup * truck, + group: truck, + start: start, + end: end, + content: 'Order ' + order + }); + } + } + + // specify options + var options = { + stack: true, + start: new Date(), + end: new Date(1000*60*60*24 + (new Date()).valueOf()), + editable: true, + orientation: 'top' + }; + + // create a Timeline + var container = document.getElementById('mytimeline'); + timeline1 = new vis.Timeline(container, items, groups, options); + + function handleDragStart(event) { + dragSrcEl = event.target; + + event.dataTransfer.effectAllowed = 'move'; + var itemType = event.target.innerHTML.split('-')[1].trim(); + var item = { + id: new Date(), + type: itemType, + content: event.target.innerHTML.split('-')[0].trim(), + start: new Date(), + end: new Date(1000*60*60*24 + (new Date()).valueOf()), + }; + + event.dataTransfer.setData("text/plain", JSON.stringify(item)); + } + + var items = document.querySelectorAll('.items .item'); + + for (var i = items.length - 1; i >= 0; i--) { + var item = items[i]; + item.addEventListener('dragstart', handleDragStart.bind(this), false); + } + +</script> + +</body> +</html> diff --git a/www/lib/vis/examples/timeline/other/functionLabelFormats.html b/www/lib/vis/examples/timeline/other/functionLabelFormats.html new file mode 100644 index 00000000..9de9023b --- /dev/null +++ b/www/lib/vis/examples/timeline/other/functionLabelFormats.html @@ -0,0 +1,141 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | Custom function label format example</title> + + <style> + body, html { + font-family: arial, sans-serif; + font-size: 11pt; + } + + #visualization { + box-sizing: border-box; + width: 100%; + height: 300px; + } + </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 src="../../googleAnalytics.js"></script> +</head> +<body> +<p> + This example demonstrate using custom function label formats. +</p> +<div id="visualization"></div> + +<script> + var now = moment().minutes(0).seconds(0).milliseconds(0); + var groupCount = 3; + var itemCount = 20; + + // create a data set with groups + var names = ['John', 'Alston', 'Lee', 'Grant']; + var groups = new vis.DataSet(); + for (var g = 0; g < groupCount; g++) { + groups.add({id: g, content: names[g]}); + } + + // create a dataset with items + var items = new vis.DataSet(); + for (var i = 0; i < itemCount; i++) { + var start = now.clone().add(Math.random() * 200, 'hours'); + var group = Math.floor(Math.random() * groupCount); + items.add({ + id: i, + group: group, + content: 'item ' + i + + ' <span style="color:#97B0F8;">(' + names[group] + ')</span>', + start: start, + type: 'box' + }); + } + + // create visualization + var container = document.getElementById('visualization'); + var options = { + format: { + minorLabels: function(date, scale, step) { + var now = new Date(); + var ago = now - date; + var divider; + switch (scale) { + case 'millisecond': + divider = 1; + break; + case 'second': + divider = 1000; + break; + case 'minute': + divider = 1000 * 60; + break; + case 'hour': + divider = 1000 * 60 * 60; + break; + case 'day': + divider = 1000 * 60 * 60 * 24; + break; + case 'weekday': + divider = 1000 * 60 * 60 * 24 * 7; + break; + case 'month': + divider = 1000 * 60 * 60 * 24 * 30; + break; + case 'year': + divider = 1000 * 60 * 60 * 24 * 365; + break; + default: + return new Date(date); + } + return (Math.round(ago * step / divider)) + " " + scale + "s ago" + }, + majorLabels: function(date, scale, step) { + var now = new Date(); + var ago = now - date; + var divider; + switch (scale) { + case 'millisecond': + divider = 1; + break; + case 'second': + divider = 1000; + break; + case 'minute': + divider = 1000 * 60; + break; + case 'hour': + divider = 1000 * 60 * 60; + break; + case 'day': + divider = 1000 * 60 * 60 * 24; + break; + case 'weekday': + divider = 1000 * 60 * 60 * 24 * 7; + break; + case 'month': + divider = 1000 * 60 * 60 * 24 * 30; + break; + case 'year': + divider = 1000 * 60 * 60 * 24 * 365; + break; + default: + return new Date(date); + } + return (Math.round(ago * step / divider)) + " " + scale + "s ago" + } + } + }; + + var timeline = new vis.Timeline(container); + timeline.setOptions(options); + timeline.setGroups(groups); + timeline.setItems(items); + +</script> +</body> +</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/other/groupsPerformance.html b/www/lib/vis/examples/timeline/other/groupsPerformance.html index 663f9968..1b16af30 100644 --- a/www/lib/vis/examples/timeline/other/groupsPerformance.html +++ b/www/lib/vis/examples/timeline/other/groupsPerformance.html @@ -3,7 +3,7 @@ <title>Timeline | A lot of grouped data</title> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body { diff --git a/www/lib/vis/examples/timeline/other/hidingPeriods.html b/www/lib/vis/examples/timeline/other/hidingPeriods.html index 9b2f359a..52ec6f9a 100644 --- a/www/lib/vis/examples/timeline/other/hidingPeriods.html +++ b/www/lib/vis/examples/timeline/other/hidingPeriods.html @@ -10,7 +10,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css"/> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/other/horizontalScroll.html b/www/lib/vis/examples/timeline/other/horizontalScroll.html new file mode 100644 index 00000000..a999cd51 --- /dev/null +++ b/www/lib/vis/examples/timeline/other/horizontalScroll.html @@ -0,0 +1,77 @@ +<html> +<head> + <title>Timeline | Horizontal Scroll Option</title> + + <script src="../../../dist/vis.js"></script> + <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + + <script src="../../googleAnalytics.js"></script> +</head> + +<body> + +<h1>Timeline horizontal scroll option</h1> + +<div id="mytimeline"></div> + +<script> + + // create groups + var numberOfGroups = 25; + var groups = new vis.DataSet() + for (var i = 0; i < numberOfGroups; i++) { + groups.add({ + id: i, + content: 'Truck ' + i + }) + } + + // create items + var numberOfItems = 1000; + var items = new vis.DataSet(); + + var itemsPerGroup = Math.round(numberOfItems/numberOfGroups); + + for (var truck = 0; truck < numberOfGroups; truck++) { + var date = new Date(); + for (var order = 0; order < itemsPerGroup; order++) { + date.setHours(date.getHours() + 4 * (Math.random() < 0.2)); + var start = new Date(date); + + date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4)); + var end = new Date(date); + + items.add({ + id: order + itemsPerGroup * truck, + group: truck, + start: start, + end: end, + content: 'Order ' + order + }); + } + } + + // specify options + var options = { + stack: true, + horizontalScroll: true, + zoomKey: 'ctrlKey', + maxHeight: 400, + start: new Date(), + end: new Date(1000*60*60*24 + (new Date()).valueOf()), + editable: true, + margin: { + item: 10, // minimal margin between items + axis: 5 // minimal margin between items and the axis + }, + orientation: 'top' + }; + + // create a Timeline + var container = document.getElementById('mytimeline'); + timeline = new vis.Timeline(container, items, groups, options); + +</script> + +</body> +</html> diff --git a/www/lib/vis/examples/timeline/other/localization.html b/www/lib/vis/examples/timeline/other/localization.html index 39080c89..5b58923b 100644 --- a/www/lib/vis/examples/timeline/other/localization.html +++ b/www/lib/vis/examples/timeline/other/localization.html @@ -12,7 +12,7 @@ <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.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> @@ -24,7 +24,9 @@ <label for="locale">Select a locale:</label> <select id="locale"> <option value="en" selected>en</option> + <option value="it">it</option> <option value="nl">nl</option> + <option value="de">de</option> </select> </p> @@ -63,4 +65,4 @@ select.onchange(); </script> </body> -</html>
\ No newline at end of file +</html> diff --git a/www/lib/vis/examples/timeline/other/performance.html b/www/lib/vis/examples/timeline/other/performance.html index 4f914354..45b22aab 100644 --- a/www/lib/vis/examples/timeline/other/performance.html +++ b/www/lib/vis/examples/timeline/other/performance.html @@ -14,7 +14,7 @@ <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.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/other/requirejs/requirejs_example.html b/www/lib/vis/examples/timeline/other/requirejs/requirejs_example.html index d4531591..363845fe 100644 --- a/www/lib/vis/examples/timeline/other/requirejs/requirejs_example.html +++ b/www/lib/vis/examples/timeline/other/requirejs/requirejs_example.html @@ -5,7 +5,7 @@ <script data-main="scripts/main" src="scripts/require.js"></script> - <link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/other/rtl.html b/www/lib/vis/examples/timeline/other/rtl.html index 63fc79ad..f53b1802 100644 --- a/www/lib/vis/examples/timeline/other/rtl.html +++ b/www/lib/vis/examples/timeline/other/rtl.html @@ -3,32 +3,23 @@ <head> <title>Timeline | RTL example</title> - <style> - body, html { - font-family: arial, sans-serif; - font-size: 11pt; - } - </style> - <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> -<p>An editable timeline allows to drag items around, create new items, and remove items. Changes are logged in the browser console.</p> +<h1>Timeline RTL support</h1> + +<h2>Using <code>dir = "rtl"</code> in any parent node</h2> +<div id="timeline1" dir="rtl"></div> -<div id="visualization"></div> +<h2>Using <code>options.rtl = true</code></h2> +<div id="timeline2"></div> <script> - // create a dataset with items - // we specify the type of the fields `start` and `end` here to be strings - // containing an ISO date. The fields will be outputted as ISO dates - // automatically getting data from the DataSet via items.get(). - var items = new vis.DataSet({ - type: { start: 'ISODate', end: 'ISODate' } - }); + var items = new vis.DataSet(); // add items to the DataSet items.add([ {id: 1, content: '2014-01-23 <br>start', start: '2014-01-23'}, @@ -39,38 +30,20 @@ {id: 6, content: '2014-01-26', start: '2014-01-26'} ]); - // log changes to the console - items.on('*', function (event, properties) { - console.log(event, properties.items); - }); + var container1 = document.getElementById('timeline1'); + var container2 = document.getElementById('timeline2'); - var container = document.getElementById('visualization'); var options = { start: '2014-01-10', end: '2014-02-10', height: '300px', - rtl: true, - // allow selecting multiple items using ctrl+click, shift+click, or hold. - multiselect: true, - - // allow manipulation of items - editable: true, - - /* alternatively, enable/disable individual actions: - - editable: { - add: true, - updateTime: true, - updateGroup: true, - remove: true - }, - - */ - - showCurrentTime: true }; - var timeline = new vis.Timeline(container, items, options); + var options1 = Object.assign({}, options) + var timeline1 = new vis.Timeline(container1, items, options1); + + var options2 = Object.assign({rtl: true}, options) + var timeline2 = new vis.Timeline(container2, items, options2); </script> </body> diff --git a/www/lib/vis/examples/timeline/other/timezone.html b/www/lib/vis/examples/timeline/other/timezone.html index fd7a22c0..8994ba98 100644 --- a/www/lib/vis/examples/timeline/other/timezone.html +++ b/www/lib/vis/examples/timeline/other/timezone.html @@ -11,7 +11,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/other/usingReact.html b/www/lib/vis/examples/timeline/other/usingReact.html new file mode 100644 index 00000000..f6d1e1f7 --- /dev/null +++ b/www/lib/vis/examples/timeline/other/usingReact.html @@ -0,0 +1,123 @@ +<!DOCTYPE HTML> +<html> + <head> + <meta charset="utf-8"> + <title>React Components in templates</title> + </head> + <body> + + <div id='root'></div> + + <!-- + For ease of use, we are including the React, ReactDOM and Babel CDN + builds to make getting started as fast as possible. + + In production, you'll want to instead look at using something + like Gulp, Grunt or WebPack (my personal recommendation) + to compile JSX into JavaScript. Also, check out: + http://facebook.github.io/react/docs/tooling-integration.html + --> + <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> + + <script src="../../../dist/vis.js"></script> + <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + + <!-- + This is where you link to your React code. Can be .js or .jsx + extension, doesn't really matter. + --> + <script type="text/babel"> + var timeline; + + // create groups + var numberOfGroups = 25; + var groups = new vis.DataSet() + for (var i = 0; i < numberOfGroups; i++) { + groups.add({ + id: i, + content: 'Truck ' + i + }) + } + + // create items + var numberOfItems = 1000; + var items = new vis.DataSet(); + var itemsPerGroup = Math.round(numberOfItems/numberOfGroups); + for (var truck = 0; truck < numberOfGroups; truck++) { + var date = new Date(); + for (var order = 0; order < itemsPerGroup; order++) { + date.setHours(date.getHours() + 4 * (Math.random() < 0.2)); + var start = new Date(date); + date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4)); + var end = new Date(date); + items.add({ + id: order + itemsPerGroup * truck, + group: truck, + start: start, + end: end, + content: 'Order ' + order + }); + } + } + + var GroupTemplate = React.createClass({ + render: function() { + var { group } = this.props; + return <div> + <label>{group.content}</label> + </div> + } + }) + + var ItemTemplate = React.createClass({ + render: function() { + var { item } = this.props; + return <div> + <label>{item.content}</label> + </div> + } + }) + + // specify options + var options = { + orientation: 'top', + maxHeight: 400, + start: new Date(), + end: new Date(1000*60*60*24 + (new Date()).valueOf()), + editable: true, + template: function (item, element) { + ReactDOM.unmountComponentAtNode(element); + return ReactDOM.render(<ItemTemplate item={item} />, element); + }, + groupTemplate: function (group, element) { + ReactDOM.unmountComponentAtNode(element); + return ReactDOM.render(<GroupTemplate group={group} />, element); + } + } + + + var VisTimeline = React.createClass({ + componentDidMount: function() { + return initTimeline(); + }, + render: function() { + return <div> + <h1>Vis timline with React</h1> + <h2>Using react components for items and group templates</h2> + + <div id="mytimeline"></div> + </div> + } + }); + + function initTimeline() { + var container = document.getElementById('mytimeline'); + timeline = new vis.Timeline(container, items, groups, options); + } + + ReactDOM.render(<VisTimeline />, document.getElementById('root')); + </script> + </body> +</html> diff --git a/www/lib/vis/examples/timeline/other/verticalScroll.html b/www/lib/vis/examples/timeline/other/verticalScroll.html new file mode 100644 index 00000000..ddf946f0 --- /dev/null +++ b/www/lib/vis/examples/timeline/other/verticalScroll.html @@ -0,0 +1,93 @@ +<html> +<head> + <title>Timeline | Vertical Scroll Option</title> + + <script src="../../../dist/vis.js"></script> + <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + + <script src="../../googleAnalytics.js"></script> +</head> + +<body> + +<h1>Timeline vertical scroll option</h1> + +<h2>With <code> +verticalScroll: true, +zoomKey: 'ctrlKey'</code> +</h2> + +<div id="mytimeline1"></div> + +<h2>With <code> +horizontalScroll: true, +verticalScroll: true, +zoomKey: 'ctrlKey'</code> +</h2> +<div id="mytimeline2"></div> +<script> + + // create groups + var numberOfGroups = 25; + var groups = new vis.DataSet() + for (var i = 0; i < numberOfGroups; i++) { + groups.add({ + id: i, + content: 'Truck ' + i + }) + } + + // create items + var numberOfItems = 1000; + var items = new vis.DataSet(); + + var itemsPerGroup = Math.round(numberOfItems/numberOfGroups); + + for (var truck = 0; truck < numberOfGroups; truck++) { + var date = new Date(); + for (var order = 0; order < itemsPerGroup; order++) { + date.setHours(date.getHours() + 4 * (Math.random() < 0.2)); + var start = new Date(date); + + date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4)); + var end = new Date(date); + + items.add({ + id: order + itemsPerGroup * truck, + group: truck, + start: start, + end: end, + content: 'Order ' + order + }); + } + } + + // specify options + var options = { + stack: true, + verticalScroll: true, + zoomKey: 'ctrlKey', + maxHeight: 200, + start: new Date(), + end: new Date(1000*60*60*24 + (new Date()).valueOf()), + editable: true, + margin: { + item: 10, // minimal margin between items + axis: 5 // minimal margin between items and the axis + }, + orientation: 'top' + }; + + // create a Timeline + options1 = Object.assign({}, options) + var container1 = document.getElementById('mytimeline1'); + timeline1 = new vis.Timeline(container1, items, groups, options1); + + options2 = Object.assign({horizontalScroll: true}, options) + var container2 = document.getElementById('mytimeline2'); + timeline2 = new vis.Timeline(container2, items, groups, options2); + +</script> + +</body> +</html> diff --git a/www/lib/vis/examples/timeline/styling/axisOrientation.html b/www/lib/vis/examples/timeline/styling/axisOrientation.html index cfabe312..b3978f17 100644 --- a/www/lib/vis/examples/timeline/styling/axisOrientation.html +++ b/www/lib/vis/examples/timeline/styling/axisOrientation.html @@ -10,7 +10,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> diff --git a/www/lib/vis/examples/timeline/styling/customCss.html b/www/lib/vis/examples/timeline/styling/customCss.html index 906d44a6..ed700a1d 100644 --- a/www/lib/vis/examples/timeline/styling/customCss.html +++ b/www/lib/vis/examples/timeline/styling/customCss.html @@ -4,7 +4,7 @@ <title>Timeline | Custom styling</title> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body { diff --git a/www/lib/vis/examples/timeline/styling/gridStyling.html b/www/lib/vis/examples/timeline/styling/gridStyling.html index aaa39c45..9fec28b2 100644 --- a/www/lib/vis/examples/timeline/styling/gridStyling.html +++ b/www/lib/vis/examples/timeline/styling/gridStyling.html @@ -4,7 +4,7 @@ <title>Timeline | Grid styling</title> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body, html { diff --git a/www/lib/vis/examples/timeline/styling/itemClassNames.html b/www/lib/vis/examples/timeline/styling/itemClassNames.html index 38b2735d..62433484 100755 --- a/www/lib/vis/examples/timeline/styling/itemClassNames.html +++ b/www/lib/vis/examples/timeline/styling/itemClassNames.html @@ -3,14 +3,14 @@ <title>Timeline | Item class names</title> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body, input { font: 12pt verdana; } - /* custom styles for individual items, load this after vis.css */ + /* custom styles for individual items, load this after vis.css/vis-timeline-graph2d.min.css */ .vis-item.green { background-color: greenyellow; diff --git a/www/lib/vis/examples/timeline/styling/itemTemplates.html b/www/lib/vis/examples/timeline/styling/itemTemplates.html index a8772afa..13e43c46 100644 --- a/www/lib/vis/examples/timeline/styling/itemTemplates.html +++ b/www/lib/vis/examples/timeline/styling/itemTemplates.html @@ -4,7 +4,7 @@ <title>Timeline | Templates</title> <!-- load handlebars for templating, and create a template --> - <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.4/handlebars.min.js"></script> + <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script> <script id="item-template" type="text/x-handlebars-template"> <table class="score"> <tr> @@ -24,7 +24,7 @@ </script> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body, html { |