tests/per-series.html

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