jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
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.
1318 Commits
33 Branches
176 MiB
Tree: bf9684da30
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'bf9684da30'
${ noResults }
jrtechs-vis/www2/graph2d_examples.html

234 lines
8.3 KiB
Raw Normal View History

added v2 of website (in alpha stage)
10 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Graph2d Examples</title>
  8. 

  9.     <!-- Bootstrap -->
  10.     <link href="css/bootstrap.min.css" rel="stylesheet">
  11. 

  12.     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  13.     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  14.     <!--[if lt IE 9]>

  15.     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  16.     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  17.     <![endif]-->
  18. 

  19.     <link href="./css/prettify.css" rel="stylesheet" type="text/css" />
  20.     <script type="text/javascript" src="./js/prettify/prettify.js"></script>
  21.     <script src="./dist/vis.js"></script>
  22.     <link href="./dist/vis.css" rel="stylesheet" type="text/css" />
  23. 

  24.     <style>
  25.         body {
  26.             padding:10px;
  27.         }
  28. 

  29.         pre {
  30.             width:450px;
  31.             height:552px;
  32.             overflow:auto;
  33.         }
  34. 

  35.         #visualization {
  36.             display:block;
  37.             margin-left:470px;
  38.             margin-top:-562px;
  39.             width:500px;
  40.             height:552px;
  41.             border: 1px solid #dddddd;
  42.             border-radius:4px;
  43.             background-color:#fcfcfc;
  44.         }
  45. 

  46.         div.textHTMLContent {
  47.             margin-top:10px;
  48.             margin-bottom:10px;
  49.             display:block;
  50.             width:800px;
  51.         }
  52. 

  53.         img {
  54.             border:1px solid #032740;
  55.             width:250px;
  56.             height:250px;
  57.             margin-top:10px;
  58.         }
  59.         div.exampleTitle {
  60.             width:250px;
  61.             height:30px;
  62.             background-color:#032740;
  63.             color:#ffffff;
  64.             text-align:center;
  65.             vertical-align:middle;
  66.             line-height: 30px;
  67.         }
  68.     </style>
  69.     <script language="JavaScript">
  70.         function loadVis() {
  71.             var container = document.getElementById('visualization');
  72.             var items = [
  73.                 {x: '2014-06-11', y: 10},
  74.                 {x: '2014-06-12', y: 25},
  75.                 {x: '2014-06-13', y: 30},
  76.                 {x: '2014-06-14', y: 10},
  77.                 {x: '2014-06-15', y: 15},
  78.                 {x: '2014-06-16', y: 30}
  79.             ];
  80. 

  81.             var dataset = new vis.DataSet(items);
  82.             var options = {
  83.                 start: '2014-06-10',
  84.                 end: '2014-06-18',
  85.                 height:'552px',
  86.                 clickToUse:true
  87.             };
  88.             var graph2d = new vis.Graph2d(container, dataset, options);
  89.         }
  90.     </script>
  91. 

  92. </head>
  93. <body onload="prettyPrint(); loadVis();">
  94. <h1>Graph2d Examples</h1><a class="btn btn-default" href="#allExamples" role="button">View all examples »</a>  <a class="btn btn-primary" href="./docs/graph2d.html" role="button">View docs »</a>
  95. 

  96. <div class="textHTMLContent">This small code example shows the easiest way to get a Graph2d up and running. This code has been taken from example 1. The working example is shown next to it. Click it to start the interaction.</div>
  97. <pre class="prettyprint lang-html">
  98. &lt;div id="visualization"&gt;&lt;/div&gt;
  99. &lt;script type="text/javascript"&gt;
  100.     var container = document.getElementById('visualization');
  101.   var items = [
  102.     {x: '2014-06-11', y: 10},
  103.     {x: '2014-06-12', y: 25},
  104.     {x: '2014-06-13', y: 30},
  105.     {x: '2014-06-14', y: 10},
  106.     {x: '2014-06-15', y: 15},
  107.     {x: '2014-06-16', y: 30}
  108.   ];
  109. 

  110.   var dataset = new vis.DataSet(items);
  111.   var options = {
  112.     start: '2014-06-10',
  113.     end: '2014-06-18'
  114.   };
  115.   var graph2d = new vis.Graph2d(container, dataset, options);
  116. &lt;/script&gt;
  117. </pre>
  118. <div id="visualization"></div>
  119. 

  120. <h2 id="allExamples">All examples</h2>
  121. <div class="container-fluid">
  122.     <div class="col-lg-3 col-md-3 col-sm-6">
  123.         <a href="examples/graph2d/01_basic.html">
  124.             <img src="./images/gallery/graph2d/01_basic.png">
  125.             <div class="exampleTitle">basic</div>
  126.         </a>
  127.     </div>
  128.     <div class="col-lg-3 col-md-3 col-sm-6">
  129.         <a href="examples/graph2d/02_bars.html">
  130.             <img src="./images/gallery/graph2d/02_bars.png">
  131.             <div class="exampleTitle">bars</div>
  132.         </a>
  133.     </div>
  134.     <div class="col-lg-3 col-md-3 col-sm-6">
  135.         <a href="examples/graph2d/03_groups.html">
  136.             <img src="./images/gallery/graph2d/03_groups.png">
  137.             <div class="exampleTitle">groups</div>
  138.         </a>
  139.     </div>
  140.     <div class="col-lg-3 col-md-3 col-sm-6">
  141.         <a href="examples/graph2d/04_rightAxis.html">
  142.             <img src="./images/gallery/graph2d/04_rightAxis.png">
  143.             <div class="exampleTitle">right axis</div>
  144.         </a>
  145.     </div>
  146.     <div class="col-lg-3 col-md-3 col-sm-6">
  147.         <a href="examples/graph2d/05_bothAxis.html">
  148.             <img src="./images/gallery/graph2d/05_bothAxis.png">
  149.             <div class="exampleTitle">both axis</div>
  150.         </a>
  151.     </div>
  152.     <div class="col-lg-3 col-md-3 col-sm-6">
  153.         <a href="examples/graph2d/06_interpolation.html">
  154.             <img src="./images/gallery/graph2d/06_interpolation.png">
  155.             <div class="exampleTitle">interpolation</div>
  156.         </a>
  157.     </div>
  158.     <div class="col-lg-3 col-md-3 col-sm-6">
  159.         <a href="examples/graph2d/07_scrollingAndSorting.html">
  160.             <img src="./images/gallery/graph2d/07_scrollingAndSorting.png">
  161.             <div class="exampleTitle">scrolling and sorting</div>
  162.         </a>
  163.     </div>
  164.     <div class="col-lg-3 col-md-3 col-sm-6">
  165.         <a href="examples/graph2d/08_performance.html">
  166.             <img src="./images/gallery/graph2d/08_performance.png">
  167.             <div class="exampleTitle">performance</div>
  168.         </a>
  169.     </div>
  170.     <div class="col-lg-3 col-md-3 col-sm-6">
  171.         <a href="examples/graph2d/09_external_legend.html">
  172.             <img src="./images/gallery/graph2d/09_external_legend.png">
  173.             <div class="exampleTitle">external legend</div>
  174.         </a>
  175.     </div>
  176.     <div class="col-lg-3 col-md-3 col-sm-6">
  177.         <a href="examples/graph2d/10_barsSideBySide.html">
  178.             <img src="./images/gallery/graph2d/10_barsSideBySide.png">
  179.             <div class="exampleTitle">bars side by side</div>
  180.         </a>
  181.     </div>
  182.     <div class="col-lg-3 col-md-3 col-sm-6">
  183.         <a href="examples/graph2d/11_barsSideBySideGroups.html">
  184.             <img src="./images/gallery/graph2d/11_barsSideBySideGroups.png">
  185.             <div class="exampleTitle">bars side by side groups</div>
  186.         </a>
  187.     </div>
  188.     <div class="col-lg-3 col-md-3 col-sm-6">
  189.         <a href="examples/graph2d/12_customRange.html">
  190.             <img src="./images/gallery/graph2d/12_customRange.html.png">
  191.             <div class="exampleTitle">custom range</div>
  192.         </a>
  193.     </div>
  194.     <div class="col-lg-3 col-md-3 col-sm-6">
  195.         <a href="examples/graph2d/13_localization.html">
  196.             <img src="./images/gallery/graph2d/13_localization.png">
  197.             <div class="exampleTitle">localization</div>
  198.         </a>
  199.     </div>
  200.     <div class="col-lg-3 col-md-3 col-sm-6">
  201.         <a href="examples/graph2d/14_toggleGroups.html">
  202.             <img src="./images/gallery/graph2d/14_toggleGroups.png">
  203.             <div class="exampleTitle">toggle groups</div>
  204.         </a>
  205.     </div>
  206.     <div class="col-lg-3 col-md-3 col-sm-6">
  207.         <a href="examples/graph2d/15_streaming_data.html">
  208.             <img src="./images/gallery/graph2d/15_streaming_data.png">
  209.             <div class="exampleTitle">streaming data</div>
  210.         </a>
  211.     </div>
  212.     <div class="col-lg-3 col-md-3 col-sm-6">
  213.         <a href="examples/graph2d/16_bothAxis_titles.html">
  214.             <img src="./images/gallery/graph2d/16_bothAxis_titles.png">
  215.             <div class="exampleTitle">axis titles</div>
  216.         </a>
  217.     </div>
  218.     <div class="col-lg-3 col-md-3 col-sm-6">
  219.         <a href="examples/graph2d/17_dynamicStyling.html">
  220.             <img src="./images/gallery/graph2d/17_dynamicStyling.png">
  221.             <div class="exampleTitle">dynamic styling</div>
  222.         </a>
  223.     </div>
  224. </div>
  225. <br />
  226. <br />
  227. <br />
  228. <br />
  229. 

  230. <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  231. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  232. <!-- Include all compiled plugins (below), or include individual files as needed -->
  233. <script src="js/bootstrap.min.js"></script>
  234. </body>
  235. </html>