Created
October 2, 2013 10:49
-
-
Save fudanchii/6791932 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <link type="text/css" rel="stylesheet" href="/rickshaw/rickshaw.min.css"> | |
| <link type="text/css" rel="stylesheet" href="/rspfpm.css"> | |
| <script src="/rickshaw/vendor/d3.min.js"></script> | |
| <script src="/rickshaw/vendor/d3.layout.min.js"></script> | |
| <script src="/rickshaw/rickshaw.min.js"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | |
| </head> | |
| <body> | |
| <div id="chart_container"> | |
| <div id="chart"> </div> | |
| <div id="legend"> </div> | |
| </div> | |
| <script src="/rspfpm.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #chart { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| #legend { | |
| display: inline-block; | |
| vertical-align: top; | |
| margin-left: 10px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var URL = "/fpmstatus?json&full", | |
| xF = Math.round(new Date().getTime()/1000.0); | |
| seriesData = [ [{x: xF, y: 0}], [{x: xF, y: 0}], [{x: xF, y: 0}], [{x: xF, y: 0}] ], | |
| ticksTreatment = 'glow'; | |
| var palette = new Rickshaw.Color.Palette(); | |
| var graph = new Rickshaw.Graph({ | |
| element: document.getElementById("chart"), | |
| width: 640, | |
| height: 240, | |
| renderer: 'line', | |
| stroke: true, | |
| preserve: true, | |
| series: [{ | |
| name: 'Min', | |
| color: palette.color(), | |
| data: seriesData[0] | |
| },{ | |
| name: 'Max', | |
| color: palette.color(), | |
| data: seriesData[1] | |
| },{ | |
| name: 'Average', | |
| color: palette.color(), | |
| data: seriesData[2] | |
| },{ | |
| name: 'Standard Deviation', | |
| color: palette.color(), | |
| data: seriesData[3] | |
| }] | |
| }); | |
| var xAxis = new Rickshaw.Graph.Axis.Time( { | |
| graph: graph, | |
| ticksTreatment: ticksTreatment | |
| }); | |
| var yAxis = new Rickshaw.Graph.Axis.Y( { | |
| graph: graph, | |
| tickFormat: function (y) { | |
| if (y >= 3600000000) { return Math.floor(y/3600000000) + "H"; } | |
| else if (y >= 60000000) { return Math.floor(y/60000000) + "min"; } | |
| else if (y >= 1000000) { return Math.floor(y/1000000) + "sec"; } | |
| else if (y >= 1000) { return Math.floor(y/1000) + "msec"; } | |
| else { return Math.floor(y) + "µsec"; } | |
| }, | |
| ticksTreatment: ticksTreatment | |
| }); | |
| var legend = new Rickshaw.Graph.Legend( { | |
| graph: graph, | |
| element: document.getElementById('legend') | |
| }); | |
| var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( { | |
| graph: graph, | |
| legend: legend | |
| }); | |
| var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight( { | |
| graph: graph, | |
| legend: legend | |
| }); | |
| var hoverDetail = new Rickshaw.Graph.HoverDetail( { | |
| graph: graph, | |
| xFormatter: function (x) { | |
| return new Date(x * 1000).toString(); | |
| }, | |
| yFormatter: function (y) { | |
| var H = Math.floor(y / 3600000000); | |
| var carry = Math.floor(y % 3600000000); | |
| var min = Math.floor(carry / 60000000); | |
| carry = Math.floor(carry % 60000000); | |
| var sec = Math.floor(carry / 1000000); | |
| carry = Math.floor(carry % 1000000); | |
| var m = Math.floor(carry / 1000); | |
| carry = Math.floor(carry % 1000); | |
| var u = Math.floor(carry); | |
| return H + "H | " | |
| + min + "min | " | |
| + sec + "sec | " | |
| + m + "msec | " | |
| + u + "µsec"; | |
| } | |
| }); | |
| function seriesUpdate(min, max, avg, stdDev) { | |
| var xData = Math.round(new Date().getTime()/1000.0); | |
| if (max > 9999999999) return; | |
| if (seriesData[0].length == 100) { | |
| seriesData[0].shift(); | |
| seriesData[1].shift(); | |
| seriesData[2].shift(); | |
| seriesData[3].shift(); | |
| } | |
| seriesData[0].push({x: xData, y: min}); | |
| seriesData[1].push({x: xData, y: max}); | |
| seriesData[2].push({x: xData, y: avg}); | |
| seriesData[3].push({x: xData, y: stdDev}); | |
| } | |
| $(function () { | |
| var worker = setInterval(fetchFpmStatus, 3000); | |
| graph.render(); | |
| xAxis.render(); | |
| yAxis.render(); | |
| }); | |
| function fetchFpmStatus() { | |
| $.ajax(URL, { | |
| }).done(function (data) { | |
| var active = data.processes.filter(function (el) { | |
| return el['state'] == 'Running'; | |
| }); | |
| var response_times = active.map(function (el) { | |
| return el['request duration']; | |
| }); | |
| var avgRespTime = response_times.reduce(function (a, b) { | |
| return a + b; | |
| }) / response_times.length; | |
| var stdDevRespTime = Math.sqrt(response_times.map(function (el) { | |
| return Math.pow(el - avgRespTime, 2); | |
| }).reduce(function (a, b) { | |
| return a + b; | |
| }) / response_times.length); | |
| var min = Math.min.apply(null, response_times); | |
| var max = Math.max.apply(null, response_times); | |
| seriesUpdate(min, max, avgRespTime, stdDevRespTime); | |
| graph.update(); | |
| }); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment