| <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(drawChart); |
| |
| function drawChart() { |
| /* Creating a data table from an array that is previously formatted. |
| Data array is created by the ProcSnapshot class and formatted as such: |
| [Timestamp, PID1, PID2, PID3,...], vaxis = memory type being graphed. |
| Title should describe the memory type being graphed. |
| */ |
| var data = google.visualization.arrayToDataTable(%(data)s); |
| var options = { |
| title: "%(title)s", |
| hAxis: {title: "Timestamp", titleTextStyle: {color: 'green'}}, |
| vAxis: {title: "%(vaxis)s", titleTextStyle: {color: 'green'}}, |
| }; |
| |
| var cdiv = document.getElementById('chart_div'); |
| var chart = new google.visualization.LineChart(cdiv); |
| chart.draw(data, options); |
| } |
| </script> |
| </head> |
| <body> |
| <p> Shows memory trends by process IDs over a given period of time </p> |
| <div id="chart_div" style="width: 900px; height: 500px;"></div> |
| </body> |
| </html> |
