| <html> |
| <head> |
| <meta charset="utf-8"> |
| <link rel="stylesheet" href="css/bootstrap.min.css" media="screen"> |
| <link rel="stylesheet" href="css/bootstrap-responsive.min.css"> |
| <style type="text/css"> |
| body '{' font: 20px sans-serif;'}' |
| .axis path, |
| .axis line '{' fill: none; stroke: #000; shape-rendering: crispEdges;'}' |
| .axis text '{' font-family: sans-serif; font-size: 20px; '}' |
| .line '{' fill: none; stroke: steelblue; stroke-width: 3px; '}' |
| .legend '{' padding: 5px; font: 18px sans-serif; background: yellow; |
| box-shadow: 2px 2px 1px #888;'}' |
| .title '{' font: 24px sans-serif; '}' |
| .divborder '{' border-width: 1px; border-style: solid; border-color: black; |
| margin-top:10px '}' |
| </style> |
| <script src="js/thirdparty/d3.v3.js"></script> |
| <script src="js/thirdparty/jquery.js"></script> |
| <script src="js/thirdparty/bootstrap.min.js"></script> |
| </head> |
| <body> |
| <div class="row"> |
| <div class="offset4 span8"><br/><br/><br/> |
| Select Tracked Job/Queue: |
| <select id="trackedSelect" onchange="redrawChart()"> |
| <option>----Queue----</option> |
| {0} |
| <option>----Job----</option> |
| {1} |
| </select> |
| <input type="button" style="float: right;" value="Stop" |
| onClick="stop()" /> |
| </div> |
| </div> |
| <div class="row"> |
| <div class="divborder span9 offset4" id="area1"></div> |
| </div> |
| <script> |
| // global variables |
| var basetime = 0; |
| var running = 1; |
| var para = ''''; |
| var data = []; |
| var path, line, svg; |
| var x, y; |
| var width, height; |
| var xAxis, yAxis; |
| var legends = [''usage.memory'', ''demand.memory'', ''maxshare.memory'', |
| ''minshare.memory'', ''fairshare.memory'']; |
| |
| // stop function |
| function stop() '{' |
| running = 0; |
| '}' |
| |
| // select changed event |
| function redrawChart() '{' |
| var value = $(''#trackedSelect'').val(); |
| if (value.substring(0, ''Job ''.length) === ''Job '' |
| || value.substring(0, ''Queue ''.length) === ''Queue '') '{' |
| para = value; |
| running = 0; |
| basetime = 0; |
| data = []; |
| $(''#area1'').empty(); |
| drawChart(''Tracking '' + value); |
| running = 1; |
| requestData(); |
| } |
| } |
| |
| // draw chart |
| function drawChart(title) '{' |
| // location |
| var margin = '{'top: 50, right: 150, bottom: 50, left: 80'}'; |
| width = 800 - margin.left - margin.right; |
| height = 420 - margin.top - margin.bottom; |
| x = d3.scale.linear().range([0, width]); |
| y = d3.scale.linear().range([height, 0]); |
| xAxis = d3.svg.axis().scale(x).orient(''bottom''); |
| yAxis = d3.svg.axis().scale(y).orient(''left''); |
| // lines |
| line = d3.svg.line().interpolate(''basis'') |
| .x(function(d) '{' return x(d.time); }) |
| .y(function(d) '{' return y(d.value); }); |
| // create chart |
| svg = d3.select(''#area1'').append(''svg'') |
| .attr(''width'', width + margin.left + margin.right) |
| .attr(''height'', height + margin.top + margin.bottom) |
| .append(''g'') |
| .attr(''transform'', ''translate('' + margin.left + '','' + margin.top + '')''); |
| // axis labels |
| svg.append(''text'') |
| .attr(''transform'', ''translate('' + (width / 2) + '','' + (height + margin.bottom - 5 ) + '')'') |
| .style(''text-anchor'', ''middle'') |
| .text(''Time ({2})''); |
| svg.append(''text'') |
| .attr(''transform'', ''rotate(-90)'') |
| .attr(''y'', 0 - margin.left) |
| .attr(''x'',0 - (height / 2)) |
| .attr(''dy'', ''1em'') |
| .style(''text-anchor'', ''middle'') |
| .text(''Memory (GB)''); |
| // title |
| svg.append(''text'') |
| .attr(''x'', (width / 2)) |
| .attr(''y'', 10 - (margin.top / 2)) |
| .attr(''text-anchor'', ''middle'') |
| .text(title); |
| '}' |
| |
| // request data |
| function requestData() '{' |
| $.ajax('{'url: ''trackMetrics?t='' + para, |
| success: function(point) '{' |
| // clear old |
| svg.selectAll(''g.tick'').remove(); |
| svg.selectAll(''g'').remove(); |
| |
| if(basetime == 0) basetime = point.time; |
| point.time = (point.time - basetime)/{3}; |
| data.push(point); |
| |
| var color = d3.scale.category10(); |
| color.domain(d3.keys(data[0]).filter(function(key) '{' |
| return $.inArray(key, legends) !== -1; |
| '}')); |
| |
| var values = color.domain().map(function(name) '{' |
| return '{' |
| name: name, |
| values: data.map(function(d) '{' |
| return '{' time: d.time, value: d[name]'}'; |
| '}') |
| '}'; |
| '}'); |
| |
| // set x/y range |
| x.domain(d3.extent(data, function(d) '{' return d.time; '}')); |
| y.domain([ |
| d3.min(values, function(c) '{' return 0 '}'), |
| d3.max(values, function(c) '{' return 1.1 * d3.max(c.values, function(v) '{' return v.value; '}'); '}') |
| ]); |
| |
| svg.append(''g'').attr(''class'', ''x axis'') |
| .attr(''transform'', ''translate(0,'' + height + '')'').call(xAxis); |
| svg.append(''g'').attr(''class'', ''y axis'').call(yAxis); |
| var value = svg.selectAll(''.path'') |
| .data(values).enter().append(''g'').attr(''class'', ''line''); |
| |
| value.append(''path'').attr(''class'', ''line'') |
| .attr(''d'', function(d) '{'return line(d.values); '}') |
| .style(''stroke'', function(d) '{'return color(d.name); '}'); |
| |
| // legend |
| var legend = svg.append(''g'') |
| .attr(''class'', ''legend'') |
| .attr(''x'', width + 5) |
| .attr(''y'', 25) |
| .attr(''height'', 120) |
| .attr(''width'', 180); |
| |
| legend.selectAll(''g'').data(legends) |
| .enter() |
| .append(''g'') |
| .each(function(d, i) '{' |
| var g = d3.select(this); |
| g.append(''rect'') |
| .attr(''x'', width + 5) |
| .attr(''y'', i * 20) |
| .attr(''width'', 10) |
| .attr(''height'', 10) |
| .style(''fill'', color(d)); |
| |
| g.append(''text'') |
| .attr(''x'', width + 25) |
| .attr(''y'', i * 20 + 8) |
| .attr(''height'',30) |
| .attr(''width'',250) |
| .style(''fill'', color(d)) |
| .text(d); |
| '}'); |
| |
| if(running == 1) |
| setTimeout(requestData, {4}); |
| '}', |
| cache: false |
| '}'); |
| '}' |
| </script> |
| </body> |
| </html> |
