tests/label_v.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>demo</title>
   5     <!--
   6     <script type="text/javascript" src="../dist/dygraph.js"></script>
   7     -->
   8     <script type="text/javascript" src="../dist/dygraph.js"></script>
   9   </head>
  10   <body>
  11     <div id="graph"></div>
  12     <p>This demo shows how you can create labels and ticks independently of one another.</p>
  13 <script type="text/javascript">
  14 var g;
  15
  16 function draw() {
  17   g = new Dygraph(document.getElementById("graph"),
  18                  data,
  19                  {
  20                      legend: 'always',
  21                      animatedZooms: true,
  22                      title: 'tick-less axis labels',
  23                      labels: ['Hour of Week', 'X', 'Y'],
  24                      axes: {
  25                        y: {
  26                          valueRange: [0, null]
  27                        },
  28                        x: {
  29                          ticker: function(min, max, pixels) {
  30                                  return [
  31                                  { v: 0*24 + 24 },
  32                                  { label_v: 0*24 + 12, label: 'Sun' },
  33                                  { v: 1*24 + 24 },
  34                              { label_v: 1*24 + 12, label: 'Mon' },
  35                              { v: 2*24 + 24 },
  36                              { label_v: 2*24 + 12, label: 'Tue' },
  37                              { v: 3*24 + 24 },
  38                              { label_v: 3*24 + 12, label: 'Wed' },
  39                              { v: 4*24 + 24 },
  40                              { label_v: 4*24 + 12, label: 'Thu' },
  41                              { v: 5*24 + 24 },
  42                              { label_v: 5*24 + 12, label: 'Fri' },
  43                              { v: 6*24 + 24 },
  44                              { label_v: 6*24 + 12, label: 'Sat' },
  45                              { v: 7*24 + 24 },
  46                            ]
  47                          }
  48                        }
  49                      }
  50                  });
  51 }
  52
  53 var data = [];
  54 for (var i = 0; i < 168; i++) {
  55   const h = i % 24;
  56   data.push([
  57     i,
  58     250 + 100 * Math.sin(2 * Math.PI * (h-6)/24),
  59     500 + 200 * Math.sin(2 * Math.PI * (h-6)/24)
  60   ]);
  61 }
  62
  63 draw();
  64
  65 </script>
  66 </body>
  67 </html>