1 $(document).ready(function() {
3 function renderChart(jsonData, yField, xField, legend) {
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;
11 var parseDate = d3.time.format("%Y-%m-%m-%H-%M").parse;
13 var x = d3.time.scale()
16 var y = d3.scale.linear()
19 var xAxis = d3.svg.axis()
21 .ticks(d3.time.minutes, 15)
24 var yAxis = d3.svg.axis()
29 var line = d3.svg.line()
30 .x(function(d) { return x(d.date); })
31 .y(function(d) { return y(d.value); });
33 var svg = d3.select("#graph").append("svg")
34 .attr("width", width + margin.left + margin.right)
35 .attr("height", height + margin.top + margin.bottom)
37 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
40 $('#chartHeading').text(legend);
41 data.forEach(function(d) {
42 d.date = new Date(d[yField]*1000);
46 x.domain(d3.extent(data, function(d) { return d.date; }));
48 var e = d3.extent(data, function(d) { return d.value;});
54 .attr("class", "x axis")
55 .attr("transform", "translate(0," + height + ")")
60 .attr("class", "y axis")
63 .attr("transform", "rotate(-90)")
66 .style("text-anchor", "end")
68 .attr("class", "legend");
72 .attr("class", "line")
76 $('.nodesLabel, .nodesValue').click(function() {
77 var jsonData = window.pageAnalyticsData;
78 renderChart(jsonData, "MinuteTime", "count_hostname", "Node Count");
80 $('.cpuLabel, .cpuValue').click(function() {
81 var jsonData = window.pageAnalyticsData;
82 renderChart(jsonData, "MinuteTime", "avg_cpu", "Average Cpu");
84 $('.bandwidthLabel, .bandwidthValue').click(function() {
85 var jsonData = window.pageBandData;
86 renderChart(jsonData, "MinuteTime", "sum_computed_bytes_sent_div_elapsed", "Bandwidth");