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.

57 lines
1.5 KiB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Timeline | External data</title>
  5. <style type="text/css">
  6. body, html {
  7. font-family: sans-serif;
  8. }
  9. </style>
  10. <!-- Load jquery for ajax support -->
  11. <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  12. <script src="../../dist/vis.js"></script>
  13. <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  14. <script src="../googleAnalytics.js"></script>
  15. </head>
  16. <body>
  17. <p>
  18. This demo shows how to load external data via an ajax call.
  19. </p>
  20. <div id="visualization"></div>
  21. <div id="loading">loading...</div>
  22. <script type="text/javascript">
  23. // load data via an ajax request. When the data is in, load the timeline
  24. $.ajax({
  25. url: 'data/basic.json',
  26. success: function (data) {
  27. // hide the "loading..." message
  28. document.getElementById('loading').style.display = 'none';
  29. // DOM element where the Timeline will be attached
  30. var container = document.getElementById('visualization');
  31. // Create a DataSet (allows two way data-binding)
  32. var items = new vis.DataSet(data);
  33. // Configuration for the Timeline
  34. var options = {};
  35. // Create a Timeline
  36. var timeline = new vis.Timeline(container, items, options);
  37. },
  38. error: function (err) {
  39. console.log('Error', err);
  40. if (err.status === 0) {
  41. alert('Failed to load data/basic.json.\nPlease run this example on a server.');
  42. }
  43. else {
  44. alert('Failed to load data/basic.json.');
  45. }
  46. }
  47. });
  48. </script>
  49. </body>
  50. </html>