ajout courbe evolution du portefeuille

caotek_mesavoirs/templates/actifs/allocation_list.pt

@@ -4,7 +4,7 @@
 	<div tal:condition="message" tal:content="message" class="alert alert-danger" />
 	
 	<div class="row">
-		<div class="col-md-6">
+		<div class="col-md-5">
 		<p>
 			<a href="allocation_edit/0" class="btn btn-success" role="button">
 				<span class="glyphicon glyphicon-plus"></span> Nouvelle classe</a>
@@ -31,8 +31,37 @@
 			</tbody>
 		</table>
 		</div>
+		
+		<div class="col-md-7">
+			<!--   graphique donut  -->
+			<div id="donutchart" style="width: 100%; height: 500px;"></div>
+		</div>
 	</div>	
 
+	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+	<script type="text/javascript">
+		google.charts.load("current", {packages:["corechart"]});
+		google.charts.setOnLoadCallback(drawChart);
+		var dataSet = ${donut_data};
+
+	function drawChart() {
+		var data = google.visualization.arrayToDataTable(dataSet);
+
+		var options = {
+			title: 'Allocation cible',
+			pieHole: 0.4,
+			slices: {
+				0: {color: 'SteelBlue'}, 1: {color: 'LightSteelBlue'},
+				2: {color: 'Maroon'}, 3: {color: 'Brown'},
+				5: {offset: 0.2, color: 'DarkGreen'}, 6: {offset: 0.3, color: 'Green'},
+			},
+		};
+
+		var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
+		chart.draw(data, options);
+	}
+	</script>
+
 </div><!-- content -->
 </metal:block>