1
2<html>
3  <head>
4    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
5    <script type="text/javascript">
6      google.load("visualization", "1", {packages:["corechart"]});
7      google.load("visualization", "1", {packages:["table"]});
8      google.setOnLoadCallback(drawChart);
9      function drawChart() {
10	  
11        var cpu_data = google.visualization.arrayToDataTable([
12          ['Bandwidth [Mbps]', 'CPU [%]', 'Max. Latency [usec]', 'Avg. Latency [usec]'],
13		  !@#$template_fill_graph!@#$ 
14															 ])
15
16        var cpu_options = {
17          title: '!@#$template_fill_head!@#$',
18          hAxis: { title: 'Bandwidth [Mbps]', format:'#.##'},
19          vAxes:[
20                {title: 'CPU Util [%]',format:'#%', minValue:0, maxValue: 1}, // Left axis
21                {title: 'Latency [usec]'}, // Right axis
22                ],
23          series: {0: {targetAxisIndex:0},
24                   1: {targetAxisIndex:1},
25                   2: {targetAxisIndex:1},
26                  },
27          colors: ["green", "red", "blue"],
28        };
29
30        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
31
32        chart.draw(cpu_data, cpu_options);	
33		
34	var plot_data = new google.visualization.DataTable();
35        plot_data.addColumn('number', 'BW [Mbps]');
36		plot_data.addColumn('number', 'PPS [Kpps]');
37        plot_data.addColumn('number', 'CPU Util. [%]');
38		plot_data.addColumn('number', 'BW / CPU');
39        plot_data.addColumn('number', 'Max. Latency [usec]');
40		plot_data.addColumn('number', 'Avg. Latency [usec]');
41		plot_data.addColumn('number', 'Pkt Drop [pkts]');
42        plot_data.addRows([
43          !@#$template_fill_table!@#$
44						  ]);
45
46        var formatter = new google.visualization.NumberFormat(
47        {fractionDigits:2});
48        formatter.format(plot_data, 0); // Apply formatter to Bandwidth util column
49        
50		var formatter = new google.visualization.NumberFormat(
51		{fractionDigits: 0});
52		formatter.format(plot_data, 1); // Apply formatter to PPS column
53
54        formatter = new google.visualization.NumberFormat(
55        {pattern:'#,###%'});
56        formatter.format(plot_data, 2); // Apply formatter to CPU util column
57        
58		formatter = new google.visualization.NumberFormat(
59		{fractionDigits: 2});
60		formatter.format(plot_data, 3); // Apply formatter to BW / CPU column
61
62        formatter = new google.visualization.NumberFormat(
63        {fractionDigits: 0});
64        formatter.format(plot_data, 4); // Apply formatter to Avg Latency util column
65        formatter.format(plot_data, 5); // Apply formatter to Max Latency util column
66        formatter.format(plot_data, 6); // Apply formatter to Pkt Drop
67
68        var table = new google.visualization.Table(document.getElementById('table_div'));
69
70        table.draw(plot_data, {showRowNumber: true});
71      }
72
73    </script>
74  </head>
75  <body>
76	<div id="chart_div" style="width: 900px; height: 500px; position: relative;"></div>
77    <div id="table_div" style="display: table"></div>
78  </body>
79</html>
80
81