DigOnions/2011.html at master · agrogeek/DigOnions · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Locales 2015 - Arroyomolinos de León</title>

		<script src="Chart.js"></script>
		<style type="text/css">
		*{
			font-family: sans-serif;
		}
		.legend{
			float: left;
		}
		.legend ul{
			list-style: none;
		}
		.legend ul li span{
			width: 15px;
			height: 15px;
			display: block;
			float: left;
		}
		</style>
	</head>
	<body>
		<h5>Votos por partidos</h5>
		<div id="votos-legend" class="legend"></div>
		<div id="canvas-holder">
			<canvas id="votos-area" width="200" height="200"/>
		</div>
		<h5>Composición ayuntamiento (9 concejales)</h5>
		<div id="concejales-2011"></div>
		<div id="concejales-legend" class="legend"></div>
		<div id="canvas-holder">
			<canvas id="concejales-area" width="200" height="200"/>
		</div>


	<script>

		var PSOE = "#FF0000", PSOE_highlight = "#FF5A5E", PP = "#093EA6", PP_highlight = "#2D5DBB", Independientes = "#FDB45C", Independientes_highlight = "#FFC870", IU = "#086E08", IU_highlight = "#60A260";

		var votosData = [
				{
					value: 240,
					color:PSOE,
					highlight: PSOE_highlight,
					label: "PSOE"
				},
				{
					value: 183,
					color: PP,
					highlight: PP_highlight,
					label: "PP"
				},
				{
					value: 164,
					color: Independientes,
					highlight: Independientes_highlight,
					label: "Independientes"
				},
				{
					value: 113,
					color: IU,
					highlight: IU_highlight,
					label: "IU"
				}

			];

			var concejalesData = [
				{
					value: 3,
					color:PSOE,
					highlight: PSOE_highlight,
					label: "PSOE"
				},
				{
					value: 3,
					color: PP,
					highlight: PP_highlight,
					label: "PP"
				},
				{
					value: 2,
					color: Independientes,
					highlight: Independientes_highlight,
					label: "Independientes"
				},
				{
					value: 1,
					color: IU,
					highlight: IU_highlight,
					label: "IU"
				}

			];

			window.onload = function(){
				var ctx_votos = document.getElementById("votos-area").getContext("2d");
				window.votosPie = new Chart(ctx_votos).Pie(votosData, {
					legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%> <%if(segments[i].value){%> (<%=segments[i].value%>) <%}%></li><%}%></ul>"
				});
				document.getElementById('votos-legend').innerHTML = window.votosPie.generateLegend();

				var ctx_concejales = document.getElementById("concejales-area").getContext("2d");
				window.concejalesPie = new Chart(ctx_concejales).Pie(concejalesData, {
					legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%> <%if(segments[i].value){%> (<%=segments[i].value%>) <%}%></li><%}%></ul>"
				});
				document.getElementById('concejales-legend').innerHTML = window.concejalesPie.generateLegend();
			};


	</script>
	</body>
</html>