| <html> |
| <head> |
| <script type="text/javascript" src="https://www.google.com/jsapi"></script> |
| <script type="text/javascript"> |
| |
| google.load("visualization", "1.0", {packages:["corechart"]}); |
| google.setOnLoadCallback(drawAllCharts); |
| |
| /* |
| This funtion creates a data table from previously formatted arrays. |
| Data array is created by the ProcSnapshot class and formatted as such: |
| [Timestamp, PID1, PID2, PID3,...], also need descriptive title. |
| LABEL is a string for the title/axis labels and element name. |
| MEMTYPE is the variable for the data array. |
| */ |
| function drawOneChart(label, memtype) { |
| var data = google.visualization.arrayToDataTable(memtype); |
| var options = { |
| title: label + " [MBs] per PID Over Time", |
| hAxis: {title: "Seconds since boot", |
| titleTextStyle: {color: 'green'}}, |
| vAxis: {title: label + " [MB]", titleTextStyle: {color: 'green'}}, |
| }; |
| |
| var cdiv = document.getElementById(label); |
| var chart = new google.visualization.LineChart(cdiv); |
| chart.draw(data, options); |
| } |
| |
| /* Calls drawChart() for each different type of graph */ |
| function drawAllCharts() { |
| /* Implementation without calling drawOneChart() ten times, needs work. |
| var chartypes = {Rss: "RSS", Pss: "PSS", |
| Private_Clean: "Private Clean", |
| Private_Dirty: "Private Dirty", |
| Shared_Clean: "Shared Clean", |
| Shared_Dirty: "Shared Dirty", |
| Private: "Private", Shared: "Shared", |
| Anonymous: "Anonymous", Referenced: "Referenced"}; |
| |
| for (type in chartypes) { |
| drawOneChart(chartypes[type], type); |
| } */ |
| drawOneChart("RSS", %(Rss)s); |
| drawOneChart("PSS", %(Pss)s); |
| drawOneChart("Private Clean", %(Private_Clean)s); |
| drawOneChart("Private Dirty", %(Private_Dirty)s); |
| drawOneChart("Shared Clean", %(Shared_Clean)s); |
| drawOneChart("Shared Dirty", %(Shared_Dirty)s); |
| drawOneChart("Private", %(Private)s); |
| drawOneChart("Shared", %(Shared)s); |
| drawOneChart("Anonymous", %(Anonymous)s); |
| drawOneChart("Referenced", %(Referenced)s); |
| } |
| |
| </script> |
| </head> |
| |
| <body> |
| |
| <p> Shows memory trends by process IDs over a given period of time. </p> |
| <p> Data logged starting at %(timestamp)s </br> |
| System information: %(version)s </br> |
| ChromeOS release description: %(release)s </br> |
| [Insert additional data (events, actions, anything else that would help |
| the user understand the graphs] </p> |
| |
| </br> |
| |
| <p> Graph showing proportional set size: private + proportional shared. </p> |
| <div id="PSS", style="width:900px; height:500px; margin:auto;"></div> |
| |
| </br> |
| |
| <p> Graph showing resident set size: memory mapped into RAM. </p> |
| <div id="RSS", style="width:900px; height:500px; margin:auto;"></div> |
| |
| </br> |
| |
| <p> Graph showing total private memory. </p> |
| <div id="Private", style="width:900px; height:500px; margin:auto;"></div> |
| |
| </br> |
| |
| <p> Graph showing total shared memory. </p> |
| <div id="Shared", style="width:900px; height:500px; margin:auto;"></div> |
| |
| </br> |
| |
| <p> Graph showing dirty private memory. </p> |
| <div id="Private Dirty", style="width:900px; height:500px; margin:auto;"> |
| </div> |
| |
| </br> |
| |
| <p> Graph showing clean private memory. </p> |
| <div id="Private Clean", style="width:900px; height:500px; margin:auto;"> |
| </div> |
| |
| </br> |
| |
| <p> Graph showing dirty shared memory. </p> |
| <div id="Shared Dirty", style="width:900px; height:500px; margin:auto;"> |
| </div> |
| |
| </br> |
| |
| <p> Graph showing clean shared memory. </p> |
| <div id="Shared Clean", style="width:900px; height:500px; margin:auto;"> |
| </div> |
| |
| </br> |
| |
| <p> Graph showing total anonymous memory. </p> |
| <div id="Anonymous", style="width:900px; height:500px; margin:auto;"></div> |
| |
| </br> |
| |
| <p> Graph showing total referenced memory. </p> |
| <div id="Referenced", style="width:900px; height:500px; margin:auto;"></div> |
| |
| </body> |
| </html> |
