[dygraphs.git] / tests / label_v.html

<!DOCTYPE html>
<html>
  <head>
    <title>demo</title>
    <!--
    <script type="text/javascript" src="../dist/dygraph.js"></script>
    -->
    <script type="text/javascript" src="../dist/dygraph.js"></script>
  </head>
  <body>
    <div id="graph"></div>
    <p>This demo shows how you can create labels and ticks independently of one another.</p>
<script type="text/javascript">
var g;

function draw() {
  g = new Dygraph(document.getElementById("graph"),
                 data,
                 {
                     legend: 'always',
                     animatedZooms: true,
                     title: 'tick-less axis labels',
                     labels: ['Hour of Week', 'X', 'Y'],
                     axes: {
                       y: {
                         valueRange: [0, null]
                       },
                       x: {
                       	 ticker: function(min, max, pixels) {
                         	 return [
                           	 { v: 0*24 + 24 },
                           	 { label_v: 0*24 + 12, label: 'Sun' },
                           	 { v: 1*24 + 24 },
                             { label_v: 1*24 + 12, label: 'Mon' },
                             { v: 2*24 + 24 },
                             { label_v: 2*24 + 12, label: 'Tue' },
                             { v: 3*24 + 24 },
                             { label_v: 3*24 + 12, label: 'Wed' },
                             { v: 4*24 + 24 },
                             { label_v: 4*24 + 12, label: 'Thu' },
                             { v: 5*24 + 24 },
                             { label_v: 5*24 + 12, label: 'Fri' },
                             { v: 6*24 + 24 },
                             { label_v: 6*24 + 12, label: 'Sat' },
                             { v: 7*24 + 24 },
                           ]
                         }
                       }
                     }
                 });
}

var data = [];
for (var i = 0; i < 168; i++) {
  const h = i % 24;
  data.push([
    i,
    250 + 100 * Math.sin(2 * Math.PI * (h-6)/24),
    500 + 200 * Math.sin(2 * Math.PI * (h-6)/24)
  ]);
}

draw();

</script>
</body>
</html>
Commit	Line	Data
	1	<!DOCTYPE html>
	2	<html>
	3	<head>
	4	<title>demo</title>
	5	<!--
	6	<script type="text/javascript" src="../dist/dygraph.js"></script>
	7	-->
	8	<script type="text/javascript" src="../dist/dygraph.js"></script>
	9	</head>
	10	<body>
	11	<div id="graph"></div>
	12	<p>This demo shows how you can create labels and ticks independently of one another.</p>
	13	<script type="text/javascript">
	14	var g;
	15
	16	function draw() {
	17	g = new Dygraph(document.getElementById("graph"),
	18	data,
	19	{
	20	legend: 'always',
	21	animatedZooms: true,
	22	title: 'tick-less axis labels',
	23	labels: ['Hour of Week', 'X', 'Y'],
	24	axes: {
	25	y: {
	26	valueRange: [0, null]
	27	},
	28	x: {
	29	ticker: function(min, max, pixels) {
	30	return [
	31	{ v: 0*24 + 24 },
	32	{ label_v: 0*24 + 12, label: 'Sun' },
	33	{ v: 1*24 + 24 },
	34	{ label_v: 1*24 + 12, label: 'Mon' },
	35	{ v: 2*24 + 24 },
	36	{ label_v: 2*24 + 12, label: 'Tue' },
	37	{ v: 3*24 + 24 },
	38	{ label_v: 3*24 + 12, label: 'Wed' },
	39	{ v: 4*24 + 24 },
	40	{ label_v: 4*24 + 12, label: 'Thu' },
	41	{ v: 5*24 + 24 },
	42	{ label_v: 5*24 + 12, label: 'Fri' },
	43	{ v: 6*24 + 24 },
	44	{ label_v: 6*24 + 12, label: 'Sat' },
	45	{ v: 7*24 + 24 },
	46	]
	47	}
	48	}
	49	}
	50	});
	51	}
	52
	53	var data = [];
	54	for (var i = 0; i < 168; i++) {
	55	const h = i % 24;
	56	data.push([
	57	i,
	58	250 + 100 * Math.sin(2 * Math.PI * (h-6)/24),
	59	500 + 200 * Math.sin(2 * Math.PI * (h-6)/24)
	60	]);
	61	}
	62
	63	draw();
	64
	65	</script>
	66	</body>
	67	</html>