Scott Baker | 771819b | 2014-03-19 22:10:17 -0700 | [diff] [blame] | 1 | $(document).ready(function() { |
| 2 | |
| 3 | function renderChart(jsonData, yField, xField, legend) { |
| 4 | $('#graph').empty(); |
| 5 | $('#chartsModal').modal('show'); |
| 6 | $('.modal-body').scrollTop(0) |
| 7 | var margin = {top: 0, right: 100, bottom: 100, left: 175}, |
| 8 | width = 520 - margin.left - margin.right, |
| 9 | height = 300 - margin.top - margin.bottom; |
| 10 | |
| 11 | var parseDate = d3.time.format("%Y-%m-%m-%H-%M").parse; |
| 12 | |
| 13 | var x = d3.time.scale() |
| 14 | .range([0, width]); |
| 15 | |
| 16 | var y = d3.scale.linear() |
| 17 | .range([height, 0]); |
| 18 | |
| 19 | var xAxis = d3.svg.axis() |
| 20 | .scale(x) |
| 21 | .ticks(d3.time.minutes, 15) |
| 22 | .orient("bottom"); |
| 23 | |
| 24 | var yAxis = d3.svg.axis() |
| 25 | .scale(y) |
| 26 | .ticks(4) |
| 27 | .orient("left"); |
| 28 | |
| 29 | var line = d3.svg.line() |
| 30 | .x(function(d) { return x(d.date); }) |
| 31 | .y(function(d) { return y(d.value); }); |
| 32 | |
| 33 | var svg = d3.select("#graph").append("svg") |
| 34 | .attr("width", width + margin.left + margin.right) |
| 35 | .attr("height", height + margin.top + margin.bottom) |
| 36 | .append("g") |
| 37 | .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
| 38 | |
| 39 | data = jsonData.rows; |
| 40 | $('#chartHeading').text(legend); |
| 41 | data.forEach(function(d) { |
| 42 | d.date = new Date(d[yField]*1000); |
| 43 | d.value = +d[xField]; |
| 44 | }); |
| 45 | |
| 46 | x.domain(d3.extent(data, function(d) { return d.date; })); |
| 47 | |
| 48 | var e = d3.extent(data, function(d) { return d.value;}); |
| 49 | e = [e[0]-1,e[1]+1]; |
| 50 | |
| 51 | y.domain(e); |
| 52 | |
| 53 | svg.append("g") |
| 54 | .attr("class", "x axis") |
| 55 | .attr("transform", "translate(0," + height + ")") |
| 56 | .attr("x", 5) |
| 57 | .call(xAxis); |
| 58 | |
| 59 | svg.append("g") |
| 60 | .attr("class", "y axis") |
| 61 | .call(yAxis) |
| 62 | .append("text") |
| 63 | .attr("transform", "rotate(-90)") |
| 64 | .attr("y", 6) |
| 65 | .attr("dy", ".71em") |
| 66 | .style("text-anchor", "end") |
| 67 | .text(legend) |
| 68 | .attr("class", "legend"); |
| 69 | |
| 70 | svg.append("path") |
| 71 | .datum(data) |
| 72 | .attr("class", "line") |
| 73 | .attr("d", line); |
| 74 | } |
| 75 | |
| 76 | $('.nodesLabel, .nodesValue').click(function() { |
| 77 | var jsonData = window.pageAnalyticsData; |
| 78 | renderChart(jsonData, "MinuteTime", "count_hostname", "Node Count"); |
| 79 | }); |
| 80 | $('.cpuLabel, .cpuValue').click(function() { |
| 81 | var jsonData = window.pageAnalyticsData; |
| 82 | renderChart(jsonData, "MinuteTime", "avg_cpu", "Average Cpu"); |
| 83 | }); |
| 84 | $('.bandwidthLabel, .bandwidthValue').click(function() { |
| 85 | var jsonData = window.pageBandData; |
| 86 | renderChart(jsonData, "MinuteTime", "sum_computed_bytes_sent_div_elapsed", "Bandwidth"); |
| 87 | }); |
| 88 | |
| 89 | }) |