{% load l10n %} <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() { var data_cpu = new google.visualization.DataTable(); data_cpu.addColumn('string', 'Topping'); data_cpu.addColumn('number', 'Free'); data_cpu.addColumn('number', 'Allocated'); data_cpu.addColumn('number', 'Used'); data_cpu.addRows([ ['CPU %', {{STAT.CPU.FREE_CPU}},{{STAT.CPU.ALLOC_CPU}},{{STAT.CPU.USED_CPU}}], ]); var cpu_options = { 'title':'Cloud CPU usage percent (100/CPU)', 'width':900, 'height':50, isStacked: true }; var data_mem = new google.visualization.DataTable(); data_mem.addColumn('string', 'Topping'); data_mem.addColumn('number', 'Slices'); data_mem.addRows([ ['Free Memory', {{STAT.MEM.FREE_MEM|unlocalize}}], ['Allocated Memory', {{STAT.MEM.ALLOC_MEM|unlocalize}}], ['Used Memory', {{STAT.MEM.USED_MEM|unlocalize}}], ]); var mem_options = { 'title':'Cloud Memory usage in {{STAT.DIMENSION}}', 'width':400, 'height':300, slices: { 0: {color: 'blue'}, 1:{color: 'orange'}, 2:{color: 'red'} }, }; var chart = new google.visualization.BarChart(document.getElementById('chart_cpu_div')); chart.draw(data_cpu, cpu_options); var chart = new google.visualization.PieChart(document.getElementById('chart_mem_div')); chart.draw(data_mem, mem_options); } </script> </head> <body> <div>Running VMs: {{STAT.VMS}}</div> <div id="chart_cpu_div"></div> <div id="chart_mem_div"></div> </body> </html>