{% 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>
