[dygraphs.git] / tests / customLabelCss3.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="../dist/dygraph.css">
    <title>Label styles</title>
    <script type="text/javascript" src="../dist/dygraph.js"></script>

    <script type="text/javascript" src="data.js"></script>
    <style>
      .dygraph-legend {
        background-color: rgba(200, 200, 255, 0.75);
        padding: 4px;
        border: 1px solid black;
        border-radius: 10px;
        box-shadow: 4px 4px 4px #888;
        width: 100px;
      }
    </style>
  </head>
  <body>
    <p>Labels are styled with css3:</p>
    <div id="div_g14" style="width:600px; height:300px;"></div>

    <script type="text/javascript">
      g14 = new Dygraph(
            document.getElementById("div_g14"),
            NoisyData, {
              rollPeriod: 14,
              errorBars: true,
              labelsSeparateLines: true,
              axes: {
                y: {
                  axisLabelWidth: 20
                }
              }
            }
          );
    </script>
  </body>
</html>
Commit	Line	Data
	1	<!DOCTYPE html>
	2	<html>
	3	<head>
	4	<link rel="stylesheet" href="../dist/dygraph.css">
	5	<title>Label styles</title>
	6	<script type="text/javascript" src="../dist/dygraph.js"></script>
	7
	8	<script type="text/javascript" src="data.js"></script>
	9	<style>
	10	.dygraph-legend {
	11	background-color: rgba(200, 200, 255, 0.75);
	12	padding: 4px;
	13	border: 1px solid black;
	14	border-radius: 10px;
	15	box-shadow: 4px 4px 4px #888;
	16	width: 100px;
	17	}
	18	</style>
	19	</head>
	20	<body>
	21	<p>Labels are styled with css3:</p>
	22	<div id="div_g14" style="width:600px; height:300px;"></div>
	23
	24	<script type="text/javascript">
	25	g14 = new Dygraph(
	26	document.getElementById("div_g14"),
	27	NoisyData, {
	28	rollPeriod: 14,
	29	errorBars: true,
	30	labelsSeparateLines: true,
	31	axes: {
	32	y: {
	33	axisLabelWidth: 20
	34	}
	35	}
	36	}
	37	);
	38	</script>
	39	</body>
	40	</html>