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

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