[dygraphs.git] / tests / y-axis-formatter.html

<html>
    <head>
        <title>dygraph</title>
        <!--[if IE]>
        <script type="text/javascript" src="../excanvas.js"></script>
        <![endif]-->
        <script type="text/javascript" src="../strftime/strftime-min.js"></script>
        <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
        <script type="text/javascript" src="../dygraph-canvas.js"></script>
        <script type="text/javascript" src="../dygraph.js"></script>
    </head>
    <body>

        <h1>Potential Y Axis formatting problems for small values</h1>

        <p>The problem using default y axis formatting for very small values:</p>
        <div id="graph1"></div>
        <script type="text/javascript">
            new Dygraph(
                document.getElementById("graph1"),
                [
                    [1, 0.0],
                    [2, 0.0001],
                    [3, 0.0002],
                    [4, 0.0004],
                    [5, 0.0005]
                ],
                {
                    stepPlot: true,
                    labels: ["X", "Data"]
                }
            );
        </script>

        <p>The solution using a Y axis formatting function:</p>
        <div id="graph2"></div>
        <script type="text/javascript">
            new Dygraph(
                document.getElementById("graph2"),
                [
                    [1, 0.0],
                    [2, 0.0001],
                    [3, 0.0002],
                    [4, 0.0004],
                    [5, 0.0005]
                ],
                {
                    stepPlot: true,
                    yValueFormatter: function(x) {
                        var shift = Math.pow(10, 5)
                        return Math.round(x * shift) / shift
                    },
                    labels: ["X", "Data"]
                }
            );
        </script>

        <p>Different yValueFormatter and yAxisLabelFormatter functions:</p>
        <div id="graph3"></div>
        <script type="text/javascript">
            new Dygraph(
                document.getElementById("graph3"),
                [
                    [1, 0.0],
                    [2, 0.0001],
                    [3, 0.0002],
                    [4, 0.0004],
                    [5, 0.0005]
                ],
                {
                    stepPlot: true,
                    yValueFormatter: function(x) {
                        var shift = Math.pow(10, 5)
                        return "*" + Math.round(x * shift) / shift
                    },
                    yAxisLabelFormatter: function(x) {
                        var shift = Math.pow(10, 5)
                        return "+" + Math.round(x * shift) / shift
                    },
                    labels: ["X", "Data"]
                }
            );
        </script>

    </body>
</html>
Commit	Line	Data
84fc6aa7 NN	1	<html>
	2	<head>
	3	<title>dygraph</title>
	4	<!--[if IE]>
e1fb3740	5	<script type="text/javascript" src="../excanvas.js"></script>
84fc6aa7 NN	6	<![endif]-->
	7	<script type="text/javascript" src="../strftime/strftime-min.js"></script>
	8	<script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
	9	<script type="text/javascript" src="../dygraph-canvas.js"></script>
	10	<script type="text/javascript" src="../dygraph.js"></script>
	11	</head>
	12	<body>
	13
	14	<h1>Potential Y Axis formatting problems for small values</h1>
	15
	16	<p>The problem using default y axis formatting for very small values:</p>
	17	<div id="graph1"></div>
	18	<script type="text/javascript">
	19	new Dygraph(
	20	document.getElementById("graph1"),
	21	[
	22	[1, 0.0],
	23	[2, 0.0001],
	24	[3, 0.0002],
	25	[4, 0.0004],
	26	[5, 0.0005]
	27	],
	28	{
	29	stepPlot: true,
	30	labels: ["X", "Data"]
	31	}
	32	);
	33	</script>
	34
	35	<p>The solution using a Y axis formatting function:</p>
	36	<div id="graph2"></div>
	37	<script type="text/javascript">
	38	new Dygraph(
	39	document.getElementById("graph2"),
	40	[
	41	[1, 0.0],
	42	[2, 0.0001],
	43	[3, 0.0002],
	44	[4, 0.0004],
	45	[5, 0.0005]
	46	],
	47	{
	48	stepPlot: true,
	49	yValueFormatter: function(x) {
	50	var shift = Math.pow(10, 5)
	51	return Math.round(x * shift) / shift
	52	},
	53	labels: ["X", "Data"]
	54	}
	55	);
	56	</script>
	57
	58	<p>Different yValueFormatter and yAxisLabelFormatter functions:</p>
	59	<div id="graph3"></div>
	60	<script type="text/javascript">
	61	new Dygraph(
	62	document.getElementById("graph3"),
	63	[
	64	[1, 0.0],
	65	[2, 0.0001],
	66	[3, 0.0002],
	67	[4, 0.0004],
	68	[5, 0.0005]
	69	],
70	{
71	stepPlot: true,
72	yValueFormatter: function(x) {
73	var shift = Math.pow(10, 5)
74	return "" + Math.round(x shift) / shift
75	},
76	yAxisLabelFormatter: function(x) {
77	var shift = Math.pow(10, 5)
78	return "+" + Math.round(x * shift) / shift
79	},
80	labels: ["X", "Data"]
81	}
82	);
83	</script>
84
85	</body>
86	</html>