graph_template.html revision 8b52a31e
18b52a31eSHanoh Haim
28b52a31eSHanoh Haim<html>
38b52a31eSHanoh Haim  <head>
48b52a31eSHanoh Haim    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
58b52a31eSHanoh Haim    <script type="text/javascript">
68b52a31eSHanoh Haim      google.load("visualization", "1", {packages:["corechart"]});
78b52a31eSHanoh Haim      google.load("visualization", "1", {packages:["table"]});
88b52a31eSHanoh Haim      google.setOnLoadCallback(drawChart);
98b52a31eSHanoh Haim      function drawChart() {
108b52a31eSHanoh Haim	  
118b52a31eSHanoh Haim        var cpu_data = google.visualization.arrayToDataTable([
128b52a31eSHanoh Haim          ['Bandwidth [Mbps]', 'CPU [%]', 'Max. Latency [usec]', 'Avg. Latency [usec]'],
138b52a31eSHanoh Haim		  !@#$template_fill_graph!@#$ 
148b52a31eSHanoh Haim															 ])
158b52a31eSHanoh Haim
168b52a31eSHanoh Haim        var cpu_options = {
178b52a31eSHanoh Haim          title: '!@#$template_fill_head!@#$',
188b52a31eSHanoh Haim          hAxis: { title: 'Bandwidth [Mbps]', format:'#.##'},
198b52a31eSHanoh Haim          vAxes:[
208b52a31eSHanoh Haim                {title: 'CPU Util [%]',format:'#%', minValue:0, maxValue: 1}, // Left axis
218b52a31eSHanoh Haim                {title: 'Latency [usec]'}, // Right axis
228b52a31eSHanoh Haim                ],
238b52a31eSHanoh Haim          series: {0: {targetAxisIndex:0},
248b52a31eSHanoh Haim                   1: {targetAxisIndex:1},
258b52a31eSHanoh Haim                   2: {targetAxisIndex:1},
268b52a31eSHanoh Haim                  },
278b52a31eSHanoh Haim          colors: ["green", "red", "blue"],
288b52a31eSHanoh Haim        };
298b52a31eSHanoh Haim
308b52a31eSHanoh Haim        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
318b52a31eSHanoh Haim
328b52a31eSHanoh Haim        chart.draw(cpu_data, cpu_options);	
338b52a31eSHanoh Haim		
348b52a31eSHanoh Haim	var plot_data = new google.visualization.DataTable();
358b52a31eSHanoh Haim        plot_data.addColumn('number', 'BW [Mbps]');
368b52a31eSHanoh Haim		plot_data.addColumn('number', 'PPS [Kpps]');
378b52a31eSHanoh Haim        plot_data.addColumn('number', 'CPU Util. [%]');
388b52a31eSHanoh Haim		plot_data.addColumn('number', 'BW / CPU');
398b52a31eSHanoh Haim        plot_data.addColumn('number', 'Max. Latency [usec]');
408b52a31eSHanoh Haim		plot_data.addColumn('number', 'Avg. Latency [usec]');
418b52a31eSHanoh Haim		plot_data.addColumn('number', 'Pkt Drop [pkts]');
428b52a31eSHanoh Haim        plot_data.addRows([
438b52a31eSHanoh Haim          !@#$template_fill_table!@#$
448b52a31eSHanoh Haim						  ]);
458b52a31eSHanoh Haim
468b52a31eSHanoh Haim        var formatter = new google.visualization.NumberFormat(
478b52a31eSHanoh Haim        {fractionDigits:2});
488b52a31eSHanoh Haim        formatter.format(plot_data, 0); // Apply formatter to Bandwidth util column
498b52a31eSHanoh Haim        
508b52a31eSHanoh Haim		var formatter = new google.visualization.NumberFormat(
518b52a31eSHanoh Haim		{fractionDigits: 0});
528b52a31eSHanoh Haim		formatter.format(plot_data, 1); // Apply formatter to PPS column
538b52a31eSHanoh Haim
548b52a31eSHanoh Haim        formatter = new google.visualization.NumberFormat(
558b52a31eSHanoh Haim        {pattern:'#,###%'});
568b52a31eSHanoh Haim        formatter.format(plot_data, 2); // Apply formatter to CPU util column
578b52a31eSHanoh Haim        
588b52a31eSHanoh Haim		formatter = new google.visualization.NumberFormat(
598b52a31eSHanoh Haim		{fractionDigits: 2});
608b52a31eSHanoh Haim		formatter.format(plot_data, 3); // Apply formatter to BW / CPU column
618b52a31eSHanoh Haim
628b52a31eSHanoh Haim        formatter = new google.visualization.NumberFormat(
638b52a31eSHanoh Haim        {fractionDigits: 0});
648b52a31eSHanoh Haim        formatter.format(plot_data, 4); // Apply formatter to Avg Latency util column
658b52a31eSHanoh Haim        formatter.format(plot_data, 5); // Apply formatter to Max Latency util column
668b52a31eSHanoh Haim        formatter.format(plot_data, 6); // Apply formatter to Pkt Drop
678b52a31eSHanoh Haim
688b52a31eSHanoh Haim        var table = new google.visualization.Table(document.getElementById('table_div'));
698b52a31eSHanoh Haim
708b52a31eSHanoh Haim        table.draw(plot_data, {showRowNumber: true});
718b52a31eSHanoh Haim      }
728b52a31eSHanoh Haim
738b52a31eSHanoh Haim    </script>
748b52a31eSHanoh Haim  </head>
758b52a31eSHanoh Haim  <body>
768b52a31eSHanoh Haim	<div id="chart_div" style="width: 900px; height: 500px; position: relative;"></div>
778b52a31eSHanoh Haim    <div id="table_div" style="display: table"></div>
788b52a31eSHanoh Haim  </body>
798b52a31eSHanoh Haim</html>
808b52a31eSHanoh Haim
81