<html>
  	<head>
    	<script type="text/javascript" src="/static/style/googleChart.js"></script>
    	<script type="text/javascript">
      		google.charts.load("current", {packages:["corechart"]});
      		google.charts.setOnLoadCallback(drawChart);
      		function drawChart() {
				//task图表
        		var task = google.visualization.arrayToDataTable([
          			['task', 'statistics'],
          			['成功（{{.task_number.success}}）', {{.task_number.success}}],
          			['失败（{{.task_number.failed}}）', {{.task_number.failed}}],
          			['正在执行（{{.task_number.doing}}）', {{.task_number.doing}}],
        		]);var taskOptions = {
          			title: '任务统计',
          			is3D: true,
					slices: {
			            0: { color: '#178bca' },
			            1: { color: '#67a9cf' },
						2: { color: '#a6bddb' },
			        }
        		};
       			var taskChart = new google.visualization.PieChart(document.getElementById('task'));
        		taskChart.draw(task, taskOptions);
				
				//taskLog图表
				var taskLog = google.visualization.arrayToDataTable([
          			['task', 'statistics'],
          			['成功（{{.task_log_number.success}}）', {{.task_log_number.success}}],
          			['失败（{{.task_log_number.failed}}）', {{.task_log_number.failed}}],
          			['正在执行（{{.task_log_number.doing}}）', {{.task_log_number.doing}}],
        		]);var taskLogOptions = {
          			title: '任务日志统计',
          			is3D: true,
					slices: {
			            0: { color: '#178bca' },
			            1: { color: '#67a9cf' },
						2: { color: '#a6bddb' },
			        }
        		};
				var taskLogChart = new google.visualization.PieChart(document.getElementById('taskLog'));
				taskLogChart.draw(taskLog, taskLogOptions);
				
				//节点，节电组，项目，项目组统计
				var data = google.visualization.arrayToDataTable([
			        ["name", "数量", { role: "style" } ],
			        ["项目", {{.project_number}}, "color: #178bca"],
			        ["项目组", {{.project_group_number}}, "color: #67a9cf"],
			        ["节点", {{.node_number}}, "color: #a6bddb"],
			        ["节点组", {{.node_group_number}}, "color: #e5e4e2"]
			   	]);

      			var view = new google.visualization.DataView(data);
      			view.setColumns([0, 1,
                    { 
						calc: "stringify",
                        sourceColumn: 1,
                        type: "string",
                        role: "annotation"
					},
                2]);

			    var options = {
			        title: "数据统计",
			        width: 1000,
			        height: 310,
			        bar: {groupWidth: "95%"},
			        legend: { position: "none" },
			    };
		      	var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
      			chart.draw(view, options);
     		}
    	</script>
  	</head>
  	<body>
		<div class="panel panel-default">
    		<div class="panel-body">
				<div class="row">
		            <div class="col-md-12">
		                <div class="panel panel-default">
		                    <div class="panel-heading">数据统计</div>
		                    <div class="panel-body">
		                        <div id="barchart_values" style="width: 900px; height: 300px;"></div>
		                    </div>
		                </div>
		            </div>
		        </div>
		        <div class="row">
					<div class="col-md-6">
		                <div class="panel panel-default">
		                    <div class="panel-heading">任务统计</div>
		                    <div id="task" style="width: 500px; height: 300px;"></div>
		                </div>
		            </div>
		            <div class="col-md-6">
		                <div class="panel panel-default">
		                    <div class="panel-heading">任务日志统计</div>
		                    <div id="taskLog" style="width: 500px; height: 300px;"></div>
		                </div>
		            </div>
				</div>
			</div>
		</div>
  	</body>
</html>