projects / dygraphs.git / blame
| Commit | Line | Data |
|---|---|---|
| 48e614ac DV |
1 | <!DOCTYPE html> |
| 2 | <html> | |
| 3 | <head> | |
| fd6b8dad | 4 | <link rel="stylesheet" href="../dist/dygraph.css"> |
| 48e614ac | 5 | <title>valueFormatter and axisLabelFormatter</title> |
| fbd6834a | 6 | <script type="text/javascript" src="../dist/dygraph.js"></script> |
| 48e614ac DV |
7 | |
| 8 | </head> | |
| 9 | <body style="max-width: 800px;"> | |
| 10 | <h2>Multiple y-axes</h2> | |
| 11 | <p>This demonstrates how the valueFormatter and axisLabelFormatter options work. The valueFormatter controls the display of the legend. The axisLabelFormatter controls the display of axis tick marks. These can be set on a per-axis basis.</p> | |
| 12 | <div id="demodiv"></div> | |
| 13 | ||
| 14 | <ul> | |
| 15 | <li>xvf = x-axis valueFormatter | |
| 16 | <li>yvf = y-axis valueFormatter | |
| 17 | <li>y2vf = secondary y-axis valueFormatter | |
| 18 | <li>xalf = x-axis axisLabelFormatter | |
| 19 | <li>yalf = y-axis axisLabelFormatter | |
| 20 | <li>y2alf = secondary y-axis axisLabelFormatter | |
| 21 | </ul> | |
| 22 | ||
| 23 | <script type="text/javascript"> | |
| 24 | var data = []; | |
| 25 | for (var i = 1; i <= 100; i++) { | |
| 26 | var m = "01", d = i; | |
| 27 | if (d > 31) { m = "02"; d -= 31; } | |
| 28 | if (m == "02" && d > 28) { m = "03"; d -= 28; } | |
| 29 | if (m == "03" && d > 31) { m = "04"; d -= 31; } | |
| 30 | if (d < 10) d = "0" + d; | |
| 31 | // two series, one with range 1-100, one with range 1-2M | |
| 32 | data.push([new Date("2010/" + m + "/" + d), | |
| 33 | i, | |
| 34 | 100 - i, | |
| 35 | 1e6 * (1 + i * (100 - i) / (50 * 50)), | |
| 36 | 1e6 * (2 - i * (100 - i) / (50 * 50))]); | |
| 37 | } | |
| 38 | ||
| adbc923a DV |
39 | function formatDate(d) { |
| 40 | var yyyy = d.getFullYear(), | |
| 41 | mm = d.getMonth() + 1, | |
| 42 | dd = d.getDate(); | |
| 43 | return yyyy + '-' + (mm < 10 ? '0' : '') + mm + (dd < 10 ? '0' : '') + dd; | |
| 44 | } | |
| 45 | ||
| 48e614ac DV |
46 | g = new Dygraph( |
| 47 | document.getElementById("demodiv"), | |
| 48 | data, | |
| 49 | { | |
| 50 | labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ], | |
| 51 | width: 640, | |
| 52 | height: 350, | |
| 27fd63fc DV |
53 | series: { |
| 54 | 'Y3': { axis: 'y2' }, | |
| 55 | 'Y4': { axis: 'y2' } | |
| 48e614ac | 56 | }, |
| 48e614ac DV |
57 | axes: { |
| 58 | x: { | |
| 59 | valueFormatter: function(ms) { | |
| adbc923a | 60 | return 'xvf(' + formatDate(new Date(ms)) + ')'; |
| 48e614ac DV |
61 | }, |
| 62 | axisLabelFormatter: function(d) { | |
| adbc923a | 63 | return 'xalf(' + formatDate(d) + ')'; |
| 48e614ac DV |
64 | }, |
| 65 | pixelsPerLabel: 100, | |
| 2b66af4f | 66 | axisLabelWidth: 100, |
| 48e614ac DV |
67 | }, |
| 68 | y: { | |
| 69 | valueFormatter: function(y) { | |
| 70 | return 'yvf(' + y.toPrecision(2) + ')'; | |
| 71 | }, | |
| 72 | axisLabelFormatter: function(y) { | |
| 73 | return 'yalf(' + y.toPrecision(2) + ')'; | |
| 2b66af4f DV |
74 | }, |
| 75 | axisLabelWidth: 100 | |
| 48e614ac DV |
76 | }, |
| 77 | y2: { | |
| 78 | valueFormatter: function(y2) { | |
| 79 | return 'y2vf(' + y2.toPrecision(2) + ')'; | |
| 80 | }, | |
| 81 | axisLabelFormatter: function(y2) { | |
| 82 | return 'y2alf(' + y2.toPrecision(2) + ')'; | |
| 83 | } | |
| 84 | } | |
| 85 | } | |
| 86 | } | |
| 87 | ); | |
| 88 | </script> | |
| 89 | </body> | |
| 90 | </html> |