two charts on demo page

[dygraphs.git] / tests / styled-chart-labels.html
diff --git a/tests/styled-chart-labels.html b/tests/styled-chart-labels.html

index f3d0785..c9f9e71 100644 (file)
--- a/tests/styled-chart-labels.html
+++ b/tests/styled-chart-labels.html
@@ -12,16 +12,16 @@
      <script type="text/javascript" src="../dygraph.js"></script>
      <script type="text/javascript" src="data.js"></script>
      <style type="text/css">
-    .dygraph-label {
+    #div_g .dygraph-label {
        /* This applies to the title, x-axis label and y-axis label */
        font-family: Arial, Helvetica, sans-serif;
      }
-    .dygraph-title {
+    #div_g .dygraph-title {
        /* This rule only applies to the chart title */
        font-size: 24px;
        text-shadow: gray 2px 2px 2px;  /* color, delta-x, delta-y, blur radius */
      }
-    .dygraph-ylabel {
+    #div_g .dygraph-ylabel {
        /* This rule only applies to the y-axis label */
        font-size: 18px;
        text-shadow: gray -2px 2px 2px;  /* (offsets are in a rotated frame) */
@@ -29,10 +29,13 @@
      </style>
    </head>
    <body>
+    <p>In this chart, each chart label is styled independently. View source to
+    see how it works.</p>
+
      <div id="div_g" style="width:600px; height:300px;"></div>
  
-    <p>Each chart label is styled independently. View source to see how it
-    works.</p>
+    <p>This version of the chart uses the default styles:</p>
+    <div id="div_g2" style="width:600px; height:300px;"></div>
  
      <script type="text/javascript">
        g = new Dygraph(
@@ -51,6 +54,22 @@
                strokeWidth: 1.5
              }
            );
+
+      g2 = new Dygraph(
+            document.getElementById("div_g2"),
+            data, {
+              rollPeriod: 30,
+              legend: 'always',
+              title: 'High and Low Temperatures (30-day average)',
+              ylabel: 'Temperature (F)',
+              xlabel: 'Date (Pacific Time Zone)',
+              labelsDivStyles: {
+                'text-align': 'right',
+                'background': 'none'
+              },
+              strokeWidth: 1.5
+            }
+          );
      </script>
    </body>
  </html>