Browse Source

removed website from develop

v3_develop
Alex de Mulder 10 years ago
parent
commit
04bcf4b44d
371 changed files with 0 additions and 133155 deletions
  1. +0
    -470
      www2/css/bootstrap-theme.css
  2. +0
    -1
      www2/css/bootstrap-theme.css.map
  3. +0
    -5
      www2/css/bootstrap-theme.min.css
  4. +0
    -6332
      www2/css/bootstrap.css
  5. +0
    -1
      www2/css/bootstrap.css.map
  6. +0
    -5
      www2/css/bootstrap.min.css
  7. +0
    -144
      www2/css/carousel.css
  8. +0
    -87
      www2/css/prettify.css
  9. BIN
      www2/dist/img/network/acceptDeleteIcon.png
  10. BIN
      www2/dist/img/network/addNodeIcon.png
  11. BIN
      www2/dist/img/network/backIcon.png
  12. BIN
      www2/dist/img/network/connectIcon.png
  13. BIN
      www2/dist/img/network/cross.png
  14. BIN
      www2/dist/img/network/cross2.png
  15. BIN
      www2/dist/img/network/deleteIcon.png
  16. BIN
      www2/dist/img/network/downArrow.png
  17. BIN
      www2/dist/img/network/editIcon.png
  18. BIN
      www2/dist/img/network/leftArrow.png
  19. BIN
      www2/dist/img/network/minus.png
  20. BIN
      www2/dist/img/network/plus.png
  21. BIN
      www2/dist/img/network/rightArrow.png
  22. BIN
      www2/dist/img/network/upArrow.png
  23. BIN
      www2/dist/img/network/zoomExtends.png
  24. BIN
      www2/dist/img/timeline/delete.png
  25. +0
    -795
      www2/dist/vis.css
  26. +0
    -34028
      www2/dist/vis.js
  27. +0
    -1
      www2/dist/vis.map
  28. +0
    -1
      www2/dist/vis.min.css
  29. +0
    -39
      www2/dist/vis.min.js
  30. +0
    -87
      www2/docs/css/prettify.css
  31. +0
    -83
      www2/docs/css/style.css
  32. +0
    -931
      www2/docs/dataset.html
  33. +0
    -219
      www2/docs/dataview.html
  34. +0
    -1115
      www2/docs/graph2d.html
  35. +0
    -673
      www2/docs/graph3d.html
  36. BIN
      www2/docs/img/graph/graph.png
  37. BIN
      www2/docs/img/graph/graph120x60.png
  38. BIN
      www2/docs/img/graph3d.png
  39. BIN
      www2/docs/img/graph3d120x60.png
  40. BIN
      www2/docs/img/timeline/timeline.png
  41. BIN
      www2/docs/img/timeline/timeline120x60.png
  42. BIN
      www2/docs/img/vis_overview.odg
  43. BIN
      www2/docs/img/vis_overview.png
  44. +0
    -225
      www2/docs/index.html
  45. +0
    -2
      www2/docs/lib/prettify/lang-apollo.js
  46. +0
    -2
      www2/docs/lib/prettify/lang-css.js
  47. +0
    -2
      www2/docs/lib/prettify/lang-hs.js
  48. +0
    -2
      www2/docs/lib/prettify/lang-lisp.js
  49. +0
    -2
      www2/docs/lib/prettify/lang-lua.js
  50. +0
    -2
      www2/docs/lib/prettify/lang-ml.js
  51. +0
    -1
      www2/docs/lib/prettify/lang-proto.js
  52. +0
    -2
      www2/docs/lib/prettify/lang-scala.js
  53. +0
    -2
      www2/docs/lib/prettify/lang-sql.js
  54. +0
    -2
      www2/docs/lib/prettify/lang-vb.js
  55. +0
    -3
      www2/docs/lib/prettify/lang-vhdl.js
  56. +0
    -2
      www2/docs/lib/prettify/lang-wiki.js
  57. +0
    -2
      www2/docs/lib/prettify/lang-yaml.js
  58. +0
    -1
      www2/docs/lib/prettify/prettify.css
  59. +0
    -33
      www2/docs/lib/prettify/prettify.js
  60. +0
    -2508
      www2/docs/network.html
  61. +0
    -1355
      www2/docs/timeline.html
  62. +0
    -52
      www2/examples/graph2d/01_basic.html
  63. +0
    -57
      www2/examples/graph2d/02_bars.html
  64. +0
    -112
      www2/examples/graph2d/03_groups.html
  65. +0
    -126
      www2/examples/graph2d/04_rightAxis.html
  66. +0
    -138
      www2/examples/graph2d/05_bothAxis.html
  67. +0
    -101
      www2/examples/graph2d/06_interpolation.html
  68. +0
    -74
      www2/examples/graph2d/07_scrollingAndSorting.html
  69. +0
    -150
      www2/examples/graph2d/08_performance.html
  70. +0
    -367
      www2/examples/graph2d/09_external_legend.html
  71. +0
    -74
      www2/examples/graph2d/10_barsSideBySide.html
  72. +0
    -87
      www2/examples/graph2d/11_barsSideBySideGroups.html
  73. +0
    -96
      www2/examples/graph2d/12_customRange.html
  74. +0
    -65
      www2/examples/graph2d/13_localization.html
  75. +0
    -145
      www2/examples/graph2d/14_toggleGroups.html
  76. +0
    -122
      www2/examples/graph2d/15_streaming_data.html
  77. +0
    -215
      www2/examples/graph2d/16_bothAxis_titles.html
  78. +0
    -256
      www2/examples/graph2d/17_dynamicStyling.html
  79. +0
    -63
      www2/examples/graph2d/18_scatterplot.html
  80. +0
    -87
      www2/examples/graph2d/default.css
  81. +0
    -31
      www2/examples/graph2d/index.html
  82. +0
    -87
      www2/examples/graph3d/default.css
  83. +0
    -60
      www2/examples/graph3d/example01_basis.html
  84. +0
    -109
      www2/examples/graph3d/example02_camera.html
  85. +0
    -63
      www2/examples/graph3d/example03_filter.html
  86. +0
    -70
      www2/examples/graph3d/example04_animate.html
  87. +0
    -59
      www2/examples/graph3d/example05_line.html
  88. +0
    -77
      www2/examples/graph3d/example06_moving_dots.html
  89. +0
    -67
      www2/examples/graph3d/example07_dot_cloud_colors.html
  90. +0
    -67
      www2/examples/graph3d/example08_dot_cloud_size.html
  91. +0
    -78
      www2/examples/graph3d/example09_mobile.html
  92. +0
    -120
      www2/examples/graph3d/example10_styles.html
  93. +0
    -103
      www2/examples/graph3d/example11_tooltips.html
  94. +0
    -115
      www2/examples/graph3d/example12_ticks.html
  95. +0
    -28
      www2/examples/graph3d/index.html
  96. +0
    -120
      www2/examples/graph3d/playground/csv2array.js
  97. +0
    -80
      www2/examples/graph3d/playground/csv2datatable.html
  98. +0
    -173
      www2/examples/graph3d/playground/datasource.html
  99. +0
    -155
      www2/examples/graph3d/playground/datasource.php
  100. +0
    -179
      www2/examples/graph3d/playground/index.html

+ 0
- 470
www2/css/bootstrap-theme.css View File

@ -1,470 +0,0 @@
/*!
* Bootstrap v3.3.1 (http://getbootstrap.com)
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
.btn-default,
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
}
.btn-default:active,
.btn-primary:active,
.btn-success:active,
.btn-info:active,
.btn-warning:active,
.btn-danger:active,
.btn-default.active,
.btn-primary.active,
.btn-success.active,
.btn-info.active,
.btn-warning.active,
.btn-danger.active {
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-default .badge,
.btn-primary .badge,
.btn-success .badge,
.btn-info .badge,
.btn-warning .badge,
.btn-danger .badge {
text-shadow: none;
}
.btn:active,
.btn.active {
background-image: none;
}
.btn-default {
text-shadow: 0 1px 0 #fff;
background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%);
background-image: -o-linear-gradient(top, #fff 0%, #e0e0e0 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0));
background-image: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #dbdbdb;
border-color: #ccc;
}
.btn-default:hover,
.btn-default:focus {
background-color: #e0e0e0;
background-position: 0 -15px;
}
.btn-default:active,
.btn-default.active {
background-color: #e0e0e0;
border-color: #dbdbdb;
}
.btn-default:disabled,
.btn-default[disabled] {
background-color: #e0e0e0;
background-image: none;
}
.btn-primary {
background-image: -webkit-linear-gradient(top, #337ab7 0%, #265a88 100%);
background-image: -o-linear-gradient(top, #337ab7 0%, #265a88 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#265a88));
background-image: linear-gradient(to bottom, #337ab7 0%, #265a88 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #245580;
}
.btn-primary:hover,
.btn-primary:focus {
background-color: #265a88;
background-position: 0 -15px;
}
.btn-primary:active,
.btn-primary.active {
background-color: #265a88;
border-color: #245580;
}
.btn-primary:disabled,
.btn-primary[disabled] {
background-color: #265a88;
background-image: none;
}
.btn-success {
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%);
background-image: -o-linear-gradient(top, #5cb85c 0%, #419641 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#419641));
background-image: linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #3e8f3e;
}
.btn-success:hover,
.btn-success:focus {
background-color: #419641;
background-position: 0 -15px;
}
.btn-success:active,
.btn-success.active {
background-color: #419641;
border-color: #3e8f3e;
}
.btn-success:disabled,
.btn-success[disabled] {
background-color: #419641;
background-image: none;
}
.btn-info {
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
background-image: -o-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#2aabd2));
background-image: linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #28a4c9;
}
.btn-info:hover,
.btn-info:focus {
background-color: #2aabd2;
background-position: 0 -15px;
}
.btn-info:active,
.btn-info.active {
background-color: #2aabd2;
border-color: #28a4c9;
}
.btn-info:disabled,
.btn-info[disabled] {
background-color: #2aabd2;
background-image: none;
}
.btn-warning {
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
background-image: -o-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#eb9316));
background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #e38d13;
}
.btn-warning:hover,
.btn-warning:focus {
background-color: #eb9316;
background-position: 0 -15px;
}
.btn-warning:active,
.btn-warning.active {
background-color: #eb9316;
border-color: #e38d13;
}
.btn-warning:disabled,
.btn-warning[disabled] {
background-color: #eb9316;
background-image: none;
}
.btn-danger {
background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
background-image: -o-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c12e2a));
background-image: linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #b92c28;
}
.btn-danger:hover,
.btn-danger:focus {
background-color: #c12e2a;
background-position: 0 -15px;
}
.btn-danger:active,
.btn-danger.active {
background-color: #c12e2a;
border-color: #b92c28;
}
.btn-danger:disabled,
.btn-danger[disabled] {
background-color: #c12e2a;
background-image: none;
}
.thumbnail,
.img-thumbnail {
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background-color: #e8e8e8;
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
background-repeat: repeat-x;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
background-color: #2e6da4;
background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
background-repeat: repeat-x;
}
.navbar-default {
background-image: -webkit-linear-gradient(top, #fff 0%, #f8f8f8 100%);
background-image: -o-linear-gradient(top, #fff 0%, #f8f8f8 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f8f8f8));
background-image: linear-gradient(to bottom, #fff 0%, #f8f8f8 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .active > a {
background-image: -webkit-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%);
background-image: -o-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#dbdbdb), to(#e2e2e2));
background-image: linear-gradient(to bottom, #dbdbdb 0%, #e2e2e2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdbdbdb', endColorstr='#ffe2e2e2', GradientType=0);
background-repeat: repeat-x;
-webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
}
.navbar-brand,
.navbar-nav > li > a {
text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}
.navbar-inverse {
background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222 100%);
background-image: -o-linear-gradient(top, #3c3c3c 0%, #222 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#222));
background-image: linear-gradient(to bottom, #3c3c3c 0%, #222 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .active > a {
background-image: -webkit-linear-gradient(top, #080808 0%, #0f0f0f 100%);
background-image: -o-linear-gradient(top, #080808 0%, #0f0f0f 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#080808), to(#0f0f0f));
background-image: linear-gradient(to bottom, #080808 0%, #0f0f0f 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff080808', endColorstr='#ff0f0f0f', GradientType=0);
background-repeat: repeat-x;
-webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
}
.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-nav > li > a {
text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
}
.navbar-static-top,
.navbar-fixed-top,
.navbar-fixed-bottom {
border-radius: 0;
}
@media (max-width: 767px) {
.navbar .navbar-nav .open .dropdown-menu > .active > a,
.navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #fff;
background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
background-repeat: repeat-x;
}
}
.alert {
text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
}
.alert-success {
background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
background-image: -o-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#c8e5bc));
background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
background-repeat: repeat-x;
border-color: #b2dba1;
}
.alert-info {
background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
background-image: -o-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#b9def0));
background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
background-repeat: repeat-x;
border-color: #9acfea;
}
.alert-warning {
background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
background-image: -o-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#f8efc0));
background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
background-repeat: repeat-x;
border-color: #f5e79e;
}
.alert-danger {
background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
background-image: -o-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#e7c3c3));
background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
background-repeat: repeat-x;
border-color: #dca7a7;
}
.progress {
background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
background-image: -o-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#f5f5f5));
background-image: linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);
background-repeat: repeat-x;
}
.progress-bar {
background-image: -webkit-linear-gradient(top, #337ab7 0%, #286090 100%);
background-image: -o-linear-gradient(top, #337ab7 0%, #286090 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#286090));
background-image: linear-gradient(to bottom, #337ab7 0%, #286090 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff286090', GradientType=0);
background-repeat: repeat-x;
}
.progress-bar-success {
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%);
background-image: -o-linear-gradient(top, #5cb85c 0%, #449d44 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#449d44));
background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
background-repeat: repeat-x;
}
.progress-bar-info {
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
background-image: -o-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#31b0d5));
background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
background-repeat: repeat-x;
}
.progress-bar-warning {
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
background-image: -o-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#ec971f));
background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
background-repeat: repeat-x;
}
.progress-bar-danger {
background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%);
background-image: -o-linear-gradient(top, #d9534f 0%, #c9302c 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c9302c));
background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
background-repeat: repeat-x;
}
.progress-bar-striped {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.list-group {
border-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
text-shadow: 0 -1px 0 #286090;
background-image: -webkit-linear-gradient(top, #337ab7 0%, #2b669a 100%);
background-image: -o-linear-gradient(top, #337ab7 0%, #2b669a 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2b669a));
background-image: linear-gradient(to bottom, #337ab7 0%, #2b669a 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2b669a', GradientType=0);
background-repeat: repeat-x;
border-color: #2b669a;
}
.list-group-item.active .badge,
.list-group-item.active:hover .badge,
.list-group-item.active:focus .badge {
text-shadow: none;
}
.panel {
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.panel-default > .panel-heading {
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
background-repeat: repeat-x;
}
.panel-primary > .panel-heading {
background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
background-repeat: repeat-x;
}
.panel-success > .panel-heading {
background-image: -webkit-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
background-image: -o-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#d0e9c6));
background-image: linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0);
background-repeat: repeat-x;
}
.panel-info > .panel-heading {
background-image: -webkit-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
background-image: -o-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#c4e3f3));
background-image: linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0);
background-repeat: repeat-x;
}
.panel-warning > .panel-heading {
background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
background-image: -o-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#faf2cc));
background-image: linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0);
background-repeat: repeat-x;
}
.panel-danger > .panel-heading {
background-image: -webkit-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
background-image: -o-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#ebcccc));
background-image: linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0);
background-repeat: repeat-x;
}
.well {
background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
background-image: -o-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#f5f5f5));
background-image: linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);
background-repeat: repeat-x;
border-color: #dcdcdc;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
}
/*# sourceMappingURL=bootstrap-theme.css.map */

+ 0
- 1
www2/css/bootstrap-theme.css.map
File diff suppressed because it is too large
View File


+ 0
- 5
www2/css/bootstrap-theme.min.css
File diff suppressed because it is too large
View File


+ 0
- 6332
www2/css/bootstrap.css
File diff suppressed because it is too large
View File


+ 0
- 1
www2/css/bootstrap.css.map
File diff suppressed because it is too large
View File


+ 0
- 5
www2/css/bootstrap.min.css
File diff suppressed because it is too large
View File


+ 0
- 144
www2/css/carousel.css View File

