planetstack/core/static/planetstack_graphs_old.js

   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 })