vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

363 lines
8.8 KiB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Graph2d | External legend Example</title>
  5. <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
  6. <style type="text/css">
  7. body, html {
  8. font-family: sans-serif;
  9. }
  10. .custom-style1 {
  11. fill: #f2ea00;
  12. fill-opacity:0;
  13. stroke-width:2px;
  14. stroke: #b3ab00;
  15. }
  16. .custom-style2 {
  17. fill: #00a0f2;
  18. fill-opacity:0;
  19. stroke-width:2px;
  20. stroke: #050092;
  21. }
  22. .custom-style3 {
  23. fill: #00f201;
  24. fill-opacity:0;
  25. stroke-width:2px;
  26. stroke: #029200;
  27. }
  28. path.custom-style3.fill {
  29. fill-opacity:0.5 !important;
  30. stroke: none;
  31. }
  32. .vis-graph-group0 {
  33. fill:#4f81bd;
  34. fill-opacity:0;
  35. stroke-width:2px;
  36. stroke: #4f81bd;
  37. }
  38. .vis-graph-group1 {
  39. fill:#f79646;
  40. fill-opacity:0;
  41. stroke-width:2px;
  42. stroke: #f79646;
  43. }
  44. .vis-graph-group2 {
  45. fill: #8c51cf;
  46. fill-opacity:0;
  47. stroke-width:2px;
  48. stroke: #8c51cf;
  49. }
  50. .vis-graph-group3 {
  51. fill: #75c841;
  52. fill-opacity:0;
  53. stroke-width:2px;
  54. stroke: #75c841;
  55. }
  56. .vis-graph-group4 {
  57. fill: #ff0100;
  58. fill-opacity:0;
  59. stroke-width:2px;
  60. stroke: #ff0100;
  61. }
  62. .vis-graph-group5 {
  63. fill: #37d8e6;
  64. fill-opacity:0;
  65. stroke-width:2px;
  66. stroke: #37d8e6;
  67. }
  68. .vis-graph-group6 {
  69. fill: #042662;
  70. fill-opacity:0;
  71. stroke-width:2px;
  72. stroke: #042662;
  73. }
  74. .vis-graph-group7 {
  75. fill:#00ff26;
  76. fill-opacity:0;
  77. stroke-width:2px;
  78. stroke: #00ff26;
  79. }
  80. .vis-graph-group8 {
  81. fill:#ff00ff;
  82. fill-opacity:0;
  83. stroke-width:2px;
  84. stroke: #ff00ff;
  85. }
  86. .vis-graph-group9 {
  87. fill: #8f3938;
  88. fill-opacity:0;
  89. stroke-width:2px;
  90. stroke: #8f3938;
  91. }
  92. .vis-fill {
  93. fill-opacity:0.1;
  94. stroke: none;
  95. }
  96. .vis-bar {
  97. fill-opacity:0.5;
  98. stroke-width:1px;
  99. }
  100. .vis-point {
  101. stroke-width:2px;
  102. fill-opacity:1.0;
  103. }
  104. .vis-legend-background {
  105. stroke-width:1px;
  106. fill-opacity:0.9;
  107. fill: #ffffff;
  108. stroke: #c2c2c2;
  109. }
  110. .vis-outline {
  111. stroke-width:1px;
  112. fill-opacity:1;
  113. fill: #ffffff;
  114. stroke: #e5e5e5;
  115. }
  116. .vis-icon-fill {
  117. fill-opacity:0.3;
  118. stroke: none;
  119. }
  120. div.description-container {
  121. float:left;
  122. height:30px;
  123. width:160px;
  124. padding-left:5px;
  125. padding-right:5px;
  126. line-height: 30px;
  127. }
  128. div.icon-container {
  129. float:left;
  130. }
  131. div.legend-element-container {
  132. display:inline-block;
  133. width:200px;
  134. height:30px;
  135. border-style:solid;
  136. border-width:1px;
  137. border-color: #e0e0e0;
  138. background-color: #ffffff;
  139. margin:4px;
  140. padding:4px;
  141. -webkit-touch-callout: none;
  142. -webkit-user-select: none;
  143. -khtml-user-select: none;
  144. -moz-user-select: none;
  145. -ms-user-select: none;
  146. user-select: none;
  147. cursor:pointer;
  148. }
  149. div.legend-element-container.hidden {
  150. background-color: #d3e6ff;
  151. }
  152. svg.legend-icon {
  153. width:30px;
  154. height:30px;
  155. }
  156. div.external-legend {
  157. position:relative;
  158. margin-left: -5px;
  159. width: 900px;
  160. }
  161. </style>
  162. <script src="../../dist/vis.js"></script>
  163. <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
  164. <body>
  165. <h2>Graph2d | External custom legend</h2>
  166. <div style="width:800px; font-size:14px; text-align: justify;">
  167. This example shows how to create an external custom legend using the getLegend function. We use normal JavaScript to show and hide the
  168. groups by updating the dataset.
  169. </div>
  170. <br />
  171. <div id="Legend" class="external-legend"></div>
  172. <div id="visualization"></div>
  173. <script type="text/javascript">
  174. // create a dataSet with groups
  175. var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
  176. var groups = new vis.DataSet();
  177. groups.add({
  178. id: 0,
  179. content: names[0],
  180. className: 'custom-style1',
  181. options: {
  182. drawPoints: {
  183. style: 'square' // square, circle
  184. },
  185. shaded: {
  186. orientation: 'bottom' // top, bottom
  187. }
  188. }});
  189. groups.add({
  190. id: 1,
  191. content: names[1],
  192. className: 'custom-style2',
  193. options: {
  194. style:'bar',
  195. drawPoints: {style: 'circle',
  196. size: 10
  197. }
  198. }});
  199. groups.add({
  200. id: 2,
  201. content: names[2],
  202. options: {
  203. yAxisOrientation: 'right', // right, left
  204. drawPoints: false
  205. }
  206. });
  207. groups.add({
  208. id: 3,
  209. content: names[3],
  210. className: 'custom-style3',
  211. options: {
  212. yAxisOrientation: 'right', // right, left
  213. drawPoints: {
  214. style: 'circle' // square, circle
  215. },
  216. shaded: {
  217. orientation: 'top' // top, bottom
  218. }
  219. }});
  220. var container = document.getElementById('visualization');
  221. var items = [
  222. {x: '2014-06-12', y: 0 , group: 0},
  223. {x: '2014-06-13', y: 30, group: 0},
  224. {x: '2014-06-14', y: 10, group: 0},
  225. {x: '2014-06-15', y: 15, group: 1},
  226. {x: '2014-06-16', y: 30, group: 1},
  227. {x: '2014-06-17', y: 10, group: 1},
  228. {x: '2014-06-18', y: 15, group: 1},
  229. {x: '2014-06-19', y: 52, group: 1},
  230. {x: '2014-06-20', y: 10, group: 1},
  231. {x: '2014-06-21', y: 20, group: 2},
  232. {x: '2014-06-22', y: 600, group: 2},
  233. {x: '2014-06-23', y: 100, group: 2},
  234. {x: '2014-06-24', y: 250, group: 2},
  235. {x: '2014-06-25', y: 300, group: 2},
  236. {x: '2014-06-26', y: 200, group: 3},
  237. {x: '2014-06-27', y: 600, group: 3},
  238. {x: '2014-06-28', y: 1000, group: 3},
  239. {x: '2014-06-29', y: 250, group: 3},
  240. {x: '2014-06-30', y: 300, group: 3}
  241. ];
  242. var dataset = new vis.DataSet(items);
  243. var options = {
  244. dataAxis: {showMinorLabels: false},
  245. start: '2014-06-09',
  246. end: '2014-07-03'
  247. };
  248. var graph2d = new vis.Graph2d(container, items, groups, options);
  249. /**
  250. * this function fills the external legend with content using the getLegend() function.
  251. */
  252. function populateExternalLegend() {
  253. var groupsData = groups.get();
  254. var legendDiv = document.getElementById("Legend");
  255. legendDiv.innerHTML = "";
  256. // get for all groups:
  257. for (var i = 0; i < groupsData.length; i++) {
  258. // create divs
  259. var containerDiv = document.createElement("div");
  260. var iconDiv = document.createElement("div");
  261. var descriptionDiv = document.createElement("div");
  262. // give divs classes and Ids where necessary
  263. containerDiv.className = 'legend-element-container';
  264. containerDiv.id = groupsData[i].id + "_legendContainer"
  265. iconDiv.className = "icon-container";
  266. descriptionDiv.className = "description-container";
  267. // get the legend for this group.
  268. var legend = graph2d.getLegend(groupsData[i].id,30,30);
  269. // append class to icon. All styling classes from the vis.css/vis-timeline-graph2d.min.css have been copied over into the head here to be able to style the
  270. // icons with the same classes if they are using the default ones.
  271. legend.icon.setAttributeNS(null, "class", "legend-icon");
  272. // append the legend to the corresponding divs
  273. iconDiv.appendChild(legend.icon);
  274. descriptionDiv.innerHTML = legend.label;
  275. // determine the order for left and right orientation
  276. if (legend.orientation == 'left') {
  277. descriptionDiv.style.textAlign = "left";
  278. containerDiv.appendChild(iconDiv);
  279. containerDiv.appendChild(descriptionDiv);
  280. }
  281. else {
  282. descriptionDiv.style.textAlign = "right";
  283. containerDiv.appendChild(descriptionDiv);
  284. containerDiv.appendChild(iconDiv);
  285. }
  286. // append to the legend container div
  287. legendDiv.appendChild(containerDiv);
  288. // bind click event to this legend element.
  289. containerDiv.onclick = toggleGraph.bind(this,groupsData[i].id);
  290. }
  291. }
  292. /**
  293. * This function switchs the visible option of the selected group on an off.
  294. * @param groupId
  295. */
  296. function toggleGraph(groupId) {
  297. // get the container that was clicked on.
  298. var container = document.getElementById(groupId + "_legendContainer")
  299. // if visible, hide
  300. if (graph2d.isGroupVisible(groupId) == true) {
  301. groups.update({id:groupId, visible:false});
  302. container.className = container.className + " hidden";
  303. }
  304. else { // if invisible, show
  305. groups.update({id:groupId, visible:true});
  306. container.className = container.className.replace("hidden","");
  307. }
  308. }
  309. populateExternalLegend()
  310. </script>
  311. </body>
  312. </html>