@ -1,144 +0,0 @@
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
padding-bottom: 40px;
color: #5a5a5a;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 20;
}
/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
padding-right: 0;
padding-left: 0;
}
.navbar-wrapper .navbar {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar .container {
width: auto;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
text-shadow:
-0px -0px 3px #000,
-2px -2px 0 #000,
2px -2px 0 #000,
-2px 2px 0 #000,
2px 2px 0 #000;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #064880;
}
.carousel .item.dark {
background-color: #06132c;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-3 {
margin-bottom: 20px;
text-align: center;
}
.marketing h2 {
font-weight: normal;
}
.marketing .col-lg-3 p {
margin-right: 10px;
margin-left: 10px;
}
/* Featurettes
------------------------- */
.featurette-divider {
margin: 80px 0; /* Space out the Bootstrap <hr> more */
border-top: 1px solid #d2d2d2;
}
/* Thin out the marketing headings */
.featurette-heading {
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 768px) {
/* Navbar positioning foo */
.navbar-wrapper {
margin-top: 20px;
}
.navbar-wrapper .container {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar {
padding-right: 0;
padding-left: 0;
}
/* The navbar becomes detached from the top, so we round the corners */
.navbar-wrapper .navbar {
border-radius: 4px;
}
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
.featurette-heading {
font-size: 50px;
}
}
@media (min-width: 992px) {
.featurette-heading {
margin-top: 120px;
}
}

+ 0
- 87
www2/css/prettify.css View File

@ -1,87 +0,0 @@
.com {
color: gray;
}
.lit {
color: red;
}
.pun {
color: gray;
}
.pln {
color: #333333;
}
pre.prettyprint {
border: 1px solid lightgray;
background-color: #fcfcfc;
padding: 5px;
font-size: 10pt;
line-height: 1.5em;
font-family: monospace;
}
ol.linenums {
margin-top:0;
margin-bottom:0;
}
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 {
list-style:none;
}
li.L1,li.L3,li.L5,li.L7,li.L9 {
background:#eee;
}
.str,.atv {
color: green;
}
.kwd,.tag {
color:#2B7CE9;
}
.typ,.atn,.dec {
color: darkorange;
}
@media print {
.com {
color:#600;
font-style:italic;
}
.typ {
color:#404;
font-weight:700;
}
.lit {
color:#044;
}
.pun {
color:#440;
}
.pln {
color:#000;
}
.atn {
color:#404;
}
.str,.atv {
color:#060;
}
.kwd,.tag {
color:#006;
font-weight:700;
}
}

BIN
www2/dist/img/network/acceptDeleteIcon.png View File

Before After
Width: 24  |  Height: 24  |  Size: 20 KiB

BIN
www2/dist/img/network/addNodeIcon.png View File

Before After
Width: 24  |  Height: 24  |  Size: 20 KiB

BIN
www2/dist/img/network/backIcon.png View File

Before After
Width: 24  |  Height: 24  |  Size: 20 KiB

BIN
www2/dist/img/network/connectIcon.png View File

Before After
Width: 24  |  Height: 24  |  Size: 20 KiB

BIN
www2/dist/img/network/cross.png View File

Before After
Width: 7  |  Height: 7  |  Size: 18 KiB

BIN
www2/dist/img/network/cross2.png View File

Before After
Width: 5  |  Height: 5  |  Size: 17 KiB

BIN
www2/dist/img/network/deleteIcon.png View File

Before After
Width: 24  |  Height: 24  |  Size: 20 KiB

BIN
www2/dist/img/network/downArrow.png View File

Before After
Width: 30  |  Height: 30  |  Size: 4.4 KiB

BIN
www2/dist/img/network/editIcon.png View File

Before After
Width: 24  |  Height: 24  |  Size: 20 KiB

BIN
www2/dist/img/network/leftArrow.png View File

Before After
Width: 30  |  Height: 30  |  Size: 4.4 KiB

BIN
www2/dist/img/network/minus.png View File

Before After
Width: 30  |  Height: 30  |  Size: 4.0 KiB

BIN
www2/dist/img/network/plus.png View File

Before After
Width: 30  |  Height: 30  |  Size: 4.2 KiB

BIN
www2/dist/img/network/rightArrow.png View File

Before After
Width: 30  |  Height: 30  |  Size: 4.4 KiB

BIN
www2/dist/img/network/upArrow.png View File

Before After
Width: 30  |  Height: 30  |  Size: 4.4 KiB

BIN
www2/dist/img/network/zoomExtends.png View File

Before After
Width: 30  |  Height: 30  |  Size: 4.4 KiB

BIN
www2/dist/img/timeline/delete.png View File

Before After
Width: 16  |  Height: 16  |  Size: 665 B

+ 0
- 795
www2/dist/vis.css View File

@ -1,795 +0,0 @@
.vis .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Must be displayed above for example selected Timeline items */
z-index: 10;
}
.vis-active {
box-shadow: 0 0 10px #86d5f8;
}
/* override some bootstrap styles screwing up the timelines css */
.vis [class*="span"] {
min-height: 0;
width: auto;
}
.vis.timeline {
}
.vis.timeline.root {
position: relative;
border: 1px solid #bfbfbf;
overflow: hidden;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.vis.timeline .vispanel {
position: absolute;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.vis.timeline .vispanel.center,
.vis.timeline .vispanel.left,
.vis.timeline .vispanel.right,
.vis.timeline .vispanel.top,
.vis.timeline .vispanel.bottom {
border: 1px #bfbfbf;
}
.vis.timeline .vispanel.center,
.vis.timeline .vispanel.left,
.vis.timeline .vispanel.right {
border-top-style: solid;
border-bottom-style: solid;
overflow: hidden;
}
.vis.timeline .vispanel.center,
.vis.timeline .vispanel.top,
.vis.timeline .vispanel.bottom {
border-left-style: solid;
border-right-style: solid;
}
.vis.timeline .background {
overflow: hidden;
}
.vis.timeline .vispanel > .content {
position: relative;
}
.vis.timeline .vispanel .shadow {
position: absolute;
width: 100%;
height: 1px;
box-shadow: 0 0 10px rgba(0,0,0,0.8);
/* TODO: find a nice way to ensure shadows are drawn on top of items
z-index: 1;
*/
}
.vis.timeline .vispanel .shadow.top {
top: -1px;
left: 0;
}
.vis.timeline .vispanel .shadow.bottom {
bottom: -1px;
left: 0;
}
.vis.timeline .labelset {
position: relative;
overflow: hidden;
box-sizing: border-box;
}
.vis.timeline .labelset .vlabel {
position: relative;
left: 0;
top: 0;
width: 100%;
color: #4d4d4d;
box-sizing: border-box;
}
.vis.timeline .labelset .vlabel {
border-bottom: 1px solid #bfbfbf;
}
.vis.timeline .labelset .vlabel:last-child {
border-bottom: none;
}
.vis.timeline .labelset .vlabel .inner {
display: inline-block;
padding: 5px;
}
.vis.timeline .labelset .vlabel .inner.hidden {
padding: 0;
}
.vis.timeline .itemset {
position: relative;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.vis.timeline .itemset .background,
.vis.timeline .itemset .foreground {
position: absolute;
width: 100%;
height: 100%;
overflow: visible;
}
.vis.timeline .axis {
position: absolute;
width: 100%;
height: 0;
left: 0;
z-index: 1;
}
.vis.timeline .foreground .group {
position: relative;
box-sizing: border-box;
border-bottom: 1px solid #bfbfbf;
}
.vis.timeline .foreground .group:last-child {
border-bottom: none;
}
.vis.timeline .item {
position: absolute;
color: #1A1A1A;
border-color: #97B0F8;
border-width: 1px;
background-color: #D5DDF6;
display: inline-block;
padding: 5px;
}
.vis.timeline .item.selected {
border-color: #FFC200;
background-color: #FFF785;
/* z-index must be higher than the z-index of custom time bar and current time bar */
z-index: 2;
}
.vis.timeline .editable .item.selected {
cursor: move;
}
.vis.timeline .item.point.selected {
background-color: #FFF785;
}
.vis.timeline .item.box {
text-align: center;
border-style: solid;
border-radius: 2px;
}
.vis.timeline .item.point {
background: none;
}
.vis.timeline .item.dot {
position: absolute;
padding: 0;
border-width: 4px;
border-style: solid;
border-radius: 4px;
}
.vis.timeline .item.range {
border-style: solid;
border-radius: 2px;
box-sizing: border-box;
}
.vis.timeline .item.background {
overflow: hidden;
border: none;
background-color: rgba(213, 221, 246, 0.4);
box-sizing: border-box;
padding: 0;
margin: 0;
}
.vis.timeline .item.range .content {
position: relative;
display: inline-block;
max-width: 100%;
overflow: hidden;
}
.vis.timeline .item.background .content {
position: absolute;
display: inline-block;
overflow: hidden;
max-width: 100%;
margin: 5px;
}
.vis.timeline .item.line {
padding: 0;
position: absolute;
width: 0;
border-left-width: 1px;
border-left-style: solid;
}
.vis.timeline .item .content {
white-space: nowrap;
overflow: hidden;
}
.vis.timeline .item .delete {
background: url('img/timeline/delete.png') no-repeat top center;
position: absolute;
width: 24px;
height: 24px;
top: 0;
right: -24px;
cursor: pointer;
}
.vis.timeline .item.range .drag-left {
position: absolute;
width: 24px;
height: 100%;
top: 0;
left: -4px;
cursor: w-resize;
}
.vis.timeline .item.range .drag-right {
position: absolute;
width: 24px;
height: 100%;
top: 0;
right: -4px;
cursor: e-resize;
}
.vis.timeline .timeaxis {
position: relative;
overflow: hidden;
}
.vis.timeline .timeaxis.foreground {
top: 0;
left: 0;
width: 100%;
}
.vis.timeline .timeaxis.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.vis.timeline .timeaxis .text {
position: absolute;
color: #4d4d4d;
padding: 3px;
white-space: nowrap;
}
.vis.timeline .timeaxis .text.measure {
position: absolute;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
visibility: hidden;
}
.vis.timeline .timeaxis .grid.vertical {
position: absolute;
width: 0;
border-right: 1px solid;
}
.vis.timeline .timeaxis .grid.minor {
border-color: #e5e5e5;
}
.vis.timeline .timeaxis .grid.major {
border-color: #bfbfbf;
}
.vis.timeline .currenttime {
background-color: #FF7F6E;
width: 2px;
z-index: 1;
}
.vis.timeline .customtime {
background-color: #6E94FF;
width: 2px;
cursor: move;
z-index: 1;
}
.vis.timeline.root {
/*
-webkit-transition: height .4s ease-in-out;
transition: height .4s ease-in-out;
*/
}
.vis.timeline .vispanel {
/*
-webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
transition: height .4s ease-in-out, top .4s ease-in-out;
*/
}
.vis.timeline .axis {
/*
-webkit-transition: top .4s ease-in-out;
transition: top .4s ease-in-out;
*/
}
/* TODO: get animation working nicely
.vis.timeline .item {
-webkit-transition: top .4s ease-in-out;
transition: top .4s ease-in-out;
}
.vis.timeline .item.line {
-webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
transition: height .4s ease-in-out, top .4s ease-in-out;
}
/**/
.vis.timeline .vispanel.background.horizontal .grid.horizontal {
position: absolute;
width: 100%;
height: 0;
border-bottom: 1px solid;
}
.vis.timeline .vispanel.background.horizontal .grid.minor {
border-color: #e5e5e5;
}
.vis.timeline .vispanel.background.horizontal .grid.major {
border-color: #bfbfbf;
}
.vis.timeline .dataaxis .yAxis.major {
width: 100%;
position: absolute;
color: #4d4d4d;
white-space: nowrap;
}
.vis.timeline .dataaxis .yAxis.major.measure{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border: 0px;
visibility: hidden;
width: auto;
}
.vis.timeline .dataaxis .yAxis.minor{
position: absolute;
width: 100%;
color: #bebebe;
white-space: nowrap;
}
.vis.timeline .dataaxis .yAxis.minor.measure{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border: 0px;
visibility: hidden;
width: auto;
}
.vis.timeline .dataaxis .yAxis.title{
position: absolute;
color: #4d4d4d;
white-space: nowrap;
bottom: 20px;
text-align: center;
}
.vis.timeline .dataaxis .yAxis.title.measure{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
visibility: hidden;
width: auto;
}
.vis.timeline .dataaxis .yAxis.title.left {
bottom: 0px;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.vis.timeline .dataaxis .yAxis.title.right {
bottom: 0px;
-webkit-transform-origin: right bottom;
-moz-transform-origin: right bottom;
-ms-transform-origin: right bottom;
-o-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.vis.timeline .legend {
background-color: rgba(247, 252, 255, 0.65);
padding: 5px;
border-color: #b3b3b3;
border-style:solid;
border-width: 1px;
box-shadow: 2px 2px 10px rgba(154, 154, 154, 0.55);
}
.vis.timeline .legendText {
/*font-size: 10px;*/
white-space: nowrap;
display: inline-block
}
.vis.timeline .graphGroup0 {
fill:#4f81bd;
fill-opacity:0;
stroke-width:2px;
stroke: #4f81bd;
}
.vis.timeline .graphGroup1 {
fill:#f79646;
fill-opacity:0;
stroke-width:2px;
stroke: #f79646;
}
.vis.timeline .graphGroup2 {
fill: #8c51cf;
fill-opacity:0;
stroke-width:2px;
stroke: #8c51cf;
}
.vis.timeline .graphGroup3 {
fill: #75c841;
fill-opacity:0;
stroke-width:2px;
stroke: #75c841;
}
.vis.timeline .graphGroup4 {
fill: #ff0100;
fill-opacity:0;
stroke-width:2px;
stroke: #ff0100;
}
.vis.timeline .graphGroup5 {
fill: #37d8e6;
fill-opacity:0;
stroke-width:2px;
stroke: #37d8e6;
}
.vis.timeline .graphGroup6 {
fill: #042662;
fill-opacity:0;
stroke-width:2px;
stroke: #042662;
}
.vis.timeline .graphGroup7 {
fill:#00ff26;
fill-opacity:0;
stroke-width:2px;
stroke: #00ff26;
}
.vis.timeline .graphGroup8 {
fill:#ff00ff;
fill-opacity:0;
stroke-width:2px;
stroke: #ff00ff;
}
.vis.timeline .graphGroup9 {
fill: #8f3938;
fill-opacity:0;
stroke-width:2px;
stroke: #8f3938;
}
.vis.timeline .fill {
fill-opacity:0.1;
stroke: none;
}
.vis.timeline .bar {
fill-opacity:0.5;
stroke-width:1px;
}
.vis.timeline .point {
stroke-width:2px;
fill-opacity:1.0;
}
.vis.timeline .legendBackground {
stroke-width:1px;
fill-opacity:0.9;
fill: #ffffff;
stroke: #c2c2c2;
}
.vis.timeline .outline {
stroke-width:1px;
fill-opacity:1;
fill: #ffffff;
stroke: #e5e5e5;
}
.vis.timeline .iconFill {
fill-opacity:0.3;
stroke: none;
}
div.network-manipulationDiv {
border-width: 0;
border-bottom: 1px;
border-style:solid;
border-color: #d6d9d8;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 48%, #fafafa 50%, #fcfcfc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(48%,#fcfcfc), color-stop(50%,#fafafa), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 30px;
}
div.network-manipulation-editMode {
position:absolute;
left: 0;
top: 0;
height: 30px;
margin-top:20px;
}
div.network-manipulation-closeDiv {
position:absolute;
right: 0;
top: 0;
width: 30px;
height: 30px;
background-position: 20px 3px;
background-repeat: no-repeat;
background-image: url("img/network/cross.png");
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
div.network-manipulation-closeDiv:hover {
opacity: 0.6;
}
span.network-manipulationUI {
font-family: verdana;
font-size: 12px;
-moz-border-radius: 15px;
border-radius: 15px;
display:inline-block;
background-position: 0px 0px;
background-repeat:no-repeat;
height:24px;
margin: -14px 0px 0px 10px;
vertical-align:middle;
cursor: pointer;
padding: 0px 8px 0px 8px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
span.network-manipulationUI:hover {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
}
span.network-manipulationUI:active {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
}
span.network-manipulationUI.back {
background-image: url("img/network/backIcon.png");
}
span.network-manipulationUI.none:hover {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
cursor: default;
}
span.network-manipulationUI.none:active {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
}
span.network-manipulationUI.none {
padding: 0;
}
span.network-manipulationUI.notification{
margin: 2px;
font-weight: bold;
}
span.network-manipulationUI.add {
background-image: url("img/network/addNodeIcon.png");
}
span.network-manipulationUI.edit {
background-image: url("img/network/editIcon.png");
}
span.network-manipulationUI.edit.editmode {
background-color: #fcfcfc;
border-style:solid;
border-width:1px;
border-color: #cccccc;
}
span.network-manipulationUI.connect {
background-image: url("img/network/connectIcon.png");
}
span.network-manipulationUI.delete {
background-image: url("img/network/deleteIcon.png");
}
/* top right bottom left */
span.network-manipulationLabel {
margin: 0px 0px 0px 23px;
line-height: 25px;
}
div.network-seperatorLine {
display:inline-block;
width:1px;
height:20px;
background-color: #bdbdbd;
margin: 5px 7px 0px 15px;
}
div.network-navigation_wrapper {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
div.network-navigation {
width:34px;
height:34px;
-moz-border-radius: 17px;
border-radius: 17px;
position:absolute;
display:inline-block;
background-position: 2px 2px;
background-repeat:no-repeat;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
div.network-navigation:hover {
box-shadow: 0px 0px 3px 3px rgba(56, 207, 21, 0.30);
}
div.network-navigation:active {
box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
}
div.network-navigation.up {
background-image: url("img/network/upArrow.png");
bottom:50px;
left:55px;
}
div.network-navigation.down {
background-image: url("img/network/downArrow.png");
bottom:10px;
left:55px;
}
div.network-navigation.left {
background-image: url("img/network/leftArrow.png");
bottom:10px;
left:15px;
}
div.network-navigation.right {
background-image: url("img/network/rightArrow.png");
bottom:10px;
left:95px;
}
div.network-navigation.zoomIn {
background-image: url("img/network/plus.png");
bottom:10px;
right:15px;
}
div.network-navigation.zoomOut {
background-image: url("img/network/minus.png");
bottom:10px;
right:55px;
}
div.network-navigation.zoomExtends {
background-image: url("img/network/zoomExtends.png");
bottom:50px;
right:15px;
}

+ 0
- 34028
www2/dist/vis.js
File diff suppressed because it is too large
View File


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


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


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


+ 0
- 87
www2/docs/css/prettify.css View File

@ -1,87 +0,0 @@
.com {
color: gray;
}
.lit {
color: red;
}
.pun {
color: gray;
}
.pln {
color: #333333;
}
pre.prettyprint {
border: 1px solid lightgray;
background-color: #fcfcfc;
padding: 5px;
font-size: 10pt;
line-height: 1.5em;
font-family: monospace;
}
ol.linenums {
margin-top:0;
margin-bottom:0;
}
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 {
list-style:none;
}
li.L1,li.L3,li.L5,li.L7,li.L9 {
background:#eee;
}
.str,.atv {
color: green;
}
.kwd,.tag {
color:#2B7CE9;
}
.typ,.atn,.dec {
color: darkorange;
}
@media print {
.com {
color:#600;
font-style:italic;
}
.typ {
color:#404;
font-weight:700;
}
.lit {
color:#044;
}
.pun {
color:#440;
}
.pln {
color:#000;
}
.atn {
color:#404;
}
.str,.atv {
color:#060;
}
.kwd,.tag {
color:#006;
font-weight:700;
}
}

+ 0
- 83
www2/docs/css/style.css View File

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

+ 0
- 931
www2/docs/dataset.html View File

@ -1,931 +0,0 @@
<!doctype html>
<html>
<head>
<title>vis.js | DataSet documentation</title>
<link href="css/prettify.css" type="text/css" rel="stylesheet" />
<link href='css/style.css' type='text/css' rel='stylesheet'>
<script type="text/javascript" src="lib/prettify/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<div id="container">
<h1>DataSet documentation</h1>
<h2 id="Contents">Contents</h2>
<ul>
<li><a href="#Overview">Overview</a></li>
<li><a href="#Example">Example</a></li>
<li><a href="#Construction">Construction</a></li>
<li><a href="#Methods">Methods</a></li>
<li><a href="#Subscriptions">Subscriptions</a></li>
<li><a href="#Data_Manipulation">Data Manipulation</a></li>
<li><a href="#Data_Selection">Data Selection</a></li>
<li><a href="#Data_Policy">Data Policy</a></li>
</ul>
<h2 id="Overview">Overview</h2>
<p>
Vis.js comes with a flexible DataSet, which can be used to hold and
manipulate unstructured data and listen for changes in the data.
The DataSet is key/value based. Data items can be added, updated and
removed from the DatSet, and one can subscribe to changes in the DataSet.
The data in the DataSet can be filtered and ordered, and fields (like
dates) can be converted to a specific type. Data can be normalized when
appending it to the DataSet as well.
</p>
<h2 id="Example">Example</h2>
<p>
The following example shows how to use a DataSet.
</p>
<pre class="prettyprint lang-js">
// create a DataSet
var options = {};
var data = new vis.DataSet(options);
// add items
// note that the data items can contain different properties and data formats
data.add([
{id: 1, text: 'item 1', date: new Date(2013, 6, 20), group: 1, first: true},
{id: 2, text: 'item 2', date: '2013-06-23', group: 2},
{id: 3, text: 'item 3', date: '2013-06-25', group: 2},
{id: 4, text: 'item 4'}
]);
// subscribe to any change in the DataSet
data.on('*', function (event, properties, senderId) {
console.log('event', event, properties);
});
// update an existing item
data.update({id: 2, group: 1});
// remove an item
data.remove(4);
// get all ids
var ids = data.getIds();
console.log('ids', ids);
// get a specific item
var item1 = data.get(1);
console.log('item1', item1);
// retrieve a filtered subset of the data
var items = data.get({
filter: function (item) {
return item.group == 1;
}
});
console.log('filtered items', items);
// retrieve formatted items
var items = data.get({
fields: ['id', 'date'],
type: {
date: 'ISODate'
}
});
console.log('formatted items', items);
</pre>
<h2 id="Construction">Construction</h2>
<p>
A DataSet can be constructed as:
</p>
<pre class="prettyprint lang-js">
var data = new vis.DataSet([data] [, options])
</pre>
<p>
After construction, data can be added to the DataSet using the methods
<code>add</code> and <code>update</code>, as described in section
<a href="#Data_Manipulation">Data Manipulation</a>.
</p>
<p>
The parameter <code>data</code> is optional and can be an Array or
<a href="https://developers.google.com/chart/interactive/docs/reference#DataTable" target="_blank">Google DataTable</a> with items.
</p>
<p>
The parameter <code>options</code> is optional and is an object which can
contain the following properties:
</p>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default value</th>
<th>Description</th>
</tr>
<tr>
<td>fieldId</td>
<td>String</td>
<td>"id"</td>
<td>
The name of the field containing the id of the items.
When data is fetched from a server which uses some specific
field to identify items, this field name can be specified
in the DataSet using the option <code>fieldId</code>.
For example <a href="http://couchdb.apache.org/"
target="_blank">CouchDB</a> uses the field
<code>"_id"</code> to identify documents.
</td>
</tr>
<tr>
<td>type</td>
<td>Object.&lt;String,&nbsp;String&gt;</td>
<td>none</td>
<td>
An object containing field names as key, and data types as
value. By default, the type of the properties of items are left
unchanged. Item properties can be normalized by specifying a
field type. This is useful for example to automatically convert
stringified dates coming from a server into JavaScript Date
objects. The available data types are listed in section
<a href="#Data_Types">Data Types</a>.
</td>
</tr>
<tr>
<td>queue</td>
<td>Object | boolean</td>
<td>none</td>
<td>
Queue data changes ('add', 'update', 'remove') and flush them at once.
The queue can be flushed manually by calling
<code>DataSet.flush()</code>, or can be flushed after a configured delay
or maximum number of entries.
<br>
<br>
When <code>queue</code> is true, a queue is created
with default options. Options can be specified by providing an object:
<ul>
<li><code>delay: number</code><br>
The queue will be flushed automatically after an inactivity of this
delay in milliseconds. Default value is <code>null</code>.
<li><code>max: number</code><br>
When the queue exceeds the given maximum number
of entries, the queue is flushed automatically.
Default value is <code>Infinity</code>.
</li>
</ul>
</td>
</tr>
</table>
<h2 id="Methods">Methods</h2>
<p>DataSet contains the following methods.</p>
<table>
<colgroup>
<col width="200">
</colgroup>
<tr>
<th>Method</th>
<th>Return Type</th>
<th>Description</th>
</tr>
<tr>
<td>add(data [, senderId])</td>
<td>Number[]</td>
<td>Add one or multiple items to the DataSet. <code>data</code> can be a single item or an array with items. Adding an item will fail when there already is an item with the same id. The function returns an array with the ids of the added items. See section <a href="#Data_Manipulation">Data Manipulation</a>.</td>
</tr>
<tr>
<td>clear([senderId])</td>
<td>Number[]</td>
<td>Clear all data from the DataSet. The function returns an array with the ids of the removed items.</td>
</tr>
<tr>
<td>distinct(field)</td>
<td>Array</td>
<td>Find all distinct values of a specified field. Returns an unordered array containing all distinct values. If data items do not contain the specified field are ignored.</td>
</tr>
<tr>
<td>flush()</td>
<td>none</td>
<td>Flush queued changes. Only available when the DataSet is configured with the option <code>queue</code>, see section <a href="#Construction">Construction</a>.</td>
</tr>
<tr>
<td>forEach(callback [, options])</td>
<td>none</td>
<td>
Execute a callback function for every item in the dataset.
The available options are described in section <a href="#Data_Selection">Data Selection</a>.
</td>
</tr>
<tr>
<td>
get([options] [, data])<br>
get(id [,options] [, data])<br>
get(ids [, options] [, data])
</td>
<td>Object | Array | DataTable</td>
<td>
Get a single item, multiple items, or all items from the DataSet.
Usage examples can be found in section <a href="#Getting_Data">Getting Data</a>, and the available <code>options</code> are described in section <a href="#Data_Selection">Data Selection</a>. If parameter <code>data</code> is provided, items will be appended to this array or table, which is required in case of Google DataTable.
</td>
</tr>
<tr>
<td>
getDataSet()
</td>
<td>DataSet</td>
<td>
Get the DataSet itself. In case of a DataView, this function does not
return the DataSet to which the DataView is connected.
</td>
</tr>
<tr>
<td>
getIds([options])
</td>
<td>Number[]</td>
<td>
Get ids of all items or of a filtered set of items.
Available <code>options</code> are described in section <a href="#Data_Selection">Data Selection</a>, except that options <code>fields</code> and <code>type</code> are not applicable in case of <code>getIds</code>.
</td>
</tr>
<tr>
<td>map(callback [, options])</td>
<td>Array</td>
<td>
Map every item in the DataSet.
The available options are described in section <a href="#Data_Selection">Data Selection</a>.
</td>
</tr>
<tr>
<td>max(field)</td>
<td>Object | null</td>
<td>
Find the item with maximum value of specified field. Returns <code>null</code> if no item is found.
</td>
</tr>
<tr>
<td>min(field)</td>
<td>Object | null</td>
<td>
Find the item with minimum value of specified field. Returns <code>null</code> if no item is found.
</td>
</tr>
<tr>
<td>off(event, callback)</td>
<td>none</td>
<td>
Unsubscribe from an event, remove an event listener. See section <a href="#Subscriptions">Subscriptions</a>.
</td>
</tr>
<tr>
<td>on(event, callback)</td>
<td>none</td>
<td>
Subscribe to an event, add an event listener. See section <a href="#Subscriptions">Subscriptions</a>.
</td>
</tr>
<tr>
<td>
remove(id [, senderId])<br>
remove(ids [, senderId])
</td>
<td>Number[]</td>
<td>
Remove one or multiple items by id or by the items themselves. Returns an array with the ids of the removed items. See section <a href="#Data_Manipulation">Data Manipulation</a>.
</td>
</tr>
<tr>
<td>
setOptions(options)
</td>
<td>none</td>
<td>
Set options for the DataSet. Available options:
<ul>
<li>
<code>queue</code><br>
Queue data changes ('add', 'update', 'remove') and flush them at once.
The queue can be flushed manually by calling
<code>DataSet.flush()</code>, or can be flushed after a configured delay
or maximum number of entries.
<br>
<br>
When <code>queue</code> is true, a queue is created with default options.
When <code>queue</code> is false, an existing queue will be flushed and removed.
Options can be specified by providing an object:
<ul>
<li><code>delay: number</code><br>
The queue will be flushed automatically after an inactivity of this
delay in milliseconds. Default value is <code>null</code>.
<li><code>max: number</code><br>
When the queue exceeds the given maximum number
of entries, the queue is flushed automatically.
Default value is <code>Infinity</code>.
</li>
</ul>
</li>
</ul>
</td>
</tr>
<tr>
<td>
update(data [, senderId])
</td>
<td>Number[]</td>
<td>
Update on ore multiple existing items. <code>data</code> can be a single item or an array with items. When an item doesn't exist, it will be created. Returns an array with the ids of the removed items. See section <a href="#Data_Manipulation">Data Manipulation</a>.
</td>
</tr>
</table>
<h2 id="Subscriptions">Subscriptions</h2>
<p>
One can subscribe on changes in a DataSet.
A subscription can be created using the method <code>on</code>,
and removed with <code>off</code>.
</p>
<pre class="prettyprint lang-js">
// create a DataSet
var data = new vis.DataSet();
// subscribe to any change in the DataSet
data.on('*', function (event, properties, senderId) {
console.log('event:', event, 'properties:', properties, 'senderId:', senderId);
});
// add an item
data.add({id: 1, text: 'item 1'}); // triggers an 'add' event
data.update({id: 1, text: 'item 1 (updated)'}); // triggers an 'update' event
data.remove(1); // triggers an 'remove' event
</pre>
<h3 id="On">On</h3>
<p>
Subscribe to an event.
</p>
Syntax:
<pre class="prettyprint lang-js">DataSet.on(event, callback)</pre>
Where:
<ul>
<li>
<code>event</code> is a String containing any of the events listed
in section <a href="#Events">Events</a>.
</li>
<li>
<code>callback</code> is a callback function which will be called
each time the event occurs. The callback function is described in
section <a href="#Callback">Callback</a>.
</li>
</ul>
<h3 id="Off">Off</h3>
<p>
Unsubscribe from an event.
</p>
Syntax:
<pre class="prettyprint lang-js">DataSet.off(event, callback)</pre>
Where <code>event</code> and <code>callback</code> correspond with the
parameters used to <a href="#On">subscribe</a> to the event.
<h3 id="Events">Events</h3>
<p>
The following events are available for subscription:
</p>
<table>
<tr>
<th>Event</th>
<th>Description</th>
</tr>
<tr>
<td>add</td>
<td>
The <code>add</code> event is triggered when an item
or a set of items is added, or when an item is updated while
not yet existing.
</td>
</tr>
<tr>
<td>update</td>
<td>
The <code>update</code> event is triggered when an existing item
or a set of existing items is updated.
</td>
</tr>
<tr>
<td>remove</td>
<td>
The <code>remove</code> event is triggered when an item
or a set of items is removed.
</td>
</tr>
<tr>
<td>*</td>
<td>
The <code>*</code> event is triggered when any of the events
<code>add</code>, <code>update</code>, and <code>remove</code>
occurs.
</td>
</tr>
</table>
<h3 id="Callback">Callback</h3>
<p>
The callback functions of subscribers are called with the following
parameters:
</p>
<pre class="prettyprint lang-js">
function (event, properties, senderId) {
// handle the event
});
</pre>
<p>
where the parameters are defined as
</p>
<table>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td>event</td>
<td>String</td>
<td>
Any of the available events: <code>add</code>,
<code>update</code>, or <code>remove</code>.
</td>
</tr>
<tr>
<td>properties</td>
<td>Object&nbsp;|&nbsp;null</td>
<td>
Optional properties providing more information on the event.
In case of the events <code>add</code>,
<code>update</code>, and <code>remove</code>,
<code>properties</code> is always an object containing a property
<code>items</code>, which contains an array with the ids of the affected
items. The <code>update</code> event has an extra field <code>data</code>
containing the original data of the updated items, i.e. the gives the
changed fields of the changed items.
</td>
</tr>
<tr>
<td>senderId</td>
<td>String&nbsp;|&nbsp;Number</td>
<td>
An senderId, optionally provided by the application code
which triggered the event. If senderId is not provided, the
argument will be <code>null</code>.
</td>
</tr>
</table>
<h2 id="Data_Manipulation">Data Manipulation</h2>
<p>
The data in a DataSet can be manipulated using the methods
<a href="#Add"><code>add</code></a>,
<a href="#Update"><code>update</code></a>,
and <a href="#Remove"><code>remove</code></a>.
The DataSet can be emptied using the method
<a href="#Clear"><code>clear</code></a>.
</p>
<pre class="prettyprint lang-js">
// create a DataSet
var data = new vis.DataSet();
// add items
data.add([
{id: 1, text: 'item 1'},
{id: 2, text: 'item 2'},
{id: 3, text: 'item 3'}
]);
// update an item
data.update({id: 2, text: 'item 2 (updated)'});
// remove an item
data.remove(3);
</pre>
<h3 id="Add">Add</h3>
<p>
Add a data item or an array with items.
</p>
Syntax:
<pre class="prettyprint lang-js">var addedIds = DataSet.add(data [, senderId])</pre>
The argument <code>data</code> can contain:
<ul>
<li>
An <code>Object</code> containing a single item to be
added. The item must contain an id.
</li>
<li>
An <code>Array</code> or
<code>google.visualization.DataTable</code> containing
a list with items to be added. Each item must contain
an id.
</li>
</ul>
<p>
After the items are added to the DataSet, the DataSet will
trigger an event <code>add</code>. When a <code>senderId</code>
is provided, this id will be passed with the triggered
event to all subscribers.
</p>
<p>
The method will throw an Error when an item with the same id
as any of the added items already exists.
</p>
<h3 id="Update">Update</h3>
<p>
Update a data item or an array with items.
</p>
Syntax:
<pre class="prettyprint lang-js">var updatedIds = DataSet.update(data [, senderId])</pre>
The argument <code>data</code> can contain:
<ul>
<li>
An <code>Object</code> containing a single item to be
updated. The item must contain an id.
</li>
<li>
An <code>Array</code> or
<code>google.visualization.DataTable</code> containing
a list with items to be updated. Each item must contain
an id.
</li>
</ul>
<p>
The provided properties will be merged in the existing item.
When an item does not exist, it will be created.
</p>
<p>
After the items are updated, the DataSet will
trigger an event <code>add</code> for the added items, and
an event <code>update</code>. When a <code>senderId</code>
is provided, this id will be passed with the triggered
event to all subscribers.
</p>
<h3 id="Remove">Remove</h3>
<p>
Remove a data item or an array with items.
</p>
Syntax:
<pre class="prettyprint lang-js">var removedIds = DataSet.remove(id [, senderId])</pre>
<p>
The argument <code>id</code> can be:
</p>
<ul>
<li>
A <code>Number</code> or <code>String</code> containing the id
of a single item to be removed.
</li>
<li>
An <code>Object</code> containing the item to be deleted.
The item will be deleted by its id.
</li>
<li>
An Array containing ids or items to be removed.
</li>
</ul>
<p>
The method ignores removal of non-existing items, and returns an array
containing the ids of the items which are actually removed from the
DataSet.
</p>
<p>
After the items are removed, the DataSet will
trigger an event <code>remove</code> for the removed items.
When a <code>senderId</code> is provided, this id will be passed with
the triggered event to all subscribers.
</p>
<h3 id="Clear">Clear</h3>
<p>
Clear the complete DataSet.
</p>
Syntax:
<pre class="prettyprint lang-js">var removedIds = DataSet.clear([senderId])</pre>
<p>
After the items are removed, the DataSet will
trigger an event <code>remove</code> for all removed items.
When a <code>senderId</code> is provided, this id will be passed with
the triggered event to all subscribers.
</p>
<h2 id="Data_Selection">Data Selection</h2>
<p>
The DataSet contains functionality to format, filter, and sort data retrieved via the
methods <code>get</code>, <code>getIds</code>, <code>forEach</code>, and <code>map</code>. These methods have the following syntax:
</p>
<pre class="prettyprint lang-js">
DataSet.get([id] [, options] [, data]);
DataSet.getIds([options]);
DataSet.forEach(callback [, options]);
DataSet.map(callback [, options]);
</pre>
<p>
Where <code>options</code> is an Object which can have the following
properties:
</p>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td>fields</td>
<td>String[&nbsp;]</td>
<td>
An array with field names.
By default, all properties of the items are emitted.
When <code>fields</code> is defined, only the properties
whose name is specified in <code>fields</code> will be included
in the returned items.
</td>
</tr>
<tr>
<td>type</td>
<td>Object.&lt;String,&nbsp;String&gt;</td>
<td>
An object containing field names as key, and data types as value.
By default, the type of the properties of an item are left
unchanged. When a field type is specified, this field in the
items will be converted to the specified type. This can be used
for example to convert ISO strings containing a date to a
JavaScript Date object, or convert strings to numbers or vice
versa. The available data types are listed in section
<a href="#Data_Types">Data Types</a>.
</td>
</tr>
<tr>
<td>filter</td>
<td>Function</td>
<td>Items can be filtered on specific properties by providing a filter
function. A filter function is executed for each of the items in the
DataSet, and is called with the item as parameter. The function must
return a boolean. All items for which the filter function returns
true will be emitted.
See section <a href="#Data_Filtering">Data Filtering</a>.</td>
</tr>
<tr>
<td>order</td>
<td>String | Function</td>
<td>Order the items by a field name or custom sort function.</td>
</tr>
<tr>
<td>returnType</td>
<td>String</td>
<td>Determine the type of output of the get function. Allowed values are <code>Array | Object | DataTable</code>.
The <code>DataTable</code> refers to a Google DataTable. The default returnType is an array. The object type will return a JSON object with the ID's as keys.</td>
</tr>
</table>
<p>
The following example demonstrates formatting properties and filtering
properties from items.
</p>
<pre class="prettyprint lang-js">
// create a DataSet
var data = new vis.DataSet();
data.add([
{id: 1, text: 'item 1', date: '2013-06-20', group: 1, first: true},
{id: 2, text: 'item 2', date: '2013-06-23', group: 2},
{id: 3, text: 'item 3', date: '2013-06-25', group: 2},
{id: 4, text: 'item 4'}
]);
// retrieve formatted items
var items = data.get({
fields: ['id', 'date', 'group'], // output the specified fields only
type: {
date: 'Date', // convert the date fields to Date objects
group: 'String' // convert the group fields to Strings
}
});
</pre>
<h3 id="Getting_Data">Getting Data</h3>
<p>
Data can be retrieved from the DataSet using the method <code>get</code>.
This method can return a single item or a list with items.
</p>
<p>A single item can be retrieved by its id:</p>
<pre class="prettyprint lang-js">
var item1 = dataset.get(1);
</pre>
<p>A selection of items can be retrieved by providing an array with ids:</p>
<pre class="prettyprint lang-js">
var items = dataset.get([1, 3, 4]); // retrieve items 1, 3, and 4
</pre>
<p>All items can be retrieved by simply calling <code>get</code> without
specifying an id:</p>
<pre class="prettyprint lang-js">
var items = dataset.get(); // retrieve all items
</pre>
<h3 id="Data_Filtering">Data Filtering</h3>
<p>
Items can be filtered on specific properties by providing a filter
function. A filter function is executed for each of the items in the
DataSet, and is called with the item as parameter. The function must
return a boolean. All items for which the filter function returns
true will be emitted.
</p>
<pre class="prettyprint lang-js">
// retrieve all items having a property group with value 2
var group2 = dataset.get({
filter: function (item) {
return (item.group == 2);
}
});
// retrieve all items having a property balance with a value above zero
var positiveBalance = dataset.get({
filter: function (item) {
return (item.balance > 0);
}
});
</pre>
<h3 id="Data_Types">Data Types</h3>
<p>
DataSet supports the following data types:
</p>
<table style="width: 100%">
<tr>
<th>Name</th>
<th>Description</th>
<th>Examples</th>
</tr>
<tr>
<td>Boolean</td>
<td>A JavaScript Boolean</td>
<td>
<code>true</code><br>
<code>false</code>
</td>
</tr>
<tr>
<td>Number</td>
<td>A JavaScript Number</td>
<td>
<code>32</code><br>
<code>2.4</code>
</td>
</tr>
<tr>
<td>String</td>
<td>A JavaScript String</td>
<td>
<code>"hello world"</code><br>
<code>"2013-06-28"</code>
</td>
</tr>
<tr>
<td>Date</td>
<td>A JavaScript Date object</td>
<td>
<code>new Date()</code><br>
<code>new Date(2013, 5, 28)</code><br>
<code>new Date(1372370400000)</code>
</td>
</tr>
<tr>
<td>Moment</td>
<td>A Moment object, created with
<a href="http://momentjs.com/" target="_blank">moment.js</a></td>
<td>
<code>moment()</code><br>
<code>moment('2013-06-28')</code>
</td>
</tr>
<tr>
<td>ISODate</td>
<td>A string containing an ISO Date</td>
<td>
<code>new Date().toISOString()</code><br>
<code>"2013-06-27T22:00:00.000Z"</code>
</td>
</tr>
<tr>
<td>ASPDate</td>
<td>A string containing an ASP Date</td>
<td>
<code>"/Date(1372370400000)/"</code><br>
<code>"/Date(1198908717056-0700)/"</code>
</td>
</tr>
</table>
<h2 id="Data_Policy">Data Policy</h2>
<p>
All code and data is processed and rendered in the browser.
No data is sent to any server.
</p>
</div>
</body>
</html>

+ 0
- 219
www2/docs/dataview.html View File

@ -1,219 +0,0 @@
<!doctype html>
<html>
<head>
<title>vis.js | DataView documentation</title>
<link href="css/prettify.css" type="text/css" rel="stylesheet" />
<link href='css/style.css' type='text/css' rel='stylesheet'>
<script type="text/javascript" src="lib/prettify/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<div id="container">
<h1>DataView documentation</h1>
<h2 id="Contents">Contents</h2>
<ul>
<li><a href="#Overview">Overview</a></li>
<li><a href="#Example">Example</a></li>
<li><a href="#Construction">Construction</a></li>
<li><a href="#Getting_Data">Getting Data</a></li>
<li><a href="#Subscriptions">Subscriptions</a></li>
<li><a href="#Data_Policy">Data Policy</a></li>
</ul>
<h2 id="Overview">Overview</h2>
<p>
A DataView offers a filtered and/or formatted view on a
<a href="dataset.html">DataSet</a>.
One can subscribe on changes in a DataView, and easily get filtered or
formatted data without having to specify filters and field types all
the time.
</p>
<h2 id="Example">Example</h2>
<p>
The following example shows how to use a DataView.
</p>
<pre class="prettyprint lang-js">
// create a DataSet
var data = new vis.DataSet();
data.add([
{id: 1, text: 'item 1', date: new Date(2013, 6, 20), group: 1, first: true},
{id: 2, text: 'item 2', date: '2013-06-23', group: 2},
{id: 3, text: 'item 3', date: '2013-06-25', group: 2},
{id: 4, text: 'item 4'}
]);
// create a DataView
// the view will only contain items having a property group with value 1,
// and will only output fields id, text, and date.
var view = new vis.DataView(data, {
filter: function (item) {
return (item.group == 1);
},
fields: ['id', 'text', 'date']
});
// subscribe to any change in the DataView
view.on('*', function (event, properties, senderId) {
console.log('event', event, properties);
});
// update an item in the data set
data.update({id: 2, group: 1});
// get all ids in the view
var ids = view.getIds();
console.log('ids', ids); // will output [1, 2]
// get all items in the view
var items = view.get();
</pre>
<h2 id="Construction">Construction</h2>
<p>
A DataView can be constructed as:
</p>
<pre class="prettyprint lang-js">
var data = new vis.DataView(dataset, options)
</pre>
<p>
where:
</p>
<ul>
<li>
<code>dataset</code> is a DataSet or DataView.
</li>
<li>
<code>options</code> is an object which can
contain the following properties. Note that these properties
are exactly the same as the properties available in methods
<code>DataSet.get</code> and <code>DataView.get</code>.
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td>convert</td>
<td>Object.&lt;String,&nbsp;String&gt;</td>
<td>
An object containing field names as key, and data types as value.
By default, the type of the properties of an item are left
unchanged. When a field type is specified, this field in the
items will be converted to the specified type. This can be used
for example to convert ISO strings containing a date to a
JavaScript Date object, or convert strings to numbers or vice
versa. The available data types are listed in section
<a href="dataset.html#Data_Types">Data Types</a>.
</td>
</tr>
<tr>
<td>fields</td>
<td>String[&nbsp;]</td>
<td>
An array with field names.
By default, all properties of the items are emitted.
When <code>fields</code> is defined, only the properties
whose name is specified in <code>fields</code> will be included
in the returned items.
</td>
</tr>
<tr>
<td>filter</td>
<td>function</td>
<td>Items can be filtered on specific properties by providing a filter
function. A filter function is executed for each of the items in the
DataSet, and is called with the item as parameter. The function must
return a boolean. All items for which the filter function returns
true will be emitted.
See also section <a href="dataset.html#Data_Filtering">Data Filtering</a>.</td>
</tr>
</table>
</li>
</ul>
<h2 id="Getting_Data">Getting Data</h2>
<p>
Data of the DataView can be retrieved using the method <code>get</code>.
</p>
<pre class="prettyprint lang-js">
var items = view.get();
</pre>
<p>
Data of a DataView can be filtered and formatted again, in exactly the
same way as in a DataSet. See sections
<a href="dataset.html#Data_Filtering">Data Filtering</a> and
<a href="dataset.html#Data_Formatting">Data Formatting</a> for more
information.
</p>
<pre class="prettyprint lang-js">
var items = view.get({
fields: ['id', 'score'],
filter: function (item) {
return (item.score > 50);
}
});
</pre>
<h2 id="Subscriptions">Subscriptions</h2>
<p>
One can subscribe on changes in the DataView. Subscription works exactly
the same as for DataSets. See the documentation on
<a href="dataset.html#Subscriptions">subscriptions in a DataSet</a>
for more information.
</p>
<pre class="prettyprint lang-js">
// create a DataSet and a view on the data set
var data = new vis.DataSet();
var view = new vis.DataView({
filter: function (item) {
return (item.group == 2);
}
});
// subscribe to any change in the DataView
view.on('*', function (event, properties, senderId) {
console.log('event:', event, 'properties:', properties, 'senderId:', senderId);
});
// add, update, and remove data in the DataSet...
</pre>
<h2 id="Data_Policy">Data Policy</h2>
<p>
All code and data is processed and rendered in the browser.
No data is sent to any server.
</p>
</div>
</body>
</html>

+ 0
- 1115
www2/docs/graph2d.html
File diff suppressed because it is too large
View File


+ 0
- 673
www2/docs/graph3d.html View File

@ -1,673 +0,0 @@
<html>
<head>
<title>vis.js | graph3d documentation</title>
<link href='css/prettify.css' type='text/css' rel='stylesheet'>
<link href='css/style.css' type='text/css' rel='stylesheet'>
<script type="text/javascript" src="lib/prettify/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<div id="container">
<h1>Graph3d documentation</h1>
<h2 id="Overview">Overview</h2>
<p>
Graph3d is an interactive visualization chart to draw data in a three dimensional
graph. You can freely move and zoom in the graph by dragging and scrolling in the
window. Graph3d also supports animation of a graph.
</p>
<p>
Graph3d uses <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Canvas">HTML canvas</a>
to render graphs, and can render up to a few thousands of data points smoothly.
</p>
<h2 id="Contents">Contents</h2>
<ul>
<li><a href="#Overview">Overview</a></li>
<li><a href="#Loading">Loading</a></li>
<li><a href="#Data_Format">Data Format</a></li>
<li><a href="#Configuration_Options">Configuration Options</a></li>
<li><a href="#Methods">Methods</a></li>
<li><a href="#Events">Events</a></li>
<li><a href="#Data_Policy">Data Policy</a></li>
</ul>
<h2 id="Example">Example</h2>
<p>
The following code shows how to create a Graph3d and provide it with data.
More examples can be found in the <a href="../examples">examples</a> directory.
</p>
<pre class="prettyprint lang-html">
&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Graph 3D demo&lt;/title&gt;
&lt;style&gt;
body {font: 10pt arial;}
&lt;/style&gt;
&lt;script type="text/javascript" src="../../dist/vis.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
var data = null;
var graph = null;
function custom(x, y) {
return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
}
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
var data = new vis.DataSet();
// create some nice looking data with sin/cos
var steps = 50; // number of datapoints will be steps*steps
var axisMax = 314;
var axisStep = axisMax / steps;
for (var x = 0; x &lt; axisMax; x+=axisStep) {
for (var y = 0; y &lt; axisMax; y+=axisStep) {
var value = custom(x, y);
data.add({
x: x,
y: y,
z: value,
style: value
});
}
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'surface',
showPerspective: true,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5
};
// create a graph3d
var container = document.getElementById('mygraph');
graph3d = new vis.Graph3d(container, data, options);
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="drawVisualization();"&gt;
&lt;div id="mygraph"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<h2 id="Loading">Loading</h2>
<p>
The class name of the Graph3d is <code>vis.Graph3d</code>.
When constructing a Graph3d, an HTML DOM container must be provided to attach
the graph to. Optionally, data an options can be provided.
Data is a vis <code>DataSet</code> or an <code>Array</code>, described in
section <a href="#Data_Format">Data Format</a>.
Options is a name-value map in the JSON format. The available options
are described in section <a href="#Configuration_Options">Configuration Options</a>.
</p>
<pre class="prettyprint lang-js">var graph = new vis.Graph3d(container [, data] [, options]);</pre>
<p>
Data and options can be set or changed later on using the functions
<code>Graph3d.setData(data)</code> and <code>Graph3d.setOptions(options)</code>.
</p>
<h2 id="Data_Format">Data Format</h2>
<p>
Graph3d can load data from an <code>Array</code>, a <code>DataSet</code> or a <code>DataView</code>.
JSON objects are added to this DataSet by using the <code>add()</code> function.
Data points must have properties <code>x</code>, <code>y</code>, and <code>z</code>,
and can optionally have a property <code>style</code> and <code>filter</code>.
<h3>Definition</h3>
<p>
The DataSet JSON objects are defined as:
</p>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
<tr>
<td>x</td>
<td>number</td>
<td>yes</td>
<td>Location on the x-axis.</td>
</tr>
<tr>
<td>y</td>
<td>number</td>
<td>yes</td>
<td>Location on the y-axis.</td>
</tr>
<tr>
<td>z</td>
<td>number</td>
<td>yes</td>
<td>Location on the z-axis.</td>
</tr>
<tr>
<td>style</td>
<td>number</td>
<td>no</td>
<td>The data value, required for graph styles <code>dot-color</code> and
<code>dot-size</code>.
</td>
</tr>
<tr>
<td>filter</td>
<td>*</td>
<td>no</td>
<td>Filter values used for the animation.
This column may have any type, such as a number, string, or Date.</td>
</tr>
</table>
<h2 id="Configuration_Options">Configuration Options</h2>
<p>
Options can be used to customize the graph. Options are defined as a JSON object.
All options are optional.
</p>
<pre class="prettyprint lang-js">
var options = {
width: '100%',
height: '400px',
style: 'surface'
};
</pre>
<p>
The following options are available.
</p>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>animationInterval</td>
<td>number</td>
<td>1000</td>
<td>The animation interval in milliseconds. This determines how fast
the animation runs.</td>
</tr>
<tr>
<td>animationPreload</td>
<td>boolean</td>
<td>false</td>
<td>If false, the animation frames are loaded as soon as they are requested.
if <code>animationPreload</code> is true, the graph will automatically load
all frames in the background, resulting in a smoother animation as soon as
all frames are loaded. The load progress is shown on screen.</td>
</tr>
<tr>
<td>animationAutoStart</td>
<td>boolean</td>
<td>false</td>
<td>If true, the animation starts playing automatically after the graph
is created.</td>
</tr>
<tr>
<td>backgroundColor</td>
<td>string or Object</td>
<td>'white'</td>
<td>The background color for the main area of the chart.
Can be either a simple HTML color string, for example: 'red' or '#00cc00',
or an object with the following properties.</td>
</tr>
<tr>
<td>backgroundColor.stroke</td>
<td>string</td>
<td>'gray'</td>
<td>The color of the chart border, as an HTML color string.</td>
</tr>
<tr>
<td>backgroundColor.strokeWidth</td>
<td>number</td>
<td>1</td>
<td>The border width, in pixels.</td>
</tr>
<tr>
<td>backgroundColor.fill</td>
<td>string</td>
<td>'white'</td>
<td>The chart fill color, as an HTML color string.</td>
</tr>
<tr>
<td>cameraPosition</td>
<td>Object</td>
<td>{horizontal:&nbsp;1.0, vertical:&nbsp;0.5, distance:&nbsp;1.7}</td>
<td>Set the initial rotation and position of the camera.
The object <code>cameraPosition</code> contains three parameters:
<code>horizontal</code>, <code>vertical</code>, and <code>distance</code>.
Parameter <code>horizontal</code> is a value in radians and can have any
value (but normally in the range of 0 and 2*Pi).
Parameter <code>vertical</code> is a value in radians between 0 and 0.5*Pi.
Parameter <code>distance</code> is the (normalized) distance from the
camera to the center of the graph, in the range of 0.71 to 5.0. A
larger distance puts the graph further away, making it smaller.
All parameters are optional.
</tr>
<tr>
<td>height</td>
<td>string</td>
<td>'400px'</td>
<td>The height of the graph in pixels or as a percentage.</td>
</tr>
<tr>
<td>keepAspectRatio</td>
<td>boolean</td>
<td>true</td>
<td>If <code>keepAspectRatio</code> is true, the x-axis and the y-axis
keep their aspect ratio. If false, the axes are scaled such that they
both have the same, maximum with.</td>
</tr>
<tr>
<td>showAnimationControls</td>
<td>boolean</td>
<td>true</td>
<td>If true, animation controls are created at the bottom of the Graph.
The animation controls consists of buttons previous, start/stop, next,
and a slider showing the current frame.
Only applicable when the provided data contains an animation.</td>
</tr>
<tr>
<td>showGrid</td>
<td>boolean</td>
<td>true</td>
<td>If true, grid lines are draw in the x-y surface (the bottom of the 3d
graph).</td>
</tr>
<tr>
<td>showPerspective</td>
<td>boolean</td>
<td>true</td>
<td>If true, the graph is drawn in perspective: points and lines which
are further away are drawn smaller.
Note that the graph currently does not support a gray colored bottom side
when drawn in perspective.
</td>
</tr>
<tr>
<td>showShadow</td>
<td>boolean</td>
<td>false</td>
<td>Show shadow on the graph.</td>
</tr>
<tr>
<td>style</td>
<td>string</td>
<td>'dot'</td>
<td>The style of the 3d graph. Available styles:
<code>bar</code>,
<code>bar-color</code>,
<code>bar-size</code>,
<code>dot</code>,
<code>dot-line</code>,
<code>dot-color</code>,
<code>dot-size</code>,
<code>line</code>,
<code>grid</code>,
or <code>surface</code></td>
</tr>
<tr>
<td>tooltip</td>
<td>boolean | function</td>
<td>false</td>
<td>Show a tooltip showing the values of the hovered data point.
The contents of the tooltip can be customized by providing a callback
function as <code>tooltip</code>. In this case the function is called
with an object containing parameters <code>x</code>,
<code>y</code>, and <code>z</code> argument,
and must return a string which may contain HTML.
</td>
</tr>
<tr>
<td>valueMax</td>
<td>number</td>
<td>none</td>
<td>The maximum value for the value-axis. Only available in combination
with the styles <code>dot-color</code> and <code>dot-size</code>.</td>
</tr>
<tr>
<td>valueMin</td>
<td>number</td>
<td>none</td>
<td>The minimum value for the value-axis. Only available in combination
with the styles <code>dot-color</code> and <code>dot-size</code>.</td>
</tr>
<tr>
<td>verticalRatio</td>
<td>number</td>
<td>0.5</td>
<td>A value between 0.1 and 1.0. This scales the vertical size of the graph
When keepAspectRatio is set to false, and verticalRatio is set to 1.0,
the graph will be a cube.</td>
</tr>
<tr>
<td>width</td>
<td>string</td>
<td>'400px'</td>
<td>The width of the graph in pixels or as a percentage.</td>
</tr>
<tr>
<td>xBarWidth</td>
<td>number</td>
<td>none</td>
<td>The width of bars in x direction. By default, the width is equal to the distance
between the data points, such that bars adjoin each other.
Only applicable for styles <code>'bar'</code> and <code>'bar-color'</code>.</td>
</tr>
<tr>
<td>xCenter</td>
<td>string</td>
<td>'55%'</td>
<td>The horizontal center position of the graph, as a percentage or in
pixels.</td>
</tr>
<tr>
<td>xMax</td>
<td>number</td>
<td>none</td>
<td>The maximum value for the x-axis.</td>
</tr>
<tr>
<td>xMin</td>
<td>number</td>
<td>none</td>
<td>The minimum value for the x-axis.</td>
</tr>
<tr>
<td>xStep</td>
<td>number</td>
<td>none</td>
<td>Step size for the grid on the x-axis.</td>
</tr>
<tr>
<td>xValueLabel</td>
<td>function</td>
<td>none</td>
<td>A function for custom formatting of the labels along the x-axis,
for example <code>function (x) {return (x * 100) + '%'}</code>.
</td>
</tr>
<tr>
<td>yBarWidth</td>
<td>number</td>
<td>none</td>
<td>The width of bars in y direction. By default, the width is equal to the distance
between the data points, such that bars adjoin each other.
Only applicable for styles <code>'bar'</code> and <code>'bar-color'</code>.</td>
</tr>
<tr>
<td>yCenter</td>
<td>string</td>
<td>'45%'</td>
<td>The vertical center position of the graph, as a percentage or in
pixels.</td>
</tr>
<tr>
<td>yMax</td>
<td>number</td>
<td>none</td>
<td>The maximum value for the y-axis.</td>
</tr>
<tr>
<td>yMin</td>
<td>number</td>
<td>none</td>
<td>The minimum value for the y-axis.</td>
</tr>
<tr>
<td>yStep</td>
<td>number</td>
<td>none</td>
<td>Step size for the grid on the y-axis.</td>
</tr>
<tr>
<td>yValueLabel</td>
<td>function</td>
<td>none</td>
<td>A function for custom formatting of the labels along the y-axis,
for example <code>function (y) {return (y * 100) + '%'}</code>.
</td>
</tr>
<tr>
<td>zMin</td>
<td>number</td>
<td>none</td>
<td>The minimum value for the z-axis.</td>
</tr>
<tr>
<td>zMax</td>
<td>number</td>
<td>none</td>
<td>The maximum value for the z-axis.</td>
</tr>
<tr>
<td>zStep</td>
<td>number</td>
<td>none</td>
<td>Step size for the grid on the z-axis.</td>
</tr>
<tr>
<td>zValueLabel</td>
<td>function</td>
<td>none</td>
<td>A function for custom formatting of the labels along the z-axis,
for example <code>function (z) {return (z * 100) + '%'}</code>.
</td>
</tr>
<tr>
<td>xLabel</td>
<td>String</td>
<td>x</td>
<td>Label on the X axis.</td>
</tr>
<tr>
<td>yLabel</td>
<td>String</td>
<td>y</td>
<td>Label on the Y axis.</td>
</tr>
<tr>
<td>zLabel</td>
<td>String</td>
<td>z</td>
<td>Label on the Z axis.</td>
</tr>
<tr>
<td>filterLabel</td>
<td>String</td>
<td>time</td>
<td>Label for the filter column.</td>
</tr>
<tr>
<td>legendLabel</td>
<td>String</td>
<td>value</td>
<td>Label for the style description.</td>
</tr>
</table>
<h2 id="Methods">Methods</h2>
<p>
Graph3d supports the following methods.
</p>
<table>
<tr>
<th>Method</th>
<th>Return Type</th>
<th>Description</th>
</tr>
<tr>
<td>animationStart()</td>
<td>none</td>
<td>Start playing the animation.
Only applicable when animation data is available.</td>
</tr>
<tr>
<td>animationStop()</td>
<td>none</td>
<td>Stop playing the animation.
Only applicable when animation data is available.</td>
</tr>
<tr>
<td>getCameraPosition()</td>
<td>An object with parameters <code>horizontal</code>,
<code>vertical</code> and <code>distance</code></td>
<td>Returns an object with parameters <code>horizontal</code>,
<code>vertical</code> and <code>distance</code>,
which each one of them is a number, representing the rotation and position
of the camera.</td>
</tr>
<tr>
<td>redraw()</td>
<td>none</td>
<td>Redraw the graph. Useful after the camera position is changed externally,
when data is changed, or when the layout of the webpage changed.</td>
</tr>
<tr>
<td>setData(data)</td>
<td>none</td>
<td>Replace the data in the Graph3d.</td>
</tr>
<tr>
<td>setOptions(options)</td>
<td>none</td>
<td>Update options of Graph3d.
The provided options will be merged with current options.</td>
</tr>
<tr>
<td>setSize(width, height)</td>
<td>none</td>
<td>Parameters <code>width</code> and <code>height</code> are strings,
containing a new size for the graph. Size can be provided in pixels
or in percentages.</td>
</tr>
<tr>
<td>setCameraPosition (pos)</td>
<td>{horizontal:&nbsp;1.0, vertical:&nbsp;0.5, distance:&nbsp;1.7}</td>
<td>Set the rotation and position of the camera. Parameter <code>pos</code>
is an object which contains three parameters: <code>horizontal</code>,
<code>vertical</code>, and <code>distance</code>.
Parameter <code>horizontal</code> is a value in radians and can have any
value (but normally in the range of 0 and 2*Pi).
Parameter <code>vertical</code> is a value in radians between 0 and 0.5*Pi.
Parameter <code>distance</code> is the (normalized) distance from the
camera to the center of the graph, in the range of 0.71 to 5.0. A
larger distance puts the graph further away, making it smaller.
All parameters are optional.
</td>
</tr>
</table>
<h2 id="Events">Events</h2>
<p>
Graph3d fires events after the camera position has been changed.
The event can be catched by creating a listener.
Here an example on how to catch a <code>cameraPositionChange</code> event.
</p>
<pre class="prettyprint lang-js">
function onCameraPositionChange(event) {
alert('The camera position changed to:\n' +
'Horizontal: ' + event.horizontal + '\n' +
'Vertical: ' + event.vertical + '\n' +
'Distance: ' + event.distance);
}
// assuming var graph3d = new vis.Graph3d(document.getElementById('mygraph'));
graph3d.on('cameraPositionChange', onCameraPositionChange);
</pre>
<p>
The following events are available.
</p>
<table>
<col width="10%">
<col width="60%">
<col width="30%">
<tr>
<th>name</th>
<th>Description</th>
<th>Properties</th>
</tr>
<tr>
<td>cameraPositionChange</td>
<td>The camera position changed. Fired after the user modified the camera position
by moving (dragging) the graph, or by zooming (scrolling),
but not after a call to <code>setCameraPosition</code> method.
The new camera position can be retrieved by calling the method
<code>getCameraPosition</code>.</td>
<td>
<ul>
<li><code>horizontal</code>: Number. The horizontal angle of the camera.</li>
<li><code>vertical</code>: Number. The vertical angle of the camera.</li>
<li><code>distance</code>: Number. The distance of the camera to the center of the graph.</li>
</ul>
</td>
</tr>
</table>
<h2 id="Data_Policy">Data Policy</h2>
<p>
All code and data are processed and rendered in the browser. No data is sent to any server.
</p>
</div>
</body>
</html>

BIN
www2/docs/img/graph/graph.png View File

Before After
Width: 564  |  Height: 328  |  Size: 23 KiB

BIN
www2/docs/img/graph/graph120x60.png View File

Before After
Width: 120  |  Height: 60  |  Size: 4.6 KiB

BIN
www2/docs/img/graph3d.png View File

Before After
Width: 477  |  Height: 294  |  Size: 99 KiB

BIN
www2/docs/img/graph3d120x60.png View File

Before After
Width: 120  |  Height: 60  |  Size: 9.7 KiB

BIN
www2/docs/img/timeline/timeline.png View File

Before After
Width: 642  |  Height: 314  |  Size: 23 KiB

BIN
www2/docs/img/timeline/timeline120x60.png View File

Before After
Width: 120  |  Height: 60  |  Size: 6.5 KiB

BIN
www2/docs/img/vis_overview.odg View File


BIN
www2/docs/img/vis_overview.png View File

Before After
Width: 1128  |  Height: 1008  |  Size: 65 KiB

+ 0
- 225
www2/docs/index.html View File

@ -1,225 +0,0 @@
<!doctype html>
<html>
<head>
<title>vis.js | documentation</title>
<link href="css/prettify.css" type="text/css" rel="stylesheet" />
<link href='css/style.css' type='text/css' rel='stylesheet'>
<script type="text/javascript" src="lib/prettify/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<div id="container">
<h1>vis.js documentation</h1>
<p>
Vis.js is a dynamic, browser based visualization library.
The library is designed to be easy to use, handle large amounts
of dynamic data, and enable manipulation of the data.
</p>
<p>
The library is developed by
<a href="http://almende.com" target="_blank">Almende B.V.</a>.
Vis.js runs fine on Chrome, Firefox, Opera, Safari, IE9+, and most mobile
browsers (with full touch support).
</p>
<h2 id="Components">Components</h2>
<p>
Vis.js contains of the following components:
</p>
<div style="text-align: center; float: right; padding-left: 30px;">
<a href="img/vis_overview.png" target="_blank">
<img src="img/vis_overview.png" style="width: 350px; "/><br>
(click for a larger view)
</a>
</div>
<ul>
<li>
<a href="dataset.html"><b>DataSet</b></a>.
A flexible key/value based data set.
Add, update, and remove items. Subscribe on changes in the data set.
A DataSet can filter and order items, and convert fields of items.
</li>
<li>
<a href="dataview.html"><b>DataView</b></a>.
A filtered and/or formatted view on a DataSet.
</li>
<li>
<a href="network.html"><b>Network</b></a>.
Display a network (force directed graph) with nodes and edges (previously called Graph).
</li>
<li>
<a href="graph2d.html"><b>Graph2d</b></a>.
Plot data on a timeline with lines or barcharts.
</li>
<li>
<a href="graph3d.html"><b>Graph3d</b></a>.
Display data in a three dimensional graph.
</li>
<li>
<a href="timeline.html"><b>Timeline</b></a>.
Display different types of data on a timeline.
</li>
</ul>
<h2 id="Install">Install</h2>
<h3>npm</h3>
<pre class="prettyprint">
npm install vis
</pre>
<h3>bower</h3>
<pre class="prettyprint">
bower install vis
</pre>
<h3>download</h3>
Download the library from the website:
<a href="http://visjs.org" target="_blank">http://visjs.org</a>.
<h2 id="Load">Load</h2>
<p>
To load vis.js, include the javascript and css files of vis in your web page:
</p>
<pre class="prettyprint lang-html">&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src="components/vis/vis.js"&gt;&lt;/script&gt;
&lt;link href="components/vis/vis.css" rel="stylesheet" type="text/css" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script type="text/javascript"&gt;
// ... load a visualization
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p>
or load vis.js using require.js:
</p>
<pre class="prettyprint lang-js">
require.config({
paths: {
vis: 'path/to/vis',
}
});
require(['vis'], function (math) {
// ... load a visualization
});
</pre>
<p>
A timeline can be instantiated as follows. Other components can be
created in a similar way.
</p>
<pre class="prettyprint lang-js">
var timeline = new vis.Timeline(container, data, options);
</pre>
<p>
Where <code>container</code> is an HTML element, <code>data</code> is
an Array with data or a DataSet, and <code>options</code> is an optional
object with configuration options for the component.
</p>
<h2 id="Use">Use</h2>
<p>
A basic example on using a Timeline is shown below. More examples can be
found in the <a href="https://github.com/almende/vis/tree/master/examples"
target="_blank">examples directory</a> of the project.
</p>
<pre class="prettyprint lang-html">
&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Timeline basic demo&lt;/title&gt;
&lt;script src="components/vis/vis.js"&gt;&lt;/script&gt;
&lt;link href="components/vis/vis.css" rel="stylesheet" type="text/css" /&gt;
&lt;style type="text/css"&gt;
body, html {
font-family: sans-serif;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="visualization"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var data = new vis.DataSet([
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
]);
// Configuration for the Timeline
var options = {};
// Create a Timeline
var timeline = new vis.Timeline(container, data, options);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<h2 id="license">License</h2>
<p>
Copyright 2010-2014 Almende B.V.
</p>
<p>
Vis.js is dual licensed under both
</p>
<ul>
<li>
The Apache 2.0 License<br>
<a href="http://www.apache.org/licenses/LICENSE-2.0">http://www.apache.org/licenses/LICENSE-2.0</a>
</li>
</ul>
<p>
and
</p>
<ul>
<li>
The MIT License<br>
<a href="http://opensource.org/licenses/MIT">http://opensource.org/licenses/MIT</a>
</li>
</ul>
<p>
Vis.js may be distributed under either license.
</p>
</div>
</body>
</html>

+ 0
- 2
www2/docs/lib/prettify/lang-apollo.js View File

@ -1,2 +0,0 @@
PR.registerLangHandler(PR.createSimpleLexer([["com",/^#[^\r\n]*/,null,"#"],["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)/,null,'"']],[["kwd",/^(?:ADS|AD|AUG|BZF|BZMF|CAE|CAF|CA|CCS|COM|CS|DAS|DCA|DCOM|DCS|DDOUBL|DIM|DOUBLE|DTCB|DTCF|DV|DXCH|EDRUPT|EXTEND|INCR|INDEX|NDX|INHINT|LXCH|MASK|MSK|MP|MSU|NOOP|OVSK|QXCH|RAND|READ|RELINT|RESUME|RETURN|ROR|RXOR|SQUARE|SU|TCR|TCAA|OVSK|TCF|TC|TS|WAND|WOR|WRITE|XCH|XLQ|XXALQ|ZL|ZQ|ADD|ADZ|SUB|SUZ|MPY|MPR|MPZ|DVP|COM|ABS|CLA|CLZ|LDQ|STO|STQ|ALS|LLS|LRS|TRA|TSQ|TMI|TOV|AXT|TIX|DLY|INP|OUT)\s/,
null],["typ",/^(?:-?GENADR|=MINUS|2BCADR|VN|BOF|MM|-?2CADR|-?[1-6]DNADR|ADRES|BBCON|[SE]?BANK\=?|BLOCK|BNKSUM|E?CADR|COUNT\*?|2?DEC\*?|-?DNCHAN|-?DNPTR|EQUALS|ERASE|MEMORY|2?OCT|REMADR|SETLOC|SUBRO|ORG|BSS|BES|SYN|EQU|DEFINE|END)\s/,null],["lit",/^\'(?:-*(?:\w|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?)?/],["pln",/^-*(?:[!-z_]|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?/i],["pun",/^[^\w\t\n\r \xA0()\"\\\';]+/]]),["apollo","agc","aea"])

+ 0
- 2
www2/docs/lib/prettify/lang-css.js View File

@ -1,2 +0,0 @@
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[ \t\r\n\f]+/,null," \t\r\n\u000c"]],[["str",/^\"(?:[^\n\r\f\\\"]|\\(?:\r\n?|\n|\f)|\\[\s\S])*\"/,null],["str",/^\'(?:[^\n\r\f\\\']|\\(?:\r\n?|\n|\f)|\\[\s\S])*\'/,null],["lang-css-str",/^url\(([^\)\"\']*)\)/i],["kwd",/^(?:url|rgb|\!important|@import|@page|@media|@charset|inherit)(?=[^\-\w]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|(?:\\[0-9a-f]+ ?))(?:[_a-z0-9\-]|\\(?:\\[0-9a-f]+ ?))*)\s*:/i],["com",/^\/\*[^*]*\*+(?:[^\/*][^*]*\*+)*\//],
["com",/^(?:<!--|--\>)/],["lit",/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],["lit",/^#(?:[0-9a-f]{3}){1,2}/i],["pln",/^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i],["pun",/^[^\s\w\'\"]+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[["kwd",/^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[["str",/^[^\)\"\']+/]]),["css-str"])

+ 0
- 2
www2/docs/lib/prettify/lang-hs.js View File

@ -1,2 +0,0 @@
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\x0B\x0C\r ]+/,null,"\t\n\u000b\u000c\r "],["str",/^\"(?:[^\"\\\n\x0C\r]|\\[\s\S])*(?:\"|$)/,null,'"'],["str",/^\'(?:[^\'\\\n\x0C\r]|\\[^&])\'?/,null,"'"],["lit",/^(?:0o[0-7]+|0x[\da-f]+|\d+(?:\.\d+)?(?:e[+\-]?\d+)?)/i,null,"0123456789"]],[["com",/^(?:(?:--+(?:[^\r\n\x0C]*)?)|(?:\{-(?:[^-]|-+[^-\}])*-\}))/],["kwd",/^(?:case|class|data|default|deriving|do|else|if|import|in|infix|infixl|infixr|instance|let|module|newtype|of|then|type|where|_)(?=[^a-zA-Z0-9\']|$)/,
null],["pln",/^(?:[A-Z][\w\']*\.)*[a-zA-Z][\w\']*/],["pun",/^[^\t\n\x0B\x0C\r a-zA-Z0-9\'\"]+/]]),["hs"])

+ 0
- 2
www2/docs/lib/prettify/lang-lisp.js View File

@ -1,2 +0,0 @@
PR.registerLangHandler(PR.createSimpleLexer([["opn",/^\(/,null,"("],["clo",/^\)/,null,")"],["com",/^;[^\r\n]*/,null,";"],["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)/,null,'"']],[["kwd",/^(?:block|c[ad]+r|catch|con[ds]|def(?:ine|un)|do|eq|eql|equal|equalp|eval-when|flet|format|go|if|labels|lambda|let|load-time-value|locally|macrolet|multiple-value-call|nil|progn|progv|quote|require|return-from|setq|symbol-macrolet|t|tagbody|the|throw|unwind)\b/,
null],["lit",/^[+\-]?(?:0x[0-9a-f]+|\d+\/\d+|(?:\.\d+|\d+(?:\.\d*)?)(?:[ed][+\-]?\d+)?)/i],["lit",/^\'(?:-*(?:\w|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?)?/],["pln",/^-*(?:[a-z_]|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?/i],["pun",/^[^\w\t\n\r \xA0()\"\\\';]+/]]),["cl","el","lisp","scm"])

+ 0
- 2
www2/docs/lib/prettify/lang-lua.js View File

@ -1,2 +0,0 @@
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^(?:\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)|\'(?:[^\'\\]|\\[\s\S])*(?:\'|$))/,null,"\"'"]],[["com",/^--(?:\[(=*)\[[\s\S]*?(?:\]\1\]|$)|[^\r\n]*)/],["str",/^\[(=*)\[[\s\S]*?(?:\]\1\]|$)/],["kwd",/^(?:and|break|do|else|elseif|end|false|for|function|if|in|local|nil|not|or|repeat|return|then|true|until|while)\b/,null],["lit",/^[+-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],
["pln",/^[a-z_]\w*/i],["pun",/^[^\w\t\n\r \xA0][^\w\t\n\r \xA0\"\'\-\+=]*/]]),["lua"])

+ 0
- 2
www2/docs/lib/prettify/lang-ml.js View File

@ -1,2 +0,0 @@
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["com",/^#(?:if[\t\n\r \xA0]+(?:[a-z_$][\w\']*|``[^\r\n\t`]*(?:``|$))|else|endif|light)/i,null,"#"],["str",/^(?:\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)|\'(?:[^\'\\]|\\[\s\S])*(?:\'|$))/,null,"\"'"]],[["com",/^(?:\/\/[^\r\n]*|\(\*[\s\S]*?\*\))/],["kwd",/^(?:abstract|and|as|assert|begin|class|default|delegate|do|done|downcast|downto|elif|else|end|exception|extern|false|finally|for|fun|function|if|in|inherit|inline|interface|internal|lazy|let|match|member|module|mutable|namespace|new|null|of|open|or|override|private|public|rec|return|static|struct|then|to|true|try|type|upcast|use|val|void|when|while|with|yield|asr|land|lor|lsl|lsr|lxor|mod|sig|atomic|break|checked|component|const|constraint|constructor|continue|eager|event|external|fixed|functor|global|include|method|mixin|object|parallel|process|protected|pure|sealed|trait|virtual|volatile)\b/],
["lit",/^[+\-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],["pln",/^(?:[a-z_]\w*[!?#]?|``[^\r\n\t`]*(?:``|$))/i],["pun",/^[^\t\n\r \xA0\"\'\w]+/]]),["fs","ml"])

+ 0
- 1
www2/docs/lib/prettify/lang-proto.js View File

@ -1 +0,0 @@
PR.registerLangHandler(PR.sourceDecorator({keywords:"bool bytes default double enum extend extensions false fixed32 fixed64 float group import int32 int64 max message option optional package repeated required returns rpc service sfixed32 sfixed64 sint32 sint64 string syntax to true uint32 uint64",cStyleComments:true}),["proto"])

+ 0
- 2
www2/docs/lib/prettify/lang-scala.js View File

@ -1,2 +0,0 @@
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^(?:"(?:(?:""(?:""?(?!")|[^\\"]|\\.)*"{0,3})|(?:[^"\r\n\\]|\\.)*"?))/,null,'"'],["lit",/^`(?:[^\r\n\\`]|\\.)*`?/,null,"`"],["pun",/^[!#%&()*+,\-:;<=>?@\[\\\]^{|}~]+/,null,"!#%&()*+,-:;<=>?@[\\]^{|}~"]],[["str",/^'(?:[^\r\n\\']|\\(?:'|[^\r\n']+))'/],["lit",/^'[a-zA-Z_$][\w$]*(?!['$\w])/],["kwd",/^(?:abstract|case|catch|class|def|do|else|extends|final|finally|for|forSome|if|implicit|import|lazy|match|new|object|override|package|private|protected|requires|return|sealed|super|throw|trait|try|type|val|var|while|with|yield)\b/],
["lit",/^(?:true|false|null|this)\b/],["lit",/^(?:(?:0(?:[0-7]+|X[0-9A-F]+))L?|(?:(?:0|[1-9][0-9]*)(?:(?:\.[0-9]+)?(?:E[+\-]?[0-9]+)?F?|L?))|\\.[0-9]+(?:E[+\-]?[0-9]+)?F?)/i],["typ",/^[$_]*[A-Z][_$A-Z0-9]*[a-z][\w$]*/],["pln",/^[$a-zA-Z_][\w$]*/],["com",/^\/(?:\/.*|\*(?:\/|\**[^*/])*(?:\*+\/?)?)/],["pun",/^(?:\.+|\/)/]]),["scala"])

+ 0
- 2
www2/docs/lib/prettify/lang-sql.js View File

@ -1,2 +0,0 @@
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^(?:"(?:[^\"\\]|\\.)*"|'(?:[^\'\\]|\\.)*')/,null,"\"'"]],[["com",/^(?:--[^\r\n]*|\/\*[\s\S]*?(?:\*\/|$))/],["kwd",/^(?:ADD|ALL|ALTER|AND|ANY|AS|ASC|AUTHORIZATION|BACKUP|BEGIN|BETWEEN|BREAK|BROWSE|BULK|BY|CASCADE|CASE|CHECK|CHECKPOINT|CLOSE|CLUSTERED|COALESCE|COLLATE|COLUMN|COMMIT|COMPUTE|CONSTRAINT|CONTAINS|CONTAINSTABLE|CONTINUE|CONVERT|CREATE|CROSS|CURRENT|CURRENT_DATE|CURRENT_TIME|CURRENT_TIMESTAMP|CURRENT_USER|CURSOR|DATABASE|DBCC|DEALLOCATE|DECLARE|DEFAULT|DELETE|DENY|DESC|DISK|DISTINCT|DISTRIBUTED|DOUBLE|DROP|DUMMY|DUMP|ELSE|END|ERRLVL|ESCAPE|EXCEPT|EXEC|EXECUTE|EXISTS|EXIT|FETCH|FILE|FILLFACTOR|FOR|FOREIGN|FREETEXT|FREETEXTTABLE|FROM|FULL|FUNCTION|GOTO|GRANT|GROUP|HAVING|HOLDLOCK|IDENTITY|IDENTITYCOL|IDENTITY_INSERT|IF|IN|INDEX|INNER|INSERT|INTERSECT|INTO|IS|JOIN|KEY|KILL|LEFT|LIKE|LINENO|LOAD|NATIONAL|NOCHECK|NONCLUSTERED|NOT|NULL|NULLIF|OF|OFF|OFFSETS|ON|OPEN|OPENDATASOURCE|OPENQUERY|OPENROWSET|OPENXML|OPTION|OR|ORDER|OUTER|OVER|PERCENT|PLAN|PRECISION|PRIMARY|PRINT|PROC|PROCEDURE|PUBLIC|RAISERROR|READ|READTEXT|RECONFIGURE|REFERENCES|REPLICATION|RESTORE|RESTRICT|RETURN|REVOKE|RIGHT|ROLLBACK|ROWCOUNT|ROWGUIDCOL|RULE|SAVE|SCHEMA|SELECT|SESSION_USER|SET|SETUSER|SHUTDOWN|SOME|STATISTICS|SYSTEM_USER|TABLE|TEXTSIZE|THEN|TO|TOP|TRAN|TRANSACTION|TRIGGER|TRUNCATE|TSEQUAL|UNION|UNIQUE|UPDATE|UPDATETEXT|USE|USER|VALUES|VARYING|VIEW|WAITFOR|WHEN|WHERE|WHILE|WITH|WRITETEXT)(?=[^\w-]|$)/i,
null],["lit",/^[+-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],["pln",/^[a-z_][\w-]*/i],["pun",/^[^\w\t\n\r \xA0\"\'][^\w\t\n\r \xA0+\-\"\']*/]]),["sql"])

+ 0
- 2
www2/docs/lib/prettify/lang-vb.js View File

@ -1,2 +0,0 @@
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0\u2028\u2029]+/,null,"\t\n\r \u00a0\u2028\u2029"],["str",/^(?:[\"\u201C\u201D](?:[^\"\u201C\u201D]|[\"\u201C\u201D]{2})(?:[\"\u201C\u201D]c|$)|[\"\u201C\u201D](?:[^\"\u201C\u201D]|[\"\u201C\u201D]{2})*(?:[\"\u201C\u201D]|$))/i,null,'"\u201c\u201d'],["com",/^[\'\u2018\u2019][^\r\n\u2028\u2029]*/,null,"'\u2018\u2019"]],[["kwd",/^(?:AddHandler|AddressOf|Alias|And|AndAlso|Ansi|As|Assembly|Auto|Boolean|ByRef|Byte|ByVal|Call|Case|Catch|CBool|CByte|CChar|CDate|CDbl|CDec|Char|CInt|Class|CLng|CObj|Const|CShort|CSng|CStr|CType|Date|Decimal|Declare|Default|Delegate|Dim|DirectCast|Do|Double|Each|Else|ElseIf|End|EndIf|Enum|Erase|Error|Event|Exit|Finally|For|Friend|Function|Get|GetType|GoSub|GoTo|Handles|If|Implements|Imports|In|Inherits|Integer|Interface|Is|Let|Lib|Like|Long|Loop|Me|Mod|Module|MustInherit|MustOverride|MyBase|MyClass|Namespace|New|Next|Not|NotInheritable|NotOverridable|Object|On|Option|Optional|Or|OrElse|Overloads|Overridable|Overrides|ParamArray|Preserve|Private|Property|Protected|Public|RaiseEvent|ReadOnly|ReDim|RemoveHandler|Resume|Return|Select|Set|Shadows|Shared|Short|Single|Static|Step|Stop|String|Structure|Sub|SyncLock|Then|Throw|To|Try|TypeOf|Unicode|Until|Variant|Wend|When|While|With|WithEvents|WriteOnly|Xor|EndIf|GoSub|Let|Variant|Wend)\b/i,
null],["com",/^REM[^\r\n\u2028\u2029]*/i],["lit",/^(?:True\b|False\b|Nothing\b|\d+(?:E[+\-]?\d+[FRD]?|[FRDSIL])?|(?:&H[0-9A-F]+|&O[0-7]+)[SIL]?|\d*\.\d+(?:E[+\-]?\d+)?[FRD]?|#\s+(?:\d+[\-\/]\d+[\-\/]\d+(?:\s+\d+:\d+(?::\d+)?(\s*(?:AM|PM))?)?|\d+:\d+(?::\d+)?(\s*(?:AM|PM))?)\s+#)/i],["pln",/^(?:(?:[a-z]|_\w)\w*|\[(?:[a-z]|_\w)\w*\])/i],["pun",/^[^\w\t\n\r \"\'\[\]\xA0\u2018\u2019\u201C\u201D\u2028\u2029]+/],["pun",/^(?:\[|\])/]]),["vb","vbs"])

+ 0
- 3
www2/docs/lib/prettify/lang-vhdl.js View File

@ -1,3 +0,0 @@
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"]],[["str",/^(?:[BOX]?"(?:[^\"]|"")*"|'.')/i],["com",/^--[^\r\n]*/],["kwd",/^(?:abs|access|after|alias|all|and|architecture|array|assert|attribute|begin|block|body|buffer|bus|case|component|configuration|constant|disconnect|downto|else|elsif|end|entity|exit|file|for|function|generate|generic|group|guarded|if|impure|in|inertial|inout|is|label|library|linkage|literal|loop|map|mod|nand|new|next|nor|not|null|of|on|open|or|others|out|package|port|postponed|procedure|process|pure|range|record|register|reject|rem|report|return|rol|ror|select|severity|shared|signal|sla|sll|sra|srl|subtype|then|to|transport|type|unaffected|units|until|use|variable|wait|when|while|with|xnor|xor)(?=[^\w-]|$)/i,
null],["typ",/^(?:bit|bit_vector|character|boolean|integer|real|time|string|severity_level|positive|natural|signed|unsigned|line|text|std_u?logic(?:_vector)?)(?=[^\w-]|$)/i,null],["typ",/^\'(?:ACTIVE|ASCENDING|BASE|DELAYED|DRIVING|DRIVING_VALUE|EVENT|HIGH|IMAGE|INSTANCE_NAME|LAST_ACTIVE|LAST_EVENT|LAST_VALUE|LEFT|LEFTOF|LENGTH|LOW|PATH_NAME|POS|PRED|QUIET|RANGE|REVERSE_RANGE|RIGHT|RIGHTOF|SIMPLE_NAME|STABLE|SUCC|TRANSACTION|VAL|VALUE)(?=[^\w-]|$)/i,null],["lit",/^\d+(?:_\d+)*(?:#[\w\\.]+#(?:[+\-]?\d+(?:_\d+)*)?|(?:\.\d+(?:_\d+)*)?(?:E[+\-]?\d+(?:_\d+)*)?)/i],
["pln",/^(?:[a-z]\w*|\\[^\\]*\\)/i],["pun",/^[^\w\t\n\r \xA0\"\'][^\w\t\n\r \xA0\-\"\']*/]]),["vhdl","vhd"])

+ 0
- 2
www2/docs/lib/prettify/lang-wiki.js View File

@ -1,2 +0,0 @@
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t \xA0a-gi-z0-9]+/,null,"\t \u00a0abcdefgijklmnopqrstuvwxyz0123456789"],["pun",/^[=*~\^\[\]]+/,null,"=*~^[]"]],[["lang-wiki.meta",/(?:^^|\r\n?|\n)(#[a-z]+)\b/],["lit",/^(?:[A-Z][a-z][a-z0-9]+[A-Z][a-z][a-zA-Z0-9]+)\b/],["lang-",/^\{\{\{([\s\S]+?)\}\}\}/],["lang-",/^`([^\r\n`]+)`/],["str",/^https?:\/\/[^\/?#\s]*(?:\/[^?#\s]*)?(?:\?[^#\s]*)?(?:#\S*)?/i],["pln",/^(?:\r\n|[\s\S])[^#=*~^A-Zh\{`\[\r\n]*/]]),["wiki"]);
PR.registerLangHandler(PR.createSimpleLexer([["kwd",/^#[a-z]+/i,null,"#"]],[]),["wiki.meta"])

+ 0
- 2
www2/docs/lib/prettify/lang-yaml.js View File

@ -1,2 +0,0 @@
PR.registerLangHandler(PR.createSimpleLexer([["pun",/^[:|>?]+/,null,":|>?"],["dec",/^%(?:YAML|TAG)[^#\r\n]+/,null,"%"],["typ",/^[&]\S+/,null,"&"],["typ",/^!\S*/,null,"!"],["str",/^"(?:[^\\"]|\\.)*(?:"|$)/,null,'"'],["str",/^'(?:[^']|'')*(?:'|$)/,null,"'"],["com",/^#[^\r\n]*/,null,"#"],["pln",/^\s+/,null," \t\r\n"]],[["dec",/^(?:---|\.\.\.)(?:[\r\n]|$)/],["pun",/^-/],["kwd",/^\w+:[ \r\n]/],["pln",/^\w+/]]),
["yaml","yml"])

+ 0
- 1
www2/docs/lib/prettify/prettify.css View File

@ -1 +0,0 @@
.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun{color:#660}.pln{color:#000}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec{color:#606}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}@media print{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun{color:#440}.pln{color:#000}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}

+ 0
- 33
www2/docs/lib/prettify/prettify.js View File

@ -1,33 +0,0 @@
window.PR_SHOULD_USE_CONTINUATION=true;window.PR_TAB_WIDTH=8;window.PR_normalizedHtml=window.PR=window.prettyPrintOne=window.prettyPrint=void 0;window._pr_isIE6=function(){var y=navigator&&navigator.userAgent&&navigator.userAgent.match(/\bMSIE ([678])\./);y=y?+y[1]:false;window._pr_isIE6=function(){return y};return y};
(function(){function y(b){return b.replace(L,"&amp;").replace(M,"&lt;").replace(N,"&gt;")}function H(b,f,i){switch(b.nodeType){case 1:var o=b.tagName.toLowerCase();f.push("<",o);var l=b.attributes,n=l.length;if(n){if(i){for(var r=[],j=n;--j>=0;)r[j]=l[j];r.sort(function(q,m){return q.name<m.name?-1:q.name===m.name?0:1});l=r}for(j=0;j<n;++j){r=l[j];r.specified&&f.push(" ",r.name.toLowerCase(),'="',r.value.replace(L,"&amp;").replace(M,"&lt;").replace(N,"&gt;").replace(X,"&quot;"),'"')}}f.push(">");
for(l=b.firstChild;l;l=l.nextSibling)H(l,f,i);if(b.firstChild||!/^(?:br|link|img)$/.test(o))f.push("</",o,">");break;case 3:case 4:f.push(y(b.nodeValue));break}}function O(b){function f(c){if(c.charAt(0)!=="\\")return c.charCodeAt(0);switch(c.charAt(1)){case "b":return 8;case "t":return 9;case "n":return 10;case "v":return 11;case "f":return 12;case "r":return 13;case "u":case "x":return parseInt(c.substring(2),16)||c.charCodeAt(1);case "0":case "1":case "2":case "3":case "4":case "5":case "6":case "7":return parseInt(c.substring(1),
8);default:return c.charCodeAt(1)}}function i(c){if(c<32)return(c<16?"\\x0":"\\x")+c.toString(16);c=String.fromCharCode(c);if(c==="\\"||c==="-"||c==="["||c==="]")c="\\"+c;return c}function o(c){var d=c.substring(1,c.length-1).match(RegExp("\\\\u[0-9A-Fa-f]{4}|\\\\x[0-9A-Fa-f]{2}|\\\\[0-3][0-7]{0,2}|\\\\[0-7]{1,2}|\\\\[\\s\\S]|-|[^-\\\\]","g"));c=[];for(var a=[],k=d[0]==="^",e=k?1:0,h=d.length;e<h;++e){var g=d[e];switch(g){case "\\B":case "\\b":case "\\D":case "\\d":case "\\S":case "\\s":case "\\W":case "\\w":c.push(g);
continue}g=f(g);var s;if(e+2<h&&"-"===d[e+1]){s=f(d[e+2]);e+=2}else s=g;a.push([g,s]);if(!(s<65||g>122)){s<65||g>90||a.push([Math.max(65,g)|32,Math.min(s,90)|32]);s<97||g>122||a.push([Math.max(97,g)&-33,Math.min(s,122)&-33])}}a.sort(function(v,w){return v[0]-w[0]||w[1]-v[1]});d=[];g=[NaN,NaN];for(e=0;e<a.length;++e){h=a[e];if(h[0]<=g[1]+1)g[1]=Math.max(g[1],h[1]);else d.push(g=h)}a=["["];k&&a.push("^");a.push.apply(a,c);for(e=0;e<d.length;++e){h=d[e];a.push(i(h[0]));if(h[1]>h[0]){h[1]+1>h[0]&&a.push("-");
a.push(i(h[1]))}}a.push("]");return a.join("")}function l(c){for(var d=c.source.match(RegExp("(?:\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]|\\\\u[A-Fa-f0-9]{4}|\\\\x[A-Fa-f0-9]{2}|\\\\[0-9]+|\\\\[^ux0-9]|\\(\\?[:!=]|[\\(\\)\\^]|[^\\x5B\\x5C\\(\\)\\^]+)","g")),a=d.length,k=[],e=0,h=0;e<a;++e){var g=d[e];if(g==="(")++h;else if("\\"===g.charAt(0))if((g=+g.substring(1))&&g<=h)k[g]=-1}for(e=1;e<k.length;++e)if(-1===k[e])k[e]=++n;for(h=e=0;e<a;++e){g=d[e];if(g==="("){++h;if(k[h]===undefined)d[e]="(?:"}else if("\\"===
g.charAt(0))if((g=+g.substring(1))&&g<=h)d[e]="\\"+k[h]}for(h=e=0;e<a;++e)if("^"===d[e]&&"^"!==d[e+1])d[e]="";if(c.ignoreCase&&r)for(e=0;e<a;++e){g=d[e];c=g.charAt(0);if(g.length>=2&&c==="[")d[e]=o(g);else if(c!=="\\")d[e]=g.replace(/[a-zA-Z]/g,function(s){s=s.charCodeAt(0);return"["+String.fromCharCode(s&-33,s|32)+"]"})}return d.join("")}for(var n=0,r=false,j=false,q=0,m=b.length;q<m;++q){var t=b[q];if(t.ignoreCase)j=true;else if(/[a-z]/i.test(t.source.replace(/\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi,
""))){r=true;j=false;break}}var p=[];q=0;for(m=b.length;q<m;++q){t=b[q];if(t.global||t.multiline)throw Error(""+t);p.push("(?:"+l(t)+")")}return RegExp(p.join("|"),j?"gi":"g")}function Y(b){var f=0;return function(i){for(var o=null,l=0,n=0,r=i.length;n<r;++n)switch(i.charAt(n)){case "\t":o||(o=[]);o.push(i.substring(l,n));l=b-f%b;for(f+=l;l>=0;l-=16)o.push(" ".substring(0,l));l=n+1;break;case "\n":f=0;break;default:++f}if(!o)return i;o.push(i.substring(l));return o.join("")}}function I(b,
f,i,o){if(f){b={source:f,c:b};i(b);o.push.apply(o,b.d)}}function B(b,f){var i={},o;(function(){for(var r=b.concat(f),j=[],q={},m=0,t=r.length;m<t;++m){var p=r[m],c=p[3];if(c)for(var d=c.length;--d>=0;)i[c.charAt(d)]=p;p=p[1];c=""+p;if(!q.hasOwnProperty(c)){j.push(p);q[c]=null}}j.push(/[\0-\uffff]/);o=O(j)})();var l=f.length;function n(r){for(var j=r.c,q=[j,z],m=0,t=r.source.match(o)||[],p={},c=0,d=t.length;c<d;++c){var a=t[c],k=p[a],e=void 0,h;if(typeof k==="string")h=false;else{var g=i[a.charAt(0)];
if(g){e=a.match(g[1]);k=g[0]}else{for(h=0;h<l;++h){g=f[h];if(e=a.match(g[1])){k=g[0];break}}e||(k=z)}if((h=k.length>=5&&"lang-"===k.substring(0,5))&&!(e&&typeof e[1]==="string")){h=false;k=P}h||(p[a]=k)}g=m;m+=a.length;if(h){h=e[1];var s=a.indexOf(h),v=s+h.length;if(e[2]){v=a.length-e[2].length;s=v-h.length}k=k.substring(5);I(j+g,a.substring(0,s),n,q);I(j+g+s,h,Q(k,h),q);I(j+g+v,a.substring(v),n,q)}else q.push(j+g,k)}r.d=q}return n}function x(b){var f=[],i=[];if(b.tripleQuotedStrings)f.push([A,/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
null,"'\""]);else b.multiLineStrings?f.push([A,/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,"'\"`"]):f.push([A,/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,"\"'"]);b.verbatimStrings&&i.push([A,/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null]);if(b.hashComments)if(b.cStyleComments){f.push([C,/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,null,"#"]);i.push([A,/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
null])}else f.push([C,/^#[^\r\n]*/,null,"#"]);if(b.cStyleComments){i.push([C,/^\/\/[^\r\n]*/,null]);i.push([C,/^\/\*[\s\S]*?(?:\*\/|$)/,null])}b.regexLiterals&&i.push(["lang-regex",RegExp("^"+Z+"(/(?=[^/*])(?:[^/\\x5B\\x5C]|\\x5C[\\s\\S]|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+/)")]);b=b.keywords.replace(/^\s+|\s+$/g,"");b.length&&i.push([R,RegExp("^(?:"+b.replace(/\s+/g,"|")+")\\b"),null]);f.push([z,/^\s+/,null," \r\n\t\u00a0"]);i.push([J,/^@[a-z_$][a-z_$@0-9]*/i,null],[S,/^@?[A-Z]+[a-z][A-Za-z_$@0-9]*/,
null],[z,/^[a-z_$][a-z_$@0-9]*/i,null],[J,/^(?:0x[a-f0-9]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+\-]?\d+)?)[a-z]*/i,null,"0123456789"],[E,/^.[^\s\w\.$@\'\"\`\/\#]*/,null]);return B(f,i)}function $(b){function f(D){if(D>r){if(j&&j!==q){n.push("</span>");j=null}if(!j&&q){j=q;n.push('<span class="',j,'">')}var T=y(p(i.substring(r,D))).replace(e?d:c,"$1&#160;");e=k.test(T);n.push(T.replace(a,s));r=D}}var i=b.source,o=b.g,l=b.d,n=[],r=0,j=null,q=null,m=0,t=0,p=Y(window.PR_TAB_WIDTH),c=/([\r\n ]) /g,
d=/(^| ) /gm,a=/\r\n?|\n/g,k=/[ \r\n]$/,e=true,h=window._pr_isIE6();h=h?b.b.tagName==="PRE"?h===6?"&#160;\r\n":h===7?"&#160;<br>\r":"&#160;\r":"&#160;<br />":"<br />";var g=b.b.className.match(/\blinenums\b(?::(\d+))?/),s;if(g){for(var v=[],w=0;w<10;++w)v[w]=h+'</li><li class="L'+w+'">';var F=g[1]&&g[1].length?g[1]-1:0;n.push('<ol class="linenums"><li class="L',F%10,'"');F&&n.push(' value="',F+1,'"');n.push(">");s=function(){var D=v[++F%10];return j?"</span>"+D+'<span class="'+j+'">':D}}else s=h;
for(;;)if(m<o.length?t<l.length?o[m]<=l[t]:true:false){f(o[m]);if(j){n.push("</span>");j=null}n.push(o[m+1]);m+=2}else if(t<l.length){f(l[t]);q=l[t+1];t+=2}else break;f(i.length);j&&n.push("</span>");g&&n.push("</li></ol>");b.a=n.join("")}function u(b,f){for(var i=f.length;--i>=0;){var o=f[i];if(G.hasOwnProperty(o))"console"in window&&console.warn("cannot override language handler %s",o);else G[o]=b}}function Q(b,f){b&&G.hasOwnProperty(b)||(b=/^\s*</.test(f)?"default-markup":"default-code");return G[b]}
function U(b){var f=b.f,i=b.e;b.a=f;try{var o,l=f.match(aa);f=[];var n=0,r=[];if(l)for(var j=0,q=l.length;j<q;++j){var m=l[j];if(m.length>1&&m.charAt(0)==="<"){if(!ba.test(m))if(ca.test(m)){f.push(m.substring(9,m.length-3));n+=m.length-12}else if(da.test(m)){f.push("\n");++n}else if(m.indexOf(V)>=0&&m.replace(/\s(\w+)\s*=\s*(?:\"([^\"]*)\"|'([^\']*)'|(\S+))/g,' $1="$2$3$4"').match(/[cC][lL][aA][sS][sS]=\"[^\"]*\bnocode\b/)){var t=m.match(W)[2],p=1,c;c=j+1;a:for(;c<q;++c){var d=l[c].match(W);if(d&&
d[2]===t)if(d[1]==="/"){if(--p===0)break a}else++p}if(c<q){r.push(n,l.slice(j,c+1).join(""));j=c}else r.push(n,m)}else r.push(n,m)}else{var a;p=m;var k=p.indexOf("&");if(k<0)a=p;else{for(--k;(k=p.indexOf("&#",k+1))>=0;){var e=p.indexOf(";",k);if(e>=0){var h=p.substring(k+3,e),g=10;if(h&&h.charAt(0)==="x"){h=h.substring(1);g=16}var s=parseInt(h,g);isNaN(s)||(p=p.substring(0,k)+String.fromCharCode(s)+p.substring(e+1))}}a=p.replace(ea,"<").replace(fa,">").replace(ga,"'").replace(ha,'"').replace(ia," ").replace(ja,
"&")}f.push(a);n+=a.length}}o={source:f.join(""),h:r};var v=o.source;b.source=v;b.c=0;b.g=o.h;Q(i,v)(b);$(b)}catch(w){if("console"in window)console.log(w&&w.stack?w.stack:w)}}var A="str",R="kwd",C="com",S="typ",J="lit",E="pun",z="pln",P="src",V="nocode",Z=function(){for(var b=["!","!=","!==","#","%","%=","&","&&","&&=","&=","(","*","*=","+=",",","-=","->","/","/=",":","::",";","<","<<","<<=","<=","=","==","===",">",">=",">>",">>=",">>>",">>>=","?","@","[","^","^=","^^","^^=","{","|","|=","||","||=",
"~","break","case","continue","delete","do","else","finally","instanceof","return","throw","try","typeof"],f="(?:^^|[+-]",i=0;i<b.length;++i)f+="|"+b[i].replace(/([^=<>:&a-z])/g,"\\$1");f+=")\\s*";return f}(),L=/&/g,M=/</g,N=/>/g,X=/\"/g,ea=/&lt;/g,fa=/&gt;/g,ga=/&apos;/g,ha=/&quot;/g,ja=/&amp;/g,ia=/&nbsp;/g,ka=/[\r\n]/g,K=null,aa=RegExp("[^<]+|<!--[\\s\\S]*?--\>|<!\\[CDATA\\[[\\s\\S]*?\\]\\]>|</?[a-zA-Z](?:[^>\"']|'[^']*'|\"[^\"]*\")*>|<","g"),ba=/^<\!--/,ca=/^<!\[CDATA\[/,da=/^<br\b/i,W=/^<(\/?)([a-zA-Z][a-zA-Z0-9]*)/,
la=x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof alignof align_union asm axiom bool concept concept_map const_cast constexpr decltype dynamic_cast explicit export friend inline late_check mutable namespace nullptr reinterpret_cast static_assert static_cast template typeid typename using virtual wchar_t where break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient as base by checked decimal delegate descending event fixed foreach from group implicit in interface internal into is lock object out override orderby params partial readonly ref sbyte sealed stackalloc string select uint ulong unchecked unsafe ushort var break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof debugger eval export function get null set undefined var with Infinity NaN caller delete die do dump elsif eval exit foreach for goto if import last local my next no our print package redo require sub undef unless until use wantarray while BEGIN END break continue do else for if return while and as assert class def del elif except exec finally from global import in is lambda nonlocal not or pass print raise try with yield False True None break continue do else for if return while alias and begin case class def defined elsif end ensure false in module next nil not or redo rescue retry self super then true undef unless until when yield BEGIN END break continue do else for if return while case done elif esac eval fi function in local set then until ",
hashComments:true,cStyleComments:true,multiLineStrings:true,regexLiterals:true}),G={};u(la,["default-code"]);u(B([],[[z,/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],[C,/^<\!--[\s\S]*?(?:-\->|$)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],[E,/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),["default-markup",
"htm","html","mxml","xhtml","xml","xsl"]);u(B([[z,/^[\s]+/,null," \t\r\n"],["atv",/^(?:\"[^\"]*\"?|\'[^\']*\'?)/,null,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],[E,/^[=<>\/]+/],["lang-js",/^on\w+\s*=\s*\"([^\"]+)\"/i],["lang-js",/^on\w+\s*=\s*\'([^\']+)\'/i],["lang-js",/^on\w+\s*=\s*([^\"\'>\s]+)/i],["lang-css",/^style\s*=\s*\"([^\"]+)\"/i],["lang-css",/^style\s*=\s*\'([^\']+)\'/i],
["lang-css",/^style\s*=\s*([^\"\'>\s]+)/i]]),["in.tag"]);u(B([],[["atv",/^[\s\S]+/]]),["uq.val"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof alignof align_union asm axiom bool concept concept_map const_cast constexpr decltype dynamic_cast explicit export friend inline late_check mutable namespace nullptr reinterpret_cast static_assert static_cast template typeid typename using virtual wchar_t where ",
hashComments:true,cStyleComments:true}),["c","cc","cpp","cxx","cyc","m"]);u(x({keywords:"null true false"}),["json"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient as base by checked decimal delegate descending event fixed foreach from group implicit in interface internal into is lock object out override orderby params partial readonly ref sbyte sealed stackalloc string select uint ulong unchecked unsafe ushort var ",
hashComments:true,cStyleComments:true,verbatimStrings:true}),["cs"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient ",
cStyleComments:true}),["java"]);u(x({keywords:"break continue do else for if return while case done elif esac eval fi function in local set then until ",hashComments:true,multiLineStrings:true}),["bsh","csh","sh"]);u(x({keywords:"break continue do else for if return while and as assert class def del elif except exec finally from global import in is lambda nonlocal not or pass print raise try with yield False True None ",hashComments:true,multiLineStrings:true,tripleQuotedStrings:true}),["cv","py"]);
u(x({keywords:"caller delete die do dump elsif eval exit foreach for goto if import last local my next no our print package redo require sub undef unless until use wantarray while BEGIN END ",hashComments:true,multiLineStrings:true,regexLiterals:true}),["perl","pl","pm"]);u(x({keywords:"break continue do else for if return while alias and begin case class def defined elsif end ensure false in module next nil not or redo rescue retry self super then true undef unless until when yield BEGIN END ",hashComments:true,
multiLineStrings:true,regexLiterals:true}),["rb"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof debugger eval export function get null set undefined var with Infinity NaN ",cStyleComments:true,regexLiterals:true}),["js"]);u(B([],[[A,/^[\s\S]+/]]),
["regex"]);window.PR_normalizedHtml=H;window.prettyPrintOne=function(b,f){var i={f:b,e:f};U(i);return i.a};window.prettyPrint=function(b){function f(){for(var t=window.PR_SHOULD_USE_CONTINUATION?j.now()+250:Infinity;q<o.length&&j.now()<t;q++){var p=o[q];if(p.className&&p.className.indexOf("prettyprint")>=0){var c=p.className.match(/\blang-(\w+)\b/);if(c)c=c[1];for(var d=false,a=p.parentNode;a;a=a.parentNode)if((a.tagName==="pre"||a.tagName==="code"||a.tagName==="xmp")&&a.className&&a.className.indexOf("prettyprint")>=
0){d=true;break}if(!d){a=p;if(null===K){d=document.createElement("PRE");d.appendChild(document.createTextNode('<!DOCTYPE foo PUBLIC "foo bar">\n<foo />'));K=!/</.test(d.innerHTML)}if(K){d=a.innerHTML;if("XMP"===a.tagName)d=y(d);else{a=a;if("PRE"===a.tagName)a=true;else if(ka.test(d)){var k="";if(a.currentStyle)k=a.currentStyle.whiteSpace;else if(window.getComputedStyle)k=window.getComputedStyle(a,null).whiteSpace;a=!k||k==="pre"}else a=true;a||(d=d.replace(/(<br\s*\/?>)[\r\n]+/g,"$1").replace(/(?:[\r\n]+[ \t]*)+/g,
" "))}d=d}else{d=[];for(a=a.firstChild;a;a=a.nextSibling)H(a,d);d=d.join("")}d=d.replace(/(?:\r\n?|\n)$/,"");m={f:d,e:c,b:p};U(m);if(p=m.a){c=m.b;if("XMP"===c.tagName){d=document.createElement("PRE");for(a=0;a<c.attributes.length;++a){k=c.attributes[a];if(k.specified)if(k.name.toLowerCase()==="class")d.className=k.value;else d.setAttribute(k.name,k.value)}d.innerHTML=p;c.parentNode.replaceChild(d,c)}else c.innerHTML=p}}}}if(q<o.length)setTimeout(f,250);else b&&b()}for(var i=[document.getElementsByTagName("pre"),
document.getElementsByTagName("code"),document.getElementsByTagName("xmp")],o=[],l=0;l<i.length;++l)for(var n=0,r=i[l].length;n<r;++n)o.push(i[l][n]);i=null;var j=Date;j.now||(j={now:function(){return(new Date).getTime()}});var q=0,m;f()};window.PR={combinePrefixPatterns:O,createSimpleLexer:B,registerLangHandler:u,sourceDecorator:x,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:C,PR_DECLARATION:"dec",PR_KEYWORD:R,PR_LITERAL:J,PR_NOCODE:V,PR_PLAIN:z,PR_PUNCTUATION:E,PR_SOURCE:P,PR_STRING:A,
PR_TAG:"tag",PR_TYPE:S}})()

+ 0
- 2508
www2/docs/network.html
File diff suppressed because it is too large
View File


+ 0
- 1355
www2/docs/timeline.html
File diff suppressed because it is too large
View File


+ 0
- 52
www2/examples/graph2d/01_basic.html View File

@ -1,52 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Graph2d | Basic Example</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Basic Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the most basic functionality of the vis.js Graph2d module. An array or a vis.Dataset can be used as input.
In the following examples we'll explore the options Graph2d offest for customization. This example uses all default settings.
There are 10 predefined styles that will be cycled through automatically when you add different groups. Alternatively you can
create your own styling.
<br /><br />
Graph2d is built upon the framework of the newly refactored timeline. A lot of the timeline options will also apply to Graph2d.
In these examples however, we will focus on what's new in Graph2d!
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11', y: 10},
{x: '2014-06-12', y: 25},
{x: '2014-06-13', y: 30},
{x: '2014-06-14', y: 10},
{x: '2014-06-15', y: 15},
{x: '2014-06-16', y: 30}
];
var dataset = new vis.DataSet(items);
var options = {
start: '2014-06-10',
end: '2014-06-18',
};
var graph2d = new vis.Graph2d(container, dataset, options);
</script>
</body>
</html>

+ 0
- 57
www2/examples/graph2d/02_bars.html View File

@ -1,57 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Bar Graph Example</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Bar Graph Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the most the same data as the first example, except we plot the data as bars! The
dataAxis (y-axis) icons have been enabled as well. These icons are generated automatically from the CSS
styling of the graphs. Finally, we've used the option from Timeline where we draw the x-axis (time-axis) on top.
<br /><br />
The <code>align</code> option can be used to align the bar at the center of the datapoint or on the left or right side of it.
This example uses the default center alignment.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11', y: 10},
{x: '2014-06-12', y: 25},
{x: '2014-06-13', y: 30},
{x: '2014-06-14', y: 10},
{x: '2014-06-15', y: 15},
{x: '2014-06-16', y: 30}
];
var dataset = new vis.DataSet(items);
var options = {
style:'bar',
barChart: {width:50, align:'center'}, // align: left, center, right
drawPoints: false,
dataAxis: {
icons:true
},
orientation:'top',
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2d(container, items, options);
</script>
</body>
</html>

+ 0
- 112
www2/examples/graph2d/03_groups.html View File

@ -1,112 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Groups Example</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Groups Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the groups functionality within Graph2d. This works in the same way as it does in Timeline,
We have however simplified the constructor to accept groups as well to shorten the code. These groups are the
method used in Graph2d to define individual graphs. These groups can be given an individual class as well as all the
styling options you can supply to Graph2d! This example, as well as the ones that follow will showcase a few different usages
of these options. <br /> <br />
This example also introduces the automatically generated legend. The icons are automatically generated and the label is the
content as you define it in the groups. If you have datapoints that are not part of a group, a default group is created with the label: 'default'.
In this example, the setting <code>defaultGroup</code> is used to rename the default group to 'ungrouped'.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
// create a dataSet with groups
var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
options: {
drawPoints: {
style: 'square' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
}});
groups.add({
id: 1,
content: names[1],
options: {
style:'bar'
}});
groups.add({
id: 2,
content: names[2],
options: {drawPoints: false}
});
groups.add({
id: 3,
content: names[3],
options: {
drawPoints: {
style: 'circle' // square, circle
},
shaded: {
orientation: 'top' // top, bottom
}
}});
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-13', y: 60},
{x: '2014-06-14', y: 40},
{x: '2014-06-15', y: 55},
{x: '2014-06-16', y: 40},
{x: '2014-06-17', y: 50},
{x: '2014-06-13', y: 30, group: 0},
{x: '2014-06-14', y: 10, group: 0},
{x: '2014-06-15', y: 15, group: 1},
{x: '2014-06-16', y: 30, group: 1},
{x: '2014-06-17', y: 10, group: 1},
{x: '2014-06-18', y: 15, group: 1},
{x: '2014-06-19', y: 52, group: 1},
{x: '2014-06-20', y: 10, group: 1},
{x: '2014-06-21', y: 20, group: 2},
{x: '2014-06-22', y: 60, group: 2},
{x: '2014-06-23', y: 10, group: 2},
{x: '2014-06-24', y: 25, group: 2},
{x: '2014-06-25', y: 30, group: 2},
{x: '2014-06-26', y: 20, group: 3},
{x: '2014-06-27', y: 60, group: 3},
{x: '2014-06-28', y: 10, group: 3},
{x: '2014-06-29', y: 25, group: 3},
{x: '2014-06-30', y: 30, group: 3}
];
var dataset = new vis.DataSet(items);
var options = {
defaultGroup: 'ungrouped',
legend: true,
start: '2014-06-10',
end: '2014-07-04'
};
var graph2d = new vis.Graph2d(container, dataset, groups, options);
</script>
</body>
</html>

+ 0
- 126
www2/examples/graph2d/04_rightAxis.html View File

@ -1,126 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Right Axis Example</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
.customStyle1 {
fill: #0df200;
fill-opacity:0;
stroke-width:2px;
stroke: #0df200;
}
.customStyle2 {
fill: #f23303;
fill-opacity:0;
stroke-width:2px;
stroke: #ff0004;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Right Axis Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the all of the graphs outlined on the right side using the <code>yAxisOrientation</code> option.
We also show a few custom styles for the graph and show icons on the axis, which are adhering to the custom styling.
Finally, the legend is manually positioned. Both the left and right axis
have their own legend. If one of the axis is unused, the legend is not shown. The options for the legend have been split
in a <code>left</code> and a <code>right</code> segment. Since this example shows the right axis, the right legend is configured.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
// create a dataSet with groups
var names = ['Custom1', 'Custom2', 'Blank', 'CircleShaded'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
className: 'customStyle1',
options: {
drawPoints: {
style: 'square' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
}});
groups.add({
id: 1,
content: names[1],
className: 'customStyle2',
options: {
style:'bar',
drawPoints: {style: 'circle',
size: 10
}
}});
groups.add({
id: 2,
content: names[2],
options: {
drawPoints: false
}
});
groups.add({
id: 3,
content: names[3],
options: {
drawPoints: {
style: 'circle' // square, circle
},
shaded: {
orientation: 'top' // top, bottom
}
}});
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-13', y: 30, group: 0},
{x: '2014-06-14', y: 10, group: 0},
{x: '2014-06-15', y: 15, group: 1},
{x: '2014-06-16', y: 30, group: 1},
{x: '2014-06-17', y: 10, group: 1},
{x: '2014-06-18', y: 15, group: 1},
{x: '2014-06-19', y: 52, group: 1},
{x: '2014-06-20', y: 10, group: 1},
{x: '2014-06-21', y: 20, group: 2},
{x: '2014-06-22', y: 60, group: 2},
{x: '2014-06-23', y: 10, group: 2},
{x: '2014-06-24', y: 50, group: 2},
{x: '2014-06-25', y: 30, group: 2},
{x: '2014-06-26', y: 20, group: 3},
{x: '2014-06-27', y: 60, group: 3},
{x: '2014-06-28', y: 10, group: 3},
{x: '2014-06-29', y: 85, group: 3},
{x: '2014-06-30', y: 30, group: 3}
];
var dataset = new vis.DataSet(items);
var options = {
legend: {right: {position: 'top-left'}},
yAxisOrientation: 'right', // right, left
dataAxis: {icons: true},
start: '2014-06-10',
end: '2014-07-04',
movable: false
};
var graph2d = new vis.Graph2d(container, dataset, groups, options);
</script>
</body>
</html>

+ 0
- 138
www2/examples/graph2d/05_bothAxis.html View File

@ -1,138 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Both Axis Example</title>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font-family: sans-serif;
}
.customStyle1 {
fill: #f2ea00;
fill-opacity:0;
stroke-width:2px;
stroke: #b3ab00;
}
.customStyle2 {
fill: #00a0f2;
fill-opacity:0;
stroke-width:2px;
stroke: #050092;
}
.customStyle3 {
fill: #00f201;
fill-opacity:0;
stroke-width:2px;
stroke: #029200;
}
path.customStyle3.fill {
fill-opacity:0.5 !important;
stroke: none;
}
</style>
<script src="../../dist/vis.js"></script>
</head>
<body>
<h2>Graph2d | Both Axis Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the some of the graphs outlined on the right side using the <code>yAxisOrientation</code> option within the groups.
We also show a few more custom styles for the graphs. Finally, the legend is manually positioned. Both the left and right axis
have their own legend. If one of the axis is unused, the legend is not shown. The options for the legend have been split
in a <code>left</code> and a <code>right</code> segment. The default position of the left axis has been changed.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
// create a dataSet with groups
var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
className: 'customStyle1',
options: {
drawPoints: {
style: 'square' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
}});
groups.add({
id: 1,
content: names[1],
className: 'customStyle2',
options: {
style:'bar',
drawPoints: {style: 'circle',
size: 10
}
}});
groups.add({
id: 2,
content: names[2],
options: {
yAxisOrientation: 'right', // right, left
drawPoints: false
}
});
groups.add({
id: 3,
content: names[3],
className: 'customStyle3',
options: {
yAxisOrientation: 'right', // right, left
drawPoints: {
style: 'circle' // square, circle
},
shaded: {
orientation: 'top' // top, bottom
}
}});
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-12', y: 0 , group: 0},
{x: '2014-06-13', y: 30, group: 0},
{x: '2014-06-14', y: 10, group: 0},
{x: '2014-06-15', y: 15, group: 1},
{x: '2014-06-16', y: 30, group: 1},
{x: '2014-06-17', y: 10, group: 1},
{x: '2014-06-18', y: 15, group: 1},
{x: '2014-06-19', y: 52, group: 1},
{x: '2014-06-20', y: 10, group: 1},
{x: '2014-06-21', y: 20, group: 2},
{x: '2014-06-22', y: 600, group: 2},
{x: '2014-06-23', y: 100, group: 2},
{x: '2014-06-24', y: 250, group: 2},
{x: '2014-06-25', y: 300, group: 2},
{x: '2014-06-26', y: 200, group: 3},
{x: '2014-06-27', y: 600, group: 3},
{x: '2014-06-28', y: 1000, group: 3},
{x: '2014-06-29', y: 250, group: 3},
{x: '2014-06-30', y: 300, group: 3}
];
var dataset = new vis.DataSet(items);
var options = {
dataAxis: {showMinorLabels: false},
legend: {left:{position:"bottom-left"}},
start: '2014-06-09',
end: '2014-07-03'
};
var graph2d = new vis.Graph2d(container, dataset, groups, options);
</script>
</body>
</html>

+ 0
- 101
www2/examples/graph2d/06_interpolation.html View File

@ -1,101 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Interpolation</title>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
</head>
<body>
<h2>Graph2d | Interpolation</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
The Graph2d makes use of <a href="http://en.wikipedia.org/wiki/Centripetal_Catmull%E2%80%93Rom_spline" target="_blank">Catmull-Rom spline interpolation</a>.
The user can configure these per group, or globally. In this example we show all 4 possiblities. The differences are in the parametrization of
the curves. The options are <code>uniform</code>, <code>chordal</code> and <code>centripetal</code>. Alternatively you can disable the Catmull-Rom interpolation and
a linear interpolation will be used. The <code>centripetal</code> parametrization produces the best result (no self intersection, yet follows the line closely) and is therefore the default setting.
<br /><br />
For both the <code>centripetal</code> and <code>chordal</code> parametrization, the distances between the points have to be calculated and this makes these methods computationally intensive
if there are very many points. The <code>uniform</code> parametrization still has to do transformations, though it does not have to calculate the distance between point. Finally, the
linear interpolation is the fastest method. For more on the Catmull-Rom method, <a href="http://www.cemyuksel.com/research/catmullrom_param/catmullrom.pdf" target="_blank">C. Yuksel et al. have an interesting paper titled &Prime;On the parametrization of Catmull-Rom Curves&Prime;</a>.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
// create a dataSet with groups
var names = ['centripetal', 'chordal', 'uniform', 'disabled'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
options: {
drawPoints: false,
catmullRom: {
parametrization: 'centripetal'
}
}});
groups.add({
id: 1,
content: names[1],
options: {
drawPoints: false,
catmullRom: {
parametrization: 'chordal'
}
}});
groups.add({
id: 2,
content: names[2],
options: {
drawPoints: false,
catmullRom: {
parametrization: 'uniform'
}
}
});
groups.add({
id: 3,
content: names[3],
options: {
drawPoints: { style: 'circle' },
catmullRom: false
}});
var container = document.getElementById('visualization');
var dataset = new vis.DataSet();
for (var i = 0; i < names.length; i++) {
dataset.add( [
{x: '2014-06-12', y: 0 , group: i},
{x: '2014-06-13', y: 40, group: i},
{x: '2014-06-14', y: 10, group: i},
{x: '2014-06-15', y: 15, group: i},
{x: '2014-06-15', y: 30, group: i},
{x: '2014-06-17', y: 10, group: i},
{x: '2014-06-18', y: 15, group: i},
{x: '2014-06-19', y: 52, group: i},
{x: '2014-06-20', y: 10, group: i},
{x: '2014-06-21', y: 20, group: i}
]);
}
var options = {
dataPoints: false,
dataAxis: {visible: false},
legend: true,
start: '2014-06-11',
end: '2014-06-22'
};
var graph2d = new vis.Graph2d(container, dataset, groups, options);
</script>
</body>
</html>

+ 0
- 74
www2/examples/graph2d/07_scrollingAndSorting.html View File

@ -1,74 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Scrolling and Sorting</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Scrolling and Sorting</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
You can determine the height of the Graph2d seperately from the height of the frame. If the <code>graphHeight</code>
is defined, and the <code>height</code> is not, the frame will auto-scale to accommodate the graphHeight. If the <code>height</code>
is defined as well, the user can scroll up and down vertically as well as horizontally to view the graph.
<br /><br />
Vertical scrolling is planned, though not yet available. The graphHeight also does not conform if only the <code>height</code> is defined.
<br /><br />
You can manually disable the automatic sorting of the datapoints by using the <code>sort</code> option. However, doing so does reduce the optimization
of the drawing so if you have a lot of points, keep <code>sort</code> turned on for the best results.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11', y: 10},
{x: '2014-06-12', y: 25},
{x: '2014-06-13', y: 30},
{x: '2014-06-14', y: 10},
{x: '2014-06-15', y: 15},
{x: '2014-06-16', y: 30},
{x: '2014-06-11', y: 100},
{x: '2014-06-12', y: 250},
{x: '2014-06-13', y: 300},
{x: '2014-06-14', y: 100},
{x: '2014-06-15', y: 150},
{x: '2014-06-16', y: 300},
{x: '2014-06-11', y: 400},
{x: '2014-06-12', y: 450},
{x: '2014-06-13', y: 400},
{x: '2014-06-14', y: 500},
{x: '2014-06-15', y: 420},
{x: '2014-06-16', y: 600},
{x: '2014-06-11', y: 810},
{x: '2014-06-12', y: 825},
{x: '2014-06-13', y: 830},
{x: '2014-06-14', y: 810},
{x: '2014-06-15', y: 815},
{x: '2014-06-16', y: 900}
];
var dataset = new vis.DataSet(items);
var options = {
legend: true,
sort: false,
defaultGroup: 'doodle',
graphHeight: '1500px',
height: '500px',
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2d(container, dataset, options);
</script>
</body>
</html>

+ 0
- 150
www2/examples/graph2d/08_performance.html View File

@ -1,150 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Performance</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
span.label {
width:150px;
display:inline-block;
}
</style>
<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Performance</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example is a test of the performance of the Graph2d. Select the amount of datapoints you want to plot and press draw.
You can choose between the style of the points as well as the interpolation method. This can only be toggled with the buttons.
The interpolation options may not look different for this dataset but you can see their effects clearly in example 7.
<br /><br />
Linear interpolation and no points are the settings that will render quickest. By default, Graph2d will downsample when there are more
than 1 point per pixel. This can be manually disabled at the cost of performance by using the <code>sampling</code> option.
</div>
<br />
<p>
<span class="label">Number of items:</span><input id="count" value="50000">
<input id="draw" type="button" value="draw" style="width:200px;"> <span id="description"><b>Click the draw button to load the data!</b></span>
<br />
<span class="label">Interpolation method:</span><input id="interpolation" value="linear">
<input id="toggleInterpolation" type="button" value="toggle Interpolation" style="width:200px;">
<br />
<span class="label">Points style:</span><input id="points" value="none">
<input id="togglePoints" type="button" value="toggle Points" style="width:200px;">
</p>
<div id="visualization"></div>
<script>
var points = 'none';
var interpolation = 'linear';
function togglePoints() {
var pointsOptions = {};
var pointsField = document.getElementById("points");
if (points == "none") {
points = 'circle';
pointsOptions = {drawPoints: {style: points}};
}
else if (points == "circle") {
points = 'square';
pointsOptions = {drawPoints: {style: points}};
}
else if (points == "square") {
points = 'none';
pointsOptions = {drawPoints: false};
}
pointsField.value = points;
graph2d.setOptions(pointsOptions);
}
function toggleInterpolation() {
var interpolationOptions = {};
var interpolationField = document.getElementById("interpolation");
if (interpolation == "linear") {
interpolation = 'centripetal';
interpolationOptions = {catmullRom: {parametrization: interpolation}};
}
else if (interpolation == "centripetal") {
interpolation = 'chordal';
interpolationOptions = {catmullRom: {parametrization: interpolation}};
}
else if (interpolation == "chordal") {
interpolation = 'uniform';
interpolationOptions = {catmullRom: {parametrization: interpolation}};
}
else if (interpolation == "uniform") {
interpolation = 'linear';
interpolationOptions = {catmullRom: false};
}
interpolationField.value = interpolation;
graph2d.setOptions(interpolationOptions);
}
// create a dataset with items
var now = moment().minutes(0).seconds(0).milliseconds(0);
var dataset = new vis.DataSet({
type: {start: 'ISODate', end: 'ISODate' }
});
var startPoint = now;
var endPoint = now + 3600000 * 5000;
// create data -- this is seperated into 3 functions so we can update the span.
function createData() {
var span = document.getElementById("description");
span.innerHTML = 'Generating data... (just javascript, not vis.graph2D)...';
setTimeout(generateData,10);
}
function generateData() {
var count = parseInt(document.getElementById('count').value) || 100;
var newData = [];
var span = document.getElementById("description");
var start = now;
for (var i = 0; i < count; i++) {
var yval = Math.sin(i/100) * Math.cos(i/50) * 50 + Math.sin(i/1000) * 50;
newData.push({id: i, x: start + 3600000 * i, y: yval});
}
span.innerHTML = 'Loading data into Graph2d...';
setTimeout(function() {loadDataIntoVis(newData);},10);
}
function loadDataIntoVis(newData) {
var span = document.getElementById("description");
dataset.clear();
dataset.add(newData);
span.innerHTML = 'Done!';
}
document.getElementById('draw').onclick = createData;
document.getElementById('toggleInterpolation').onclick = toggleInterpolation;
document.getElementById('togglePoints').onclick = togglePoints;
var container = document.getElementById('visualization');
var options = {
sampling: true,
drawPoints: {enabled:false, size:3},
catmullRom: false,
start: startPoint,
end: endPoint
};
var graph2d = new vis.Graph2d(container, dataset, options);
</script>
</body>
</html>

+ 0
- 367
www2/examples/graph2d/09_external_legend.html View File

@ -1,367 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | External legend Example</title>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font-family: sans-serif;
}
.customStyle1 {
fill: #f2ea00;
fill-opacity:0;
stroke-width:2px;
stroke: #b3ab00;
}
.customStyle2 {
fill: #00a0f2;
fill-opacity:0;
stroke-width:2px;
stroke: #050092;
}
.customStyle3 {
fill: #00f201;
fill-opacity:0;
stroke-width:2px;
stroke: #029200;
}
path.customStyle3.fill {
fill-opacity:0.5 !important;
stroke: none;
}
.graphGroup0 {
fill:#4f81bd;
fill-opacity:0;
stroke-width:2px;
stroke: #4f81bd;
}
.graphGroup1 {
fill:#f79646;
fill-opacity:0;
stroke-width:2px;
stroke: #f79646;
}
.graphGroup2 {
fill: #8c51cf;
fill-opacity:0;
stroke-width:2px;
stroke: #8c51cf;
}
.graphGroup3 {
fill: #75c841;
fill-opacity:0;
stroke-width:2px;
stroke: #75c841;
}
.graphGroup4 {
fill: #ff0100;
fill-opacity:0;
stroke-width:2px;
stroke: #ff0100;
}
.graphGroup5 {
fill: #37d8e6;
fill-opacity:0;
stroke-width:2px;
stroke: #37d8e6;
}
.graphGroup6 {
fill: #042662;
fill-opacity:0;
stroke-width:2px;
stroke: #042662;
}
.graphGroup7 {
fill:#00ff26;
fill-opacity:0;
stroke-width:2px;
stroke: #00ff26;
}
.graphGroup8 {
fill:#ff00ff;
fill-opacity:0;
stroke-width:2px;
stroke: #ff00ff;
}
.graphGroup9 {
fill: #8f3938;
fill-opacity:0;
stroke-width:2px;
stroke: #8f3938;
}
.fill {
fill-opacity:0.1;
stroke: none;
}
.bar {
fill-opacity:0.5;
stroke-width:1px;
}
.point {
stroke-width:2px;
fill-opacity:1.0;
}
.legendBackground {
stroke-width:1px;
fill-opacity:0.9;
fill: #ffffff;
stroke: #c2c2c2;
}
.outline {
stroke-width:1px;
fill-opacity:1;
fill: #ffffff;
stroke: #e5e5e5;
}
.iconFill {
fill-opacity:0.3;
stroke: none;
}
div.descriptionContainer {
float:left;
height:30px;
width:160px;
padding-left:5px;
padding-right:5px;
line-height: 30px;
}
div.iconContainer {
float:left;
}
div.legendElementContainer {
display:inline-block;
width:200px;
height:30px;
border-style:solid;
border-width:1px;
border-color: #e0e0e0;
background-color: #ffffff;
margin:4px;
padding:4px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor:pointer;
}
div.legendElementContainer.hidden {
background-color: #d3e6ff;
}
svg.legendIcon {
width:30px;
height:30px;
}
div.externalLegend {
position:relative;
margin-left: -5px;
width: 900px;
}
</style>
<script src="../../dist/vis.js"></script>
</head>
<body>
<h2>Graph2d | External custom legend</h2>
<div style="width:800px; font-size:14px; text-align: justify;">
This example shows how to create an external custom legend using the getLegend function. We use normal JavaScript to show and hide the
groups by updating the dataset.
</div>
<br />
<div id="Legend" class="externalLegend"></div>
<div id="visualization"></div>
<script type="text/javascript">
// create a dataSet with groups
var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
className: 'customStyle1',
options: {
drawPoints: {
style: 'square' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
}});
groups.add({
id: 1,
content: names[1],
className: 'customStyle2',
options: {
style:'bar',
drawPoints: {style: 'circle',
size: 10
}
}});
groups.add({
id: 2,
content: names[2],
options: {
yAxisOrientation: 'right', // right, left
drawPoints: false
}
});
groups.add({
id: 3,
content: names[3],
className: 'customStyle3',
options: {
yAxisOrientation: 'right', // right, left
drawPoints: {
style: 'circle' // square, circle
},
shaded: {
orientation: 'top' // top, bottom
}
}});
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-12', y: 0 , group: 0},
{x: '2014-06-13', y: 30, group: 0},
{x: '2014-06-14', y: 10, group: 0},
{x: '2014-06-15', y: 15, group: 1},
{x: '2014-06-16', y: 30, group: 1},
{x: '2014-06-17', y: 10, group: 1},
{x: '2014-06-18', y: 15, group: 1},
{x: '2014-06-19', y: 52, group: 1},
{x: '2014-06-20', y: 10, group: 1},
{x: '2014-06-21', y: 20, group: 2},
{x: '2014-06-22', y: 600, group: 2},
{x: '2014-06-23', y: 100, group: 2},
{x: '2014-06-24', y: 250, group: 2},
{x: '2014-06-25', y: 300, group: 2},
{x: '2014-06-26', y: 200, group: 3},
{x: '2014-06-27', y: 600, group: 3},
{x: '2014-06-28', y: 1000, group: 3},
{x: '2014-06-29', y: 250, group: 3},
{x: '2014-06-30', y: 300, group: 3}
];
var dataset = new vis.DataSet(items);
var options = {
dataAxis: {showMinorLabels: false},
start: '2014-06-09',
end: '2014-07-03'
};
var graph2d = new vis.Graph2d(container, items, groups, options);
/**
* this function fills the external legend with content using the getLegend() function.
*/
function populateExternalLegend() {
var groupsData = groups.get();
var legendDiv = document.getElementById("Legend");
legendDiv.innerHTML = "";
// get for all groups:
for (var i = 0; i < groupsData.length; i++) {
// create divs
var containerDiv = document.createElement("div");
var iconDiv = document.createElement("div");
var descriptionDiv = document.createElement("div");
// give divs classes and Ids where necessary
containerDiv.className = 'legendElementContainer';
containerDiv.id = groupsData[i].id + "_legendContainer"
iconDiv.className = "iconContainer";
descriptionDiv.className = "descriptionContainer";
// 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
// icons with the same classes if they are using the default ones.
legend.icon.setAttributeNS(null, "class", "legendIcon");
// append the legend to the corresponding divs
iconDiv.appendChild(legend.icon);
descriptionDiv.innerHTML = legend.label;
// determine the order for left and right orientation
if (legend.orientation == 'left') {
descriptionDiv.style.textAlign = "left";
containerDiv.appendChild(iconDiv);
containerDiv.appendChild(descriptionDiv);
}
else {
descriptionDiv.style.textAlign = "right";
containerDiv.appendChild(descriptionDiv);
containerDiv.appendChild(iconDiv);
}
// append to the legend container div
legendDiv.appendChild(containerDiv);
// bind click event to this legend element.
containerDiv.onclick = toggleGraph.bind(this,groupsData[i].id);
}
}
/**
* This function switchs the visible option of the selected group on an off.
* @param groupId
*/
function toggleGraph(groupId) {
// get the container that was clicked on.
var container = document.getElementById(groupId + "_legendContainer")
// if visible, hide
if (graph2d.isGroupVisible(groupId) == true) {
groups.update({id:groupId, visible:false});
container.className = container.className + " hidden";
}
else { // if invisible, show
groups.update({id:groupId, visible:true});
container.className = container.className.replace("hidden","");
}
}
populateExternalLegend()
</script>
</body>
</html>

+ 0
- 74
www2/examples/graph2d/10_barsSideBySide.html View File

@ -1,74 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Bar Graphs Side by Side Example</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Bar Graphs Side by Side Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
When using Bar graphs, it can often be the case that there are multiple bars on the same timepoint. This may not always be the desired result. You can use the
barChart.handleOverlap option to automatically plot the bars next to eachother or stacked on top of eachother if they occupy the same timeslot. By default, this option is on, the bars overlap.
Use the dropdown box to experiment with the options. The stacked only really makes sense when using groups as is shown in the <a href="./11_barsSideBySideGroups.html">next example</a>.
<br /><br />
Handle overlap: <select id="dropdownID">
<option value="overlap">overlap</option>
<option value="sideBySide">sideBySide</option>
<option value="stack">stack</option>
</select><br/>
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11', y: 10},
{x: '2014-06-12', y: 25},
{x: '2014-06-13', y: 30},
{x: '2014-06-14', y: 10},
{x: '2014-06-15', y: 15},
{x: '2014-06-16', y: 30},
{x: '2014-06-11', y: 12},
{x: '2014-06-14', y: 24},
{x: '2014-06-15', y: 5},
{x: '2014-06-16', y: 12}
];
var dataset = new vis.DataSet(items);
var options = {
style:'bar',
barChart: {width:50, align:'center'}, // align: left, center, right
drawPoints: false,
dataAxis: {
icons:true
},
orientation:'top',
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2d(container, items, options);
var dropdown = document.getElementById("dropdownID");
dropdown.onchange = update;
function update() {
var options = {barChart:{handleOverlap:dropdown.value}};
graph2d.setOptions(options);
}
</script>
</body>
</html>

+ 0
- 87
www2/examples/graph2d/11_barsSideBySideGroups.html View File

@ -1,87 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Bar Graphs Side by Side Example with Groups</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Bar Graphs Side by Side Example with Groups</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
When using Bar graphs, it can often be the case that there are multiple bars on the same timepoint. This may not always be the desired result. You can use the
barChart.handleOverlap option to automatically plot the bars next to eachother or stacked on top of eachother if they occupy the same timeslot. By default, this option is on, the bars overlap.
Use the dropdown box to experiment with the options. The stacked only really makes sense when using groups as is shown here.
<br /><br />
Handle overlap: <select id="dropdownID">
<option value="overlap">overlap</option>
<option value="sideBySide" selected="selected">sideBySide</option>
<option value="stack">stack</option>
</select>
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var groups = new vis.DataSet();
groups.add({id: 0, content: "group0"})
groups.add({id: 1, content: "group1"})
groups.add({id: 2, content: "group2"})
var items = [
{x: '2014-06-11', y: 10, group:0},
{x: '2014-06-12', y: 25, group:0},
{x: '2014-06-13', y: 30, group:0},
{x: '2014-06-14', y: 10, group:0},
{x: '2014-06-15', y: 15, group:0},
{x: '2014-06-16', y: 30, group:0},
{x: '2014-06-11', y: 12, group:1},
{x: '2014-06-12', y: 15, group:1},
{x: '2014-06-13', y: 34, group:1},
{x: '2014-06-14', y: 24, group:1},
{x: '2014-06-15', y: 5, group:1},
{x: '2014-06-16', y: 12, group:1},
{x: '2014-06-11', y: 22, group:2},
{x: '2014-06-12', y: 14, group:2},
{x: '2014-06-13', y: 24, group:2},
{x: '2014-06-14', y: 21, group:2},
{x: '2014-06-15', y: 30, group:2},
{x: '2014-06-16', y: 18, group:2}
];
var dataset = new vis.DataSet(items);
var options = {
style:'bar',
barChart: {width:50, align:'center', handleOverlap:'sideBySide'}, // align: left, center, right
drawPoints: false,
dataAxis: {
icons:true
},
orientation:'top',
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2d(container, items, groups, options);
var dropdown = document.getElementById("dropdownID");
dropdown.onchange = update;
function update() {
var options = {barChart:{handleOverlap:dropdown.value}};
graph2d.setOptions(options);
}
</script>
</body>
</html>

+ 0
- 96
www2/examples/graph2d/12_customRange.html View File

@ -1,96 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Bar Graph Example</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Custom axis range</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
You can define a custom range for the Y axis. Since there are two Y axis, you can define both of them. You can also
only define the min or max values. Since one of the Y axis is slaved to the other one (the right one is slaved to the left one),
you cannot absolutely define the range of the slaved axis because it has to use the same lines. The values you supply are used as guidelines however.
If the zero-lines have to be aligned, you can use the option alignZeros. It is enabled by default.
<pre class="prettyprint lang-js">
var options = {
dataAxis: {
customRange: {
left: {
min:-5, max:30
},
right: {
min:-5
}
}
}
};
</pre>
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var groups = new vis.DataSet();
groups.add({id: 0, content: "group0"})
groups.add({id: 1, content: "group1"})
groups.add({id: 2, content: "group2",options:{ yAxisOrientation:'right'}})
var items = [
{x: '2014-06-11', y: 10, group:0},
{x: '2014-06-12', y: 25, group:0},
{x: '2014-06-13', y: 30, group:0},
{x: '2014-06-14', y: 10, group:0},
{x: '2014-06-15', y: 15, group:0},
{x: '2014-06-16', y: 30, group:0},
{x: '2014-06-11', y: 12, group:1},
{x: '2014-06-12', y: 15, group:1},
{x: '2014-06-13', y: 34, group:1},
{x: '2014-06-14', y: 24, group:1},
{x: '2014-06-15', y: 5, group:1},
{x: '2014-06-16', y: 12, group:1},
{x: '2014-06-11', y: 22, group:2},
{x: '2014-06-12', y: 14, group:2},
{x: '2014-06-13', y: 24, group:2},
{x: '2014-06-14', y: 21, group:2},
{x: '2014-06-15', y: 30, group:2},
{x: '2014-06-16', y: 18, group:2}
];
var dataset = new vis.DataSet(items);
var options = {
style:'bar',
barChart: {width:50, align:'center', handleOverlap:"sideBySide"}, // align: left, center, right
drawPoints: true,
dataAxis: {
customRange: {
left: {
min:-5, max:30
},
right: {
min:-5
}
},
icons:true
},
orientation:'top',
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2d(container, items, groups, options);
</script>
</body>
</html>

+ 0
- 65
www2/examples/graph2d/13_localization.html View File

@ -1,65 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Graph2d | Localization</title>
<style type="text/css">
body, html, select {
font-family: sans-serif;
font-size: 11pt;
}
</style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment-with-langs.min.js"></script>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Localization</h2>
<p>
To localize Graph2d, one has to load a version of moment.js including locales. To set a locale, specify option <code>{locale: STRING}</code>.
</p>
<p>
<label for="locale">Select a locale:</label>
<select id="locale">
<option value="en" selected>en</option>
<option value="nl">nl</option>
</select>
</p>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11', y: 10},
{x: '2014-06-12', y: 25},
{x: '2014-06-13', y: 30},
{x: '2014-06-14', y: 10},
{x: '2014-06-15', y: 15},
{x: '2014-06-16', y: 30}
];
var dataset = new vis.DataSet(items);
var options = {
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2d(container, dataset, options);
// update the locale when changing the select box value
var select = document.getElementById('locale');
select.onchange = function () {
graph2d.setOptions({
locale: this.value
});
};
select.onchange();
</script>
</body>
</html>

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

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

+ 0
- 122
www2/examples/graph2d/15_streaming_data.html View File

@ -1,122 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Graph2d | Streaming data</title>
<style type="text/css">
body, html, select {
font: 10pt sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Streaming data</h2>
<p style="max-width: 700px;">
This example demonstrates how to apply streaming data input to the Graph2d. The example shows two different ways to let the window move along with the new data, and there are more strategies for that. Note also that it is possible to disable moving and/or zooming the graph by setting options <code>moveable</code> and <code>zoomable</code> false.
</p>
<p>
<label for="strategy">Strategy:</label>
<select id="strategy">
<option value="continuous" selected>Continuous (CPU intensive)</option>
<option value="discrete">Discrete</option>
<option value="static">Static</option>
</select>
</p>
<div id="visualization"></div>
<script type="text/javascript">
var DELAY = 1000; // delay in ms to add new data points
var strategy = document.getElementById('strategy');
// create a graph2d with an (currently empty) dataset
var container = document.getElementById('visualization');
var dataset = new vis.DataSet();
var options = {
start: vis.moment().add(-30, 'seconds'), // changed so its faster
end: vis.moment(),
dataAxis: {
customRange: {
left: {
min:-10, max: 10
}
}
},
drawPoints: {
style: 'circle' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
};
var graph2d = new vis.Graph2d(container, dataset, options);
// a function to generate data points
function y(x) {
return (Math.sin(x / 2) + Math.cos(x / 4)) * 5;
}
function renderStep() {
// move the window (you can think of different strategies).
var now = vis.moment();
var range = graph2d.getWindow();
var interval = range.end - range.start;
switch (strategy.value) {
case 'continuous':
// continuously move the window
graph2d.setWindow(now - interval, now, {animate: false});
requestAnimationFrame(renderStep);
break;
case 'discrete':
graph2d.setWindow(now - interval, now, {animate: false});
setTimeout(renderStep, DELAY);
break;
default: // 'static'
// move the window 90% to the left when now is larger than the end of the window
if (now > range.end) {
graph2d.setWindow(now - 0.1 * interval, now + 0.9 * interval);
}
setTimeout(renderStep, DELAY);
break;
}
}
renderStep();
/**
* Add a new datapoint to the graph
*/
function addDataPoint() {
// add a new data point to the dataset
var now = vis.moment();
dataset.add({
x: now,
y: y(now / 1000)
});
// remove all data points which are no longer visible
var range = graph2d.getWindow();
var interval = range.end - range.start;
var oldIds = dataset.getIds({
filter: function (item) {
return item.x < range.start - interval;
}
});
dataset.remove(oldIds);
setTimeout(addDataPoint, DELAY);
}
addDataPoint();
</script>
</body>
</html>

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

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

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

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

+ 0
- 63
www2/examples/graph2d/18_scatterplot.html View File

@ -1,63 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Scatterplot</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Scatterplot</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
You can manually disable the automatic sorting of the datapoints by using the <code>sort</code> option. You can use this with the
<code>style: 'points'</code> option for making a scatterplot!
</div>
<pre class="prettyprint lang-js">
var options = {
sort: false,
sampling:false,
style:'points'
};
</pre>
<br />
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [];
for (var i = 0; i < 100; i++) {
items.push({x: new Date('2014-06-11').valueOf() + Math.floor(Math.random() * 30000), y: 500 + (Math.random() * 100)});
}
var dataset = new vis.DataSet(items);
var options = {
sort: false,
sampling:false,
style:'points',
dataAxis: {
customRange: {
left: {
min: 300, max: 800
}
}
},
drawPoints: {
enabled: true,
size: 6,
style: 'circle' // square, circle
},
defaultGroup: 'Scatterplot',
height: '600px'
};
var graph2d = new vis.Graph2d(container, dataset, options);
</script>
</body>
</html>

+ 0
- 87
www2/examples/graph2d/default.css View File

@ -1,87 +0,0 @@
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body, td, th {
font-family: arial, sans-serif;
font-size: 11pt;
color: #4D4D4D;
line-height: 1.7em;
}
#container {
margin: 0 auto;
padding-bottom: 50px;
width: 900px;
}
h1 {
font-size: 180%;
font-weight: bold;
padding: 0;
margin: 1em 0 1em 0;
}
h2 {
padding-top: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #a0c0f0;
color: #2B7CE9;
}
h3 {
font-size: 140%;
}
a {
color: #2B7CE9;
text-decoration: none;
}
a:visited {
color: #2E60A4;
}
a:hover {
color: red;
text-decoration: underline;
}
hr {
border: none 0;
border-top: 1px solid #abc;
height: 1px;
}
pre {
display: block;
font-size: 10pt;
line-height: 1.5em;
font-family: monospace;
}
pre, code {
background-color: #f5f5f5;
}
table
{
border-collapse: collapse;
}
th {
font-weight: bold;
border: 1px solid lightgray;
background-color: #E5E5E5;
text-align: left;
vertical-align: top;
padding: 5px;
}
td {
border: 1px solid lightgray;
padding: 5px;
vertical-align: top;
}

+ 0
- 31
www2/examples/graph2d/index.html View File

@ -1,31 +0,0 @@
<html>
<head>
<link rel='stylesheet' href='default.css' type='text/css'>
</head>
<body>
<div id="container">
<h1>Graph2d Examples</h1>
<p><a href="01_basic.html">01_basic.html</a></p>
<p><a href="02_bars.html">02_bars.html</a></p>
<p><a href="03_groups.html">03_groups.html</a></p>
<p><a href="04_rightAxis.html">04_rightAxis.html</a></p>
<p><a href="05_bothAxis.html">05_bothAxis.html</a></p>
<p><a href="06_interpolation.html">06_interpolation.html</a></p>
<p><a href="07_scrollingAndSorting.html">07_scrollingAndSorting.html</a></p>
<p><a href="08_performance.html">08_performance.html</a></p>
<p><a href="09_external_legend.html">09_external_legend.html</a></p>
<p><a href="10_barsSideBySide.html">10_barsSideBySide.html</a></p>
<p><a href="11_barsSideBySideGroups.html">11_barsSideBySideGroups.html</a></p>
<p><a href="12_customRange.html">12_customRange.html</a></p>
<p><a href="13_localization.html">13_localization.html</a></p>
<p><a href="14_toggleGroups.html">14_toggleGroups.html</a></p>
<p><a href="15_streaming_data.html">15_streaming_data.html</a></p>
<p><a href="16_bothAxis_titles.html">16_bothAxis_titles.html</a></p>
<p><a href="17_dynamicStyling.html">17_dynamicStyling.html</a></p>
<p><a href="18_scatterplot.html">18_scatterplot.html</a></p>
</div>
</body>
</html>

+ 0
- 87
www2/examples/graph3d/default.css View File

@ -1,87 +0,0 @@
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body, td, th {
font-family: arial, sans-serif;
font-size: 11pt;
color: #4D4D4D;
line-height: 1.7em;
}
#container {
margin: 0 auto;
padding-bottom: 50px;
width: 900px;
}
h1 {
font-size: 180%;
font-weight: bold;
padding: 0;
margin: 1em 0 1em 0;
}
h2 {
padding-top: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #a0c0f0;
color: #2B7CE9;
}
h3 {
font-size: 140%;
}
a {
color: #2B7CE9;
text-decoration: none;
}
a:visited {
color: #2E60A4;
}
a:hover {
color: red;
text-decoration: underline;
}
hr {
border: none 0;
border-top: 1px solid #abc;
height: 1px;
}
pre {
display: block;
font-size: 10pt;
line-height: 1.5em;
font-family: monospace;
}
pre, code {
background-color: #f5f5f5;
}
table
{
border-collapse: collapse;
}
th {
font-weight: bold;
border: 1px solid lightgray;
background-color: #E5E5E5;
text-align: left;
vertical-align: top;
padding: 5px;
}
td {
border: 1px solid lightgray;
padding: 5px;
vertical-align: top;
}

+ 0
- 60
www2/examples/graph3d/example01_basis.html View File

@ -1,60 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D demo</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function custom(x, y) {
return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
}
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet();
// create some nice looking data with sin/cos
var counter = 0;
var steps = 50; // number of datapoints will be steps*steps
var axisMax = 314;
var axisStep = axisMax / steps;
for (var x = 0; x < axisMax; x+=axisStep) {
for (var y = 0; y < axisMax; y+=axisStep) {
var value = custom(x,y);
data.add({id:counter++,x:x,y:y,z:value,style:value});
}
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'surface',
showPerspective: true,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5
};
// Instantiate our graph object.
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
}
</script>
</head>
<body onload="drawVisualization();">
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

+ 0
- 109
www2/examples/graph3d/example02_camera.html View File

@ -1,109 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D camera position</title>
<style>
body {font: 10pt arial;}
td {font: 10pt arial}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function custom(x, y) {
return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
}
// callback function, called when the camera position has changed
function onCameraPositionChange() {
// adjust the values of startDate and endDate
var pos = graph.getCameraPosition();
document.getElementById('horizontal').value = parseFloat(pos.horizontal.toFixed(3));
document.getElementById('vertical').value = parseFloat(pos.vertical.toFixed(3));
document.getElementById('distance').value = parseFloat(pos.distance.toFixed(3));
}
// set the camera position
function setCameraPosition() {
var horizontal = parseFloat(document.getElementById('horizontal').value);
var vertical = parseFloat(document.getElementById('vertical').value);
var distance = parseFloat(document.getElementById('distance').value);
var pos = {
horizontal: horizontal,
vertical: vertical,
distance: distance
};
graph.setCameraPosition(pos);
// retrieve the camera position again, to get the applied values
onCameraPositionChange();
}
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet();
// create some nice looking data with sin/cos
var steps = 50; // number of datapoints will be steps*steps
var axisMax = 314;
var axisStep = axisMax / steps;
for (var x = 0; x < axisMax; x+=axisStep) {
for (var y = 0; y < axisMax; y+=axisStep) {
var value = custom(x,y);
data.add([
{x:x,y:y,z:value,t:0,style:value}
]);
}
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'surface',
showPerspective: true,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5
};
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
graph.on('cameraPositionChange', onCameraPositionChange);
}
</script>
</head>
<body onload="drawVisualization()">
<h1>Graph 3d camera position</h1>
<table>
<tr>
<td>Horizontal angle (0 to 2*pi)</td>
<td><input type="text" id="horizontal" value="1.0"></td>
</tr>
<tr>
<td>Vertical angle (0 to 0.5*pi)</td>
<td><input type="text" id="vertical" value="0.5"></td>
</tr>
<tr>
<td>Distance (0.71 to 5.0)</td>
<td><input type="text" id="distance" value="1.7"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Set" onclick="setCameraPosition();"></td>
</tr>
</table>
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

+ 0
- 63
www2/examples/graph3d/example03_filter.html View File

@ -1,63 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D demo</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function custom(x, y) {
return Math.sin(x/50) * Math.cos(y/50) * 50 + 50;
}
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
data = [];
// create some nice looking data with sin/cos
var steps = 50; // number of datapoints will be steps*steps
var axisMax = 314;
var axisStep = axisMax / steps;
for (var x = 0; x < axisMax; x+=axisStep) {
for (var y = 0; y < axisMax; y+=axisStep) {
var value = custom(x,y);
var valueRange = (value > 67) ? '67-100' :
(value < 33) ? '0-33' :
'33-67';
data.push({x:x,y:y,z:value,filter:valueRange,style:value});
}
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'surface',
showPerspective: false,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5,
filterLabel: 'values'
};
// Create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
}
</script>
</head>
<body onload="drawVisualization()">
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

+ 0
- 70
www2/examples/graph3d/example04_animate.html View File

@ -1,70 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D animation demo</title>
<style type="text/css">
body {
font: 10pt arial;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function custom(x, y, t) {
return Math.sin(x/50 + t/10) * Math.cos(y/50 + t/10) * 50 + 50;
}
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet();
// create some nice looking data with sin/cos
var steps = 25;
var axisMax = 314;
var tMax = 31;
var axisStep = axisMax / steps;
for (var t = 0; t < tMax; t++) {
for (var x = 0; x < axisMax; x+=axisStep) {
for (var y = 0; y < axisMax; y+=axisStep) {
var value = custom(x, y, t);
data.add([
{x:x,y:y,z:value,filter:t,style:value}
]);
}
}
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'surface',
showPerspective: true,
showGrid: true,
showShadow: false,
// showAnimationControls: false,
keepAspectRatio: true,
verticalRatio: 0.5,
animationInterval: 100, // milliseconds
animationPreload: true,
filterValue: 'time'
};
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
}
</script>
</head>
<body onload="drawVisualization();">
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

+ 0
- 59
www2/examples/graph3d/example05_line.html View File

@ -1,59 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D line demo</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet();
// create some nice looking data with sin/cos
var steps = 500;
var axisMax = 314;
var tmax = 4 * 2 * Math.PI;
var axisStep = axisMax / steps;
for (var t = 0; t < tmax; t += tmax / steps) {
var r = 1;
var x = r * Math.sin(t);
var y = r * Math.cos(t);
var z = t / tmax;
data.add({x:x,y:y,z:z});
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'line',
showPerspective: false,
showGrid: true,
keepAspectRatio: true,
verticalRatio: 1.0
};
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
graph.setCameraPosition(0.4, undefined, undefined);
}
</script>
</head>
<body onload="drawVisualization()">
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

+ 0
- 77
www2/examples/graph3d/example06_moving_dots.html View File

@ -1,77 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D animation moving dots</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
// Called when the Visualization API is loaded.
function drawVisualization() {
// create the data table.
data = new vis.DataSet();
// create some shortcuts to math functions
var sin = Math.sin;
var cos = Math.cos;
var pi = Math.PI;
// create the animation data
var tmax = 2.0 * pi;
var tstep = tmax / 75;
var dotCount = 1; // set this to 1, 2, 3, 4, ...
for (var t = 0; t < tmax; t += tstep) {
var tgroup = parseFloat(t.toFixed(2));
var value = t;
// a dot in the center
data.add( {x:0,y:0,z:0,filter:tgroup,style:value});
// one or multiple dots moving around the center
for (var dot = 0; dot < dotCount; dot++) {
var tdot = t + 2*pi * dot / dotCount;
data.add( {x:sin(tdot),y:cos(tdot),z:sin(tdot),filter:tgroup,style:value});
data.add( {x:sin(tdot),y:-cos(tdot),z:sin(tdot + tmax*1/2),filter:tgroup,style:value});
}
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'dot-color',
showPerspective: true,
showGrid: true,
keepAspectRatio: true,
verticalRatio: 1.0,
animationInterval: 35, // milliseconds
animationPreload: false,
animationAutoStart: true,
legendLabel: 'color value',
cameraPosition: {
horizontal: 2.7,
vertical: 0.0,
distance: 1.65
}
};
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
}
</script>
</head>
<body onload="drawVisualization();">
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

+ 0
- 67
www2/examples/graph3d/example07_dot_cloud_colors.html View File

@ -1,67 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D cloud with colored dots</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
// Called when the Visualization API is loaded.
function drawVisualization() {
// create the data table.
data = new vis.DataSet();
// create some shortcuts to math functions
var sqrt = Math.sqrt;
var pow = Math.pow;
var random = Math.random;
// create the animation data
var imax = 100;
for (var i = 0; i < imax; i++) {
var x = pow(random(), 2);
var y = pow(random(), 2);
var z = pow(random(), 2);
var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
data.add({x:x,y:y,z:z,style:dist});
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'dot-color',
showPerspective: true,
showGrid: true,
keepAspectRatio: true,
verticalRatio: 1.0,
legendLabel: 'distance',
cameraPosition: {
horizontal: -0.35,
vertical: 0.22,
distance: 1.8
}
};
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
}
</script>
</head>
<body onload="drawVisualization()">
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

+ 0
- 67
www2/examples/graph3d/example08_dot_cloud_size.html View File

@ -1,67 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D cloud with sized dots</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
// Called when the Visualization API is loaded.
function drawVisualization() {
// create the data table.
data = new vis.DataSet();
// create some shortcuts to math functions
var sqrt = Math.sqrt;
var pow = Math.pow;
var random = Math.random;
// create the animation data
var imax = 100;
for (var i = 0; i < imax; i++) {
var x = pow(random(), 2);
var y = pow(random(), 2);
var z = pow(random(), 2);
var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
var range = sqrt(2) - dist;
data.add({x:x,y:y,z:z,style:range});
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'dot-size',
showPerspective: false,
showGrid: true,
keepAspectRatio: true,
legendLabel:'value',
verticalRatio: 1.0,
cameraPosition: {
horizontal: -0.54,
vertical: 0.5,
distance: 1.6
}
};
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
}
</script>
</head>
<body onload="drawVisualization()">
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

+ 0
- 78
www2/examples/graph3d/example09_mobile.html View File

@ -1,78 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D demo</title>
<style>
html, body {
font: 10pt arial;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#mygraph {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<!-- for mobile devices like android and iphone -->
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function custom(x, y) {
return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
}
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet();
// create some nice looking data with sin/cos
var steps = 10; // number of datapoints will be steps*steps
var axisMax = 314;
var axisStep = axisMax / steps;
for (var x = 0; x < axisMax; x+=axisStep) {
for (var y = 0; y < axisMax; y+=axisStep) {
var value = custom(x,y);
data.add([
{x:x,y:y,z:value}
]);
}
}
// specify options
var options = {
width: '100%',
height: '100%',
style: 'surface',
showPerspective: true,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5,
backgroundColor: {
strokeWidth: 0
}
};
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
}
</script>
</head>
<body onresize="graph.redraw();" onload="drawVisualization()">
<div id="mygraph"></div>
</body>
</html>

+ 0
- 120
www2/examples/graph3d/example10_styles.html View File

@ -1,120 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D styles</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function custom(x, y) {
return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
}
// Called when the Visualization API is loaded.
function drawVisualization() {
var style = document.getElementById('style').value;
var showPerspective = document.getElementById('perspective').checked;
var xBarWidth = parseFloat(document.getElementById('xBarWidth').value) || undefined;
var yBarWidth = parseFloat(document.getElementById('yBarWidth').value) || undefined;
var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
// Create and populate a data table.
data = [];
// create some nice looking data with sin/cos
var steps = 5; // number of datapoints will be steps*steps
var axisMax = 10;
var axisStep = axisMax / steps;
for (var x = 0; x <= axisMax; x+=axisStep) {
for (var y = 0; y <= axisMax; y+=axisStep) {
var z = custom(x,y);
if (withValue) {
var value = (y - x);
data.push({x:x, y:y, z: z, style:value});
}
else {
data.push({x:x, y:y, z: z});
}
}
}
// specify options
var options = {
width: '600px',
height: '600px',
style: style,
xBarWidth: xBarWidth,
yBarWidth: yBarWidth,
showPerspective: showPerspective,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5
};
var camera = graph ? graph.getCameraPosition() : null;
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
if (camera) graph.setCameraPosition(camera); // restore camera position
document.getElementById('style').onchange = drawVisualization;
document.getElementById('perspective').onchange = drawVisualization;
document.getElementById('xBarWidth').onchange = drawVisualization;
document.getElementById('yBarWidth').onchange = drawVisualization;
}
</script>
</head>
<body onload="drawVisualization()">
<p>
<label for="style"> Style:
<select id="style">
<option value="bar">bar</option>
<option value="bar-color">bar-color</option>
<option value="bar-size">bar-size</option>
<option value="dot">dot</option>
<option value="dot-line">dot-line</option>
<option value="dot-color">dot-color</option>
<option value="dot-size">dot-size</option>
<option value="grid">grid</option>
<option value="line">line</option>
<option value="surface">surface</option>
</select>
</label>
</p>
<p>
<label for="perspective">
<input type="checkbox" id="perspective" checked> Show perspective
</label>
</p>
<p>
<label for="xBarWidth"> Bar width X:
<input type="text" id="xBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color")
</label>
</p>
<p>
<label for="yBarWidth"> Bar width Y:
<input type="text" id="yBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color")
</label>
</p>
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

+ 0
- 103
www2/examples/graph3d/example11_tooltips.html View File

@ -1,103 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D tooltips</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function custom(x, y) {
return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
}
// Called when the Visualization API is loaded.
function drawVisualization() {
var style = document.getElementById('style').value;
var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
// Create and populate a data table.
data = new vis.DataSet();
// create some nice looking data with sin/cos
var steps = 5; // number of datapoints will be steps*steps
var axisMax = 10;
var axisStep = axisMax / steps;
for (var x = 0; x <= axisMax; x+=axisStep) {
for (var y = 0; y <= axisMax; y+=axisStep) {
var z = custom(x,y);
if (withValue) {
var value = (y - x);
data.add({x:x, y:y, z: z, style:value});
}
else {
data.add({x:x, y:y, z: z});
}
}
}
// specify options
var options = {
width: '600px',
height: '600px',
style: style,
showPerspective: 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>';
},
keepAspectRatio: true,
verticalRatio: 0.5
};
var camera = graph ? graph.getCameraPosition() : null;
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
if (camera) graph.setCameraPosition(camera); // restore camera position
document.getElementById('style').onchange = drawVisualization;
}
</script>
</head>
<body onload="drawVisualization()">
<p>
<label for="style"> Style:
<select id="style">
<option value="bar">bar</option>
<option value="bar-color">bar-color</option>
<option value="bar-size">bar-size</option>
<option value="dot">dot</option>
<option value="dot-line">dot-line</option>
<option value="dot-color">dot-color</option>
<option value="dot-size">dot-size</option>
<option value="grid">grid</option>
<option value="line">line</option>
<option value="surface">surface</option>
</select>
</label>
</p>
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

+ 0
- 115
www2/examples/graph3d/example12_ticks.html View File

@ -1,115 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D Axis Ticks</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function custom(x, y) {
return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10) * 1000;
}
// Called when the Visualization API is loaded.
function drawVisualization() {
var style = document.getElementById('style').value;
var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
// Create and populate a data table.
data = new vis.DataSet();
// create some nice looking data with sin/cos
var steps = 5; // number of datapoints will be steps*steps
var axisMax = 10;
var axisStep = axisMax / steps;
for (var x = 0; x <= axisMax; x+=axisStep) {
for (var y = 0; y <= axisMax; y+=axisStep) {
var z = custom(x,y);
if (withValue) {
var value = (y - x);
data.add({x:x, y:y, z: z, style:value});
}
else {
data.add({x:x, y:y, z: z});
}
}
}
// specify options
var options = {
width: '600px',
height: '600px',
style: style,
showPerspective: 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>';
},
xValueLabel: function(value) {
return vis.moment().add(value, 'days').format('DD MMM');
},
yValueLabel: function(value) {
return value * 10 + '%';
},
zValueLabel: function(value) {
return value / 1000 + 'K';
},
keepAspectRatio: true,
verticalRatio: 0.5
};
var camera = graph ? graph.getCameraPosition() : null;
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
if (camera) graph.setCameraPosition(camera); // restore camera position
document.getElementById('style').onchange = drawVisualization;
}
</script>
</head>
<body onload="drawVisualization()">
<p>
<label for="style"> Style:
<select id="style">
<option value="bar">bar</option>
<option value="bar-color">bar-color</option>
<option value="bar-size">bar-size</option>
<option value="dot">dot</option>
<option value="dot-line">dot-line</option>
<option value="dot-color">dot-color</option>
<option value="dot-size">dot-size</option>
<option value="grid">grid</option>
<option value="line">line</option>
<option value="surface">surface</option>
</select>
</label>
</p>
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

+ 0
- 28
www2/examples/graph3d/index.html View File

@ -1,28 +0,0 @@
<html>
<head>
<link rel='stylesheet' href='default.css' type='text/css'>
</head>
<body>
<div id="container">
<h1>Examples</h1>
<p><a href="example01_basis.html">example01_basis.html</a></p>
<p><a href="example02_camera.html">example02_camera.html</a></p>
<p><a href="example03_filter.html">example03_filter.html</a></p>
<p><a href="example04_animate.html">example04_animate.html</a></p>
<p><a href="example05_line.html">example05_line.html</a></p>
<p><a href="example06_moving_dots.html">example06_moving_dots.html</a></p>
<p><a href="example07_dot_cloud_colors.html">example07_dot_cloud_colors.html</a></p>
<p><a href="example08_dot_cloud_size.html">example08_dot_cloud_size.html</a></p>
<p><a href="example09_mobile.html">example09_mobile.html</a></p>
<p><a href="example10_styles.html">example10_styles.html</a></p>
<p><a href="example11_tooltips.html">example11_tooltips.html</a></p>
<p><a href="example12_ticks.html">example12_ticks.html</a></p>
<h1>Playground</h1>
<p><a href="playground">Open the playground</a></p>
</div>
</body>
</html>

+ 0
- 120
www2/examples/graph3d/playground/csv2array.js View File

@ -1,120 +0,0 @@
/**
* Convert data in CSV (comma separated value) format to a javascript array.
*
* Values are separated by a comma, or by a custom one character delimeter.
* Rows are separated by a new-line character.
*
* Leading and trailing spaces and tabs are ignored.
* Values may optionally be enclosed by double quotes.
* Values containing a special character (comma's, double-quotes, or new-lines)
* must be enclosed by double-quotes.
* Embedded double-quotes must be represented by a pair of consecutive
* double-quotes.
*
* Example usage:
* var csv = '"x", "y", "z"\n12.3, 2.3, 8.7\n4.5, 1.2, -5.6\n';
* var array = csv2array(csv);
*
* Author: Jos de Jong, 2010
*
* @param {string} data The data in CSV format.
* @param {string} delimeter [optional] a custom delimeter. Comma ',' by default
* The Delimeter must be a single character.
* @return {Array} array A two dimensional array containing the data
* @throw {String} error The method throws an error when there is an
* error in the provided data.
*/
function csv2array(data, delimeter) {
// Retrieve the delimeter
if (delimeter == undefined)
delimeter = ',';
if (delimeter && delimeter.length > 1)
delimeter = ',';
// initialize variables
var newline = '\n';
var eof = '';
var i = 0;
var c = data.charAt(i);
var row = 0;
var col = 0;
var array = new Array();
while (c != eof) {
// skip whitespaces
while (c == ' ' || c == '\t' || c == '\r') {
c = data.charAt(++i); // read next char
}
// get value
var value = "";
if (c == '\"') {
// value enclosed by double-quotes
c = data.charAt(++i);
do {
if (c != '\"') {
// read a regular character and go to the next character
value += c;
c = data.charAt(++i);
}
if (c == '\"') {
// check for escaped double-quote
var cnext = data.charAt(i+1);
if (cnext == '\"') {
// this is an escaped double-quote.
// Add a double-quote to the value, and move two characters ahead.
value += '\"';
i += 2;
c = data.charAt(i);
}
}
}
while (c != eof && c != '\"');
if (c == eof) {
throw "Unexpected end of data, double-quote expected";
}
c = data.charAt(++i);
}
else {
// value without quotes
while (c != eof && c != delimeter && c!= newline && c != ' ' && c != '\t' && c != '\r') {
value += c;
c = data.charAt(++i);
}
}
// add the value to the array
if (array.length <= row)
array.push(new Array());
array[row].push(value);
// skip whitespaces
while (c == ' ' || c == '\t' || c == '\r') {
c = data.charAt(++i);
}
// go to the next row or column
if (c == delimeter) {
// to the next column
col++;
}
else if (c == newline) {
// to the next row
col = 0;
row++;
}
else if (c != eof) {
// unexpected character
throw "Delimiter expected after character " + i;
}
// go to the next character
c = data.charAt(++i);
}
return array;
}

+ 0
- 80
www2/examples/graph3d/playground/csv2datatable.html View File

@ -1,80 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Convert CSV to Google Datatable</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="csv2array.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function loaded() {
}
google.load("visualization", "1");
// Set callback to run when API is loaded
google.setOnLoadCallback(loaded);
// Called when the Visualization API is loaded.
function convert() {
var csv = document.getElementById("csv").value;
var datatable = "";
// parse the csv content
var csvArray = csv2array(csv);
// Create and populate a data table.
datatable += "data = new google.visualization.DataTable();\n";
// read the header row
for (var col = 0; col < csvArray[0].length; col++) {
datatable += "data.addColumn('number', '" + csvArray[0][col] + "');\n";
}
// read all data
for (var row = 1; row < csvArray.length; row++) {
datatable += "data.addRow([";
for (var col = 0; col < csvArray[row].length; col++) {
if (col != 0)
datatable += ", ";
datatable += csvArray[row][col];
}
datatable += "]);\n";
}
document.getElementById("datatable").value = datatable;
alert(csvArray.length + " rows converted");
}
</script>
</head>
<body>
<div id="graph"></div>
<div id="info"></div>
<b>CSV</b><br>
<textarea id="csv" style="width: 400px; height: 300px;"></textarea>
<br>
<br>
<input type="button" value="Convert" onclick="convert();">
<br>
<br>
<b>Google DataTable</b><br>
<textarea id="datatable" style="width: 400px; height: 300px;"></textarea>
</body>
</html>

+ 0
- 173
www2/examples/graph3d/playground/datasource.html View File

@ -1,173 +0,0 @@
<html>
<head>
<title>Graph3d documentation</title>
<link rel='stylesheet' href='default.css' type='text/css'>
<link href="prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<pre class="prettyprint lang-php">
&lt;?php
/*
This datasource returns a response in the form of a google query response
USAGE
All parameters are optional
datasource.php?xmin=0&xmax=314&xstepnum=25&ymin=0&ymax=314&ystepnum=25
DOCUMENTATION
http://code.google.com/apis/visualization/documentation/dev/implementing_data_source.html
EXAMPLE OF A RESPONSE FILE
Note that the reqId in the response must correspond with the reqId from the
request.
________________________________________________________________________________
google.visualization.Query.setResponse({
version:'0.6',
reqId:'0',
status:'ok',
table:{
cols:[
{id:'x',
label:'x',
type:'number'},
{id:'y',
label:'y',
type:'number'},
{id:'value',
label:'value',
type:'number'}
],
rows:[
{c:[{v:0}, {v:0}, {v:10.0}]},
{c:[{v:1}, {v:0}, {v:12.0}]},
{c:[{v:2}, {v:0}, {v:13.0}]},
{c:[{v:0}, {v:1}, {v:11.0}]},
{c:[{v:1}, {v:1}, {v:14.0}]},
{c:[{v:2}, {v:1}, {v:11.0}]}
]
}
});
________________________________________________________________________________
*/
/**
* A custom function
*/
function custom($x, $y) {
$d = sqrt(pow($x/100, 2) + pow($y/100, 2));
return 50 * exp(-5 * $d / 10) * sin($d*5)
}
// retrieve parameters
$default_stepnum = 25;
$xmin = isset($_REQUEST['xmin']) ? (float)$_REQUEST['xmin'] : -100;
$xmax = isset($_REQUEST['xmax']) ? (float)$_REQUEST['xmax'] : 100;
$xstepnum = isset($_REQUEST['xstepnum']) ? (int)$_REQUEST['xstepnum'] : $default_stepnum;
$ymin = isset($_REQUEST['ymin']) ? (float)$_REQUEST['ymin'] : -100;
$ymax = isset($_REQUEST['ymax']) ? (float)$_REQUEST['ymax'] : 100;
$ystepnum = isset($_REQUEST['ystepnum']) ? (int)$_REQUEST['ystepnum'] : $default_stepnum;
// in the reply we must fill in the request id that came with the request
$reqId = getReqId();
// check for a maximum number of datapoints (for safety)
if ($xstepnum * $ystepnum &gt; 10000) {
echo "google.visualization.Query.setResponse({
version:'0.6',
reqId:'$reqId',
status:'error',
errors:[{reason:'not_supported', message:'Maximum number of datapoints exceeded'}]
});";
exit;
}
// output the header part of the response
echo "google.visualization.Query.setResponse({
version:'0.6',
reqId:'$reqId',
status:'ok',
table:{
cols:[
{id:'x',
label:'x',
type:'number'},
{id:'y',
label:'y',
type:'number'},
{id:'value',
label:'',
type:'number'}
],
rows:[";
// output the actual values
$first = true;
$xstep = ($xmax - $xmin) / $xstepnum;
$ystep = ($ymax - $ymin) / $ystepnum;
for ($x = $xmin; $x &lt; $xmax; $x+=$xstep) {
for ($y = $ymin; $y &lt; $ymax; $y+=$ystep) {
$value = custom($x,$y);
if (!$first) {
echo ",\n";
}
else {
echo "\n";
}
echo " {c:[{v:$x}, {v:$y}, {v:$value}]}";
$first = false;
}
}
// output the end part of the response
echo "
]
}
});
";
/**
* Retrieve the request id from the get/post data
* @return {number} $reqId The request id, or 0 if not found
*/
function getReqId() {
$reqId = 0;
foreach ($_REQUEST as $req) {
if (substr($req, 0,6) == "reqId:") {
$reqId = substr($req, 6);
}
}
return $reqId;
}
?&gt;
</pre>
</body>
</html>

+ 0
- 155
www2/examples/graph3d/playground/datasource.php View File

@ -1,155 +0,0 @@
<?php
/*
This datasource returns a response in the form of a google query response
USAGE
All parameters are optional
datasource.php?xmin=0&xmax=314&xstepnum=25&ymin=0&ymax=314&ystepnum=25
DOCUMENTATION
http://code.google.com/apis/visualization/documentation/dev/implementing_data_source.html
EXAMPLE OF A RESPONSE FILE
Note that the reqId in the response must correspond with the reqId from the
request.
________________________________________________________________________________
google.visualization.Query.setResponse({
version:'0.6',
reqId:'0',
status:'ok',
table:{
cols:[
{id:'x',
label:'x',
type:'number'},
{id:'y',
label:'y',
type:'number'},
{id:'value',
label:'value',
type:'number'}
],
rows:[
{c:[{v:0}, {v:0}, {v:10.0}]},
{c:[{v:1}, {v:0}, {v:12.0}]},
{c:[{v:2}, {v:0}, {v:13.0}]},
{c:[{v:0}, {v:1}, {v:11.0}]},
{c:[{v:1}, {v:1}, {v:14.0}]},
{c:[{v:2}, {v:1}, {v:11.0}]}
]
}
});
________________________________________________________________________________
*/
/**
* A custom function
*/
function custom($x, $y) {
$d = sqrt(pow($x/100, 2) + pow($y/100, 2));
return 50 * exp(-5 * $d / 10) * sin($d*5);
}
// retrieve parameters
$default_stepnum = 25;
$xmin = isset($_REQUEST['xmin']) ? (float)$_REQUEST['xmin'] : -100;
$xmax = isset($_REQUEST['xmax']) ? (float)$_REQUEST['xmax'] : 100;
$xstepnum = isset($_REQUEST['xstepnum']) ? (int)$_REQUEST['xstepnum'] : $default_stepnum;
$ymin = isset($_REQUEST['ymin']) ? (float)$_REQUEST['ymin'] : -100;
$ymax = isset($_REQUEST['ymax']) ? (float)$_REQUEST['ymax'] : 100;
$ystepnum = isset($_REQUEST['ystepnum']) ? (int)$_REQUEST['ystepnum'] : $default_stepnum;
// in the reply we must fill in the request id that came with the request
$reqId = getReqId();
// check for a maximum number of datapoints (for safety)
if ($xstepnum * $ystepnum > 10000) {
echo "google.visualization.Query.setResponse({
version:'0.6',
reqId:'$reqId',
status:'error',
errors:[{reason:'not_supported', message:'Maximum number of datapoints exceeded'}]
});";
exit;
}
// output the header part of the response
echo "google.visualization.Query.setResponse({
version:'0.6',
reqId:'$reqId',
status:'ok',
table:{
cols:[
{id:'x',
label:'x',
type:'number'},
{id:'y',
label:'y',
type:'number'},
{id:'value',
label:'',
type:'number'}
],
rows:[";
// output the actual values
$first = true;
$xstep = ($xmax - $xmin) / $xstepnum;
$ystep = ($ymax - $ymin) / $ystepnum;
for ($x = $xmin; $x < $xmax; $x+=$xstep) {
for ($y = $ymin; $y < $ymax; $y+=$ystep) {
$value = custom($x,$y);
if (!$first) {
echo ",\n";
}
else {
echo "\n";
}
echo " {c:[{v:$x}, {v:$y}, {v:$value}]}";
$first = false;
}
}
// output the end part of the response
echo "
]
}
});
";
/**
* Retrieve the request id from the get/post data
* @return {number} $reqId The request id, or 0 if not found
*/
function getReqId() {
$reqId = 0;
foreach ($_REQUEST as $req) {
if (substr($req, 0,6) == "reqId:") {
$reqId = substr($req, 6);
}
}
return $reqId;
}
?>

+ 0
- 179
www2/examples/graph3d/playground/index.html View File

@ -1,179 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D - Playground</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<script type="text/javascript" src="playground.js"></script>
<script type="text/javascript" src="csv2array.js"></script>
<link rel='stylesheet' href='playground.css' type='text/css'>
<script type="text/javascript">
// Called when the Visualization API is loaded.
function drawVisualization() {
// TODO
}
</script>
</head>
<body onload="load();">
<h1>Graph 3D - Playground</h1>
<table style="width:100%;">
<col width="50%">
<col width="50%">
<tr>
<td>
<h2>Data</h2>
<p>
Graph 3D expects a data table with first three to five columns:
colums <code>x</code>, <code>y</code>, <code>z</code> (optional),
<code>style</code>, <code>filter</code> (optional).
</p>
<table>
<tr>
<td style="white-space: nowrap">
<input type="radio" name="datatype" id="datatypeCsv" onclick="selectDataType();" checked value="csv">Csv
</td>
<td>
<div id="csv">
<textarea id="csvTextarea"></textarea>
<p>
<a href="javascript: loadCsvExample();" title="Load an example">Simple example</a>
<a href="javascript: loadCsvLineExample();" title="Load an example">Line example</a>
<a href="javascript: loadCsvAnimationExample();" title="Load an example">Animation example</a>
<a href="javascript: loadCsvMovingDotsExample();" title="Load an example">Moving dots example</a>
<a href="javascript: loadCsvColoredDotsExample();" title="Load an example">Colored dots example</a>
<a href="javascript: loadCsvSizedDotsExample();" title="Load an example">Sized dots example</a>
</p>
</div>
</td>
</tr>
<!-- TODO: add JSON examples -->
</table>
<br>
</td>
<td rowspan=2>
<h2>Graph</h2>
<p>
<input type="button" value="Draw graph" onclick="draw();" id="draw">
</p>
<div id="graph"></div>
</td>
</tr>
<tr>
<td>
<h2>Options</h2>
<table>
<tr>
<th>Option</th>
<th>Value</th>
</tr>
<tr>
<td>width</td>
<td><input type="text" id="width" value="100%" /> <span class="info">for example "500px" or "100%"</span></td>
</tr>
<tr>
<td>height</td>
<td><input type="text" id="height" value="100%" /> <span class="info">for example "500px" or "100%"</span></td>
</tr>
<tr>
<td>style</td>
<td>
<select id="style">
<option value="bar" >bar
<option value="bar-color" >bar-color
<option value="bar-size" >bar-size
<option value="dot" >dot
<option value="dot-color" >dot-color
<option value="dot-size" >dot-size
<option value="dot-line" >dot-line
<option value="line" >line
<option value="grid" >grid
<option value="surface" selected>surface
</select>
</tr>
<tr>
<td>showAnimationControls</td>
<td><input type="checkbox" id="showAnimationControls" checked /></td>
</tr>
<tr>
<td>showGrid</td>
<td><input type="checkbox" id="showGrid" checked /></td>
</tr>
<tr>
<td>showPerspective</td>
<td><input type="checkbox" id="showPerspective" checked /></td>
</tr>
<tr>
<td>showShadow</td>
<td><input type="checkbox" id="showShadow" /></td>
</tr>
<tr>
<td>keepAspectRatio</td>
<td><input type="checkbox" id="keepAspectRatio" checked /></td>
</tr>
<tr>
<td>verticalRatio</td>
<td><input type="text" id="verticalRatio" value="0.5" /> <span class="info">a value between 0.1 and 1.0</span></td>
</tr>
<tr>
<td>animationInterval</td>
<td><input type="text" id="animationInterval" value="1000" /> <span class="info">in milliseconds</span></td>
</tr>
<tr>
<td>animationPreload</td>
<td><input type="checkbox" id="animationPreload" /></td>
</tr>
<tr>
<td>animationAutoStart</td>
<td><input type="checkbox" id="animationAutoStart" /></td>
</tr>
<tr><td>xCenter</td><td><input type="text" id="xCenter" value="55%" /></td></tr>
<tr><td>yCenter</td><td><input type="text" id="yCenter" value="45%" /></td></tr>
<tr><td>xMin</td><td><input type="text" id="xMin" /></td></tr>
<tr><td>xMax</td><td><input type="text" id="xMax" /></td></tr>
<tr><td>xStep</td><td><input type="text" id="xStep" /></td></tr>
<tr><td>yMin</td><td><input type="text" id="yMin" /></td></tr>
<tr><td>yMax</td><td><input type="text" id="yMax" /></td></tr>
<tr><td>yStep</td><td><input type="text" id="yStep" /></td></tr>
<tr><td>zMin</td><td><input type="text" id="zMin" /></td></tr>
<tr><td>zMax</td><td><input type="text" id="zMax" /></td></tr>
<tr><td>zStep</td><td><input type="text" id="zStep" /></td></tr>
<tr><td>valueMin</td><td><input type="text" id="valueMin" /></td></tr>
<tr><td>valueMax</td><td><input type="text" id="valueMax" /></td></tr>
<tr><td>xBarWidth</td><td><input type="text" id="xBarWidth" /></td></tr>
<tr><td>yBarWidth</td><td><input type="text" id="yBarWidth" /></td></tr>
<tr><td>xLabel</td><td><input type="text" id="xLabel" value="x"/></td></tr>
<tr><td>yLabel</td><td><input type="text" id="yLabel" value="y"/></td></tr>
<tr><td>zLabel</td><td><input type="text" id="zLabel" value="z"/></td></tr>
<tr><td>filterLabel</td><td><input type="text" id="filterLabel" value="time"/></td></tr>
<tr><td>legendLabel</td><td><input type="text" id="legendLabel" value="value"/></td></tr>
</table>
</td>
</tr>
</table>
</body>

Some files were not shown because too many files changed in this diff

Loading…
Cancel
Save