tests/per-series.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>Per-Series Properties</title>
   5     <!--
   6     For production (minified) code, use:
   7     <script type="text/javascript" src="dygraph-combined.js"></script>
   8     -->
   9     <script type="text/javascript" src="../dygraph-dev.js"></script>
  10
  11   </head>
  12   <body>
  13     <h2>Chart with per-series properties</h2>
  14     <div id="demodiv"></div>
  15     <h2>Chart with per-series properties with legend.</h2>
  16     <div id="demodiv2"></div>
  17     <h2>First graph, using old-style series specification.</h2>
  18     <div id="demodiv3"></div>
  19     <script type="text/javascript">
  20       data = function() {
  21         var zp = function(x) { if (x < 10) return "0"+x; else return x; };
  22         var r = "date,parabola,line,another line,sine wave,sine wave2\n";
  23         for (var i=1; i<=31; i++) {
  24           r += "200610" + zp(i);
  25           r += "," + 10*(i*(31-i));
  26           r += "," + 10*(8*i);
  27           r += "," + 10*(250 - 8*i);
  28           r += "," + 10*(125 + 125 * Math.sin(0.3*i));
  29           r += "," + 10*(125 + 125 * Math.sin(0.3*i+Math.PI));
  30           r += "\n";
  31         }
  32         return r;
  33       };
  34       g = new Dygraph(
  35               document.getElementById("demodiv"),
  36               data,
  37               {
  38                 strokeWidth: 2,
  39                 series : {
  40                   'parabola': {
  41                     strokeWidth: 0.0,
  42                     drawPoints: true,
  43                     pointSize: 4,
  44                     highlightCircleSize: 6
  45                   },
  46                   'line': {
  47                     strokeWidth: 1.0,
  48                     drawPoints: true,
  49                     pointSize: 1.5
  50                   },
  51                   'sine wave': {
  52                     strokeWidth: 3,
  53                     highlightCircleSize: 10
  54                   },
  55                   'sine wave2': {
  56                     strokePattern: [10, 2, 5, 2],
  57                     strokeWidth: 2,
  58                     highlightCircleSize: 3
  59                   }
  60                 }
  61               }
  62           );
  63       g2 = new Dygraph(
  64               document.getElementById("demodiv2"),
  65               data,
  66               {
  67                 legend: 'always',
  68                 strokeWidth: 2,
  69                 series: {
  70                   'parabola': {
  71                     strokePattern: null,
  72                     drawPoints: true,
  73                     pointSize: 4,
  74                     highlightCircleSize: 6
  75                   },
  76                   'line': {
  77                     strokePattern: Dygraph.DASHED_LINE,
  78                     strokeWidth: 1.0,
  79                     drawPoints: true,
  80                     pointSize: 1.5
  81                   },
  82                   'another line': {
  83                     strokePattern: [25, 5]
  84                   },
  85                   'sine wave': {
  86                     strokePattern: Dygraph.DOTTED_LINE,
  87                     strokeWidth: 3,
  88                     highlightCircleSize: 10
  89                   },
  90                   'sine wave2': {
  91                     strokePattern: Dygraph.DOT_DASH_LINE,
  92                     strokeWidth: 2,
  93                     highlightCircleSize: 3
  94                   }
  95                 }
  96               }
  97           );
  98       g3 = new Dygraph(
  99               document.getElementById("demodiv3"),
 100               data,
 101               {
 102                 strokeWidth: 2,
 103                 series: {
 104                   'parabola': {
 105                     strokeWidth: 0.0,
 106                     drawPoints: true,
 107                     pointSize: 4,
 108                     highlightCircleSize: 6
 109                   },
 110                   'line': {
 111                     strokeWidth: 1.0,
 112                     drawPoints: true,
 113                     pointSize: 1.5
 114                   },
 115                   'sine wave': {
 116                     strokeWidth: 3,
 117                     highlightCircleSize: 10
 118                   },
 119                   'sine wave2': {
 120                     strokePattern: [10, 2, 5, 2],
 121                     strokeWidth: 2,
 122                     highlightCircleSize: 3
 123                   }
 124                 }
 125               }
 126           );
 127
 128     </script>
 129 </body>
 130 </html>