tests/styled-chart-labels.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <link rel="stylesheet" href="../css/dygraph.css">
   5     <title>two series</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     <script type="text/javascript" src="data.js"></script>
  13     <style type="text/css">
  14     #div_g .dygraph-label {
  15       /* This applies to the title, x-axis label and y-axis label */
  16       font-family: Arial, Helvetica, sans-serif;
  17     }
  18     #div_g .dygraph-title {
  19       /* This rule only applies to the chart title */
  20       font-size: 24px;
  21       text-shadow: gray 2px 2px 2px;  /* color, delta-x, delta-y, blur radius */
  22     }
  23     #div_g .dygraph-ylabel {
  24       /* This rule only applies to the y-axis label */
  25       font-size: 18px;
  26       text-shadow: gray -2px 2px 2px;  /* (offsets are in a rotated frame) */
  27     }
  28     .chart {
  29       border: 1px dashed black;
  30       margin: 5px;
  31       padding: 2px;
  32     }
  33     .dygraph-legend {
  34       text-align: right;
  35       background: none;
  36     }
  37     </style>
  38   </head>
  39   <body>
  40     <p>In this chart, each chart label is styled independently. View source to
  41     see how it works.</p>
  42
  43     <div class="chart" id="div_g" style="width:600px; height:300px;"></div>
  44
  45     <p>This version of the chart uses the default styles:</p>
  46     <div class="chart" id="div_g2" style="width:600px; height:300px;"></div>
  47
  48     <script type="text/javascript">
  49       g = new Dygraph(
  50             document.getElementById("div_g"),
  51             data, {
  52               rollPeriod: 7,
  53               legend: 'always',
  54               title: 'High and Low Temperatures',
  55               titleHeight: 32,
  56               ylabel: 'Temperature (F)',
  57               xlabel: 'Date (Ticks indicate the start of the indicated time period)',
  58               strokeWidth: 1.5
  59             }
  60           );
  61
  62       g2 = new Dygraph(
  63             document.getElementById("div_g2"),
  64             data, {
  65               rollPeriod: 30,
  66               legend: 'always',
  67               title: 'High and Low Temperatures (30-day average)',
  68               ylabel: 'Temperature (F)',
  69               xlabel: 'Date (Ticks indicate the start of the indicated time period)',
  70               strokeWidth: 1.5
  71             }
  72           );
  73     </script>
  74   </body>
  75 </html>