%PDF- %PDF-
Direktori : /home/riacommer/domains/gasworld.com.my/private_html/admin/vendor/rickshaw/examples/ |
Current File : /home/riacommer/domains/gasworld.com.my/private_html/admin/vendor/rickshaw/examples/scaled.html |
<!doctype html> <link type="text/css" rel="stylesheet" href="../src/css/graph.css"> <link type="text/css" rel="stylesheet" href="../src/css/detail.css"> <link type="text/css" rel="stylesheet" href="css/lines.css"> <script src="../vendor/d3.v3.js"></script> <script src="../rickshaw.js"></script> <style type="text/css"> #axis0 { position: absolute; height: 800px; width: 40px; } #axis1 { position: absolute; left: 1050px; height: 800px; width: 40px; } #chart { left: 50px; width: 1000px; position: absolute; } </style> <div id="axis0"></div> <div id="chart"></div> <div id="axis1"></div> <script type="text/javascript"> var data, graph, i, max, min, point, random, scales, series, _i, _j, _k, _l, _len, _len1, _len2, _ref; data = [[], []]; random = new Rickshaw.Fixtures.RandomData(12 * 60 * 60); for (i = _i = 0; _i < 100; i = ++_i) { random.addData(data); } scales = []; _ref = data[1]; for (_j = 0, _len = _ref.length; _j < _len; _j++) { point = _ref[_j]; point.y *= point.y; } for (_k = 0, _len1 = data.length; _k < _len1; _k++) { series = data[_k]; min = Number.MAX_VALUE; max = Number.MIN_VALUE; for (_l = 0, _len2 = series.length; _l < _len2; _l++) { point = series[_l]; min = Math.min(min, point.y); max = Math.max(max, point.y); } if (_k === 0) { scales.push(d3.scale.linear().domain([min, max]).nice()); } else { scales.push(d3.scale.pow().domain([min, max]).nice()); } } graph = new Rickshaw.Graph({ element: document.getElementById("chart"), renderer: 'line', series: [ { color: 'steelblue', data: data[0], name: 'Series A', scale: scales[0] }, { color: 'lightblue', data: data[1], name: 'Series B', scale: scales[1] } ] }); new Rickshaw.Graph.Axis.Y.Scaled({ element: document.getElementById('axis0'), graph: graph, orientation: 'left', scale: scales[0], tickFormat: Rickshaw.Fixtures.Number.formatKMBT }); new Rickshaw.Graph.Axis.Y.Scaled({ element: document.getElementById('axis1'), graph: graph, grid: false, orientation: 'right', scale: scales[1], tickFormat: Rickshaw.Fixtures.Number.formatKMBT }); new Rickshaw.Graph.Axis.Time({ graph: graph }); new Rickshaw.Graph.HoverDetail({ graph: graph }); graph.render(); </script>