Commit c88332271d6db4f6e05c1953067d8d3703bab1b0
1 parent
47204b77
Exists in
master
and in
2 other branches
Modified window view template to display the charts
Showing
1 changed file
with
1189 additions
and
58 deletions
Show diff stats
bulletin/templates/bulletin/window_view.html
... | ... | @@ -6,56 +6,62 @@ |
6 | 6 | <html> |
7 | 7 | <head> |
8 | 8 | <title>{{ title }} | {{ theme.title }}</title> |
9 | - <script type="text/javascript" src="{% static 'js/jquery-ui.js' %}"></script> | |
10 | - <script type="text/javascript" src="{% static 'js/jquery-3.1.0.min.js' %}"></script> | |
11 | - | |
12 | - <meta http-equiv="Cache-Control" content="no-cache, no-store" /> | |
13 | - <link href="{{ theme.favicon_url }}" rel="shortcut icon" /> | |
14 | - | |
15 | - <link rel="stylesheet" type="text/css" href="{% static 'bootstrap-3.3.7/css/bootstrap.css' %}"> | |
16 | - <link rel="stylesheet" type="text/css" href="{% static 'material/css/bootstrap-material-design.min.css' %}"> | |
17 | - <link rel="stylesheet" type="text/css" href="{% static 'material/css/ripples.css' %}"> | |
18 | - <link rel="stylesheet" type="text/css" href="{% static 'material/css/ripples.min.css' %}"> | |
19 | - <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-slider.css' %}"> | |
20 | - <link rel="stylesheet" type="text/css" href="{% static 'font-awesome-4.6.3/css/font-awesome.min.css' %}"> | |
21 | - <script type="text/javascript" src="{% static 'bootstrap-3.3.7/js/bootstrap.min.js' %}"></script> | |
22 | - <link rel="stylesheet" type="text/css" href="{% static 'bootstrap-3.3.7/css/bootstrap.css' %}"> | |
23 | - <!-- Custom styles --> | |
24 | - <link rel="stylesheet" type="text/css" href="{% static 'css/base/amadeus_responsive.css' %}"> | |
25 | - <link rel="stylesheet" type="text/css" href="{% static 'css/base/amadeus.css' %}"> | |
26 | 9 | |
10 | + | |
11 | + <!-- jQuery & jQuery UI --> | |
12 | + <script type="text/javascript" src="{% static 'js/jquery-3.1.0.min.js' %}"></script> | |
13 | + <script type="text/javascript" src="{% static 'js/jquery-ui.js' %}"></script> | |
14 | + | |
15 | + <meta http-equiv="Cache-Control" content="no-cache, no-store" /> | |
27 | 16 | <link href="{{ theme.favicon_url }}" rel="shortcut icon" /> |
28 | 17 | <!-- Roboto font --> |
29 | 18 | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css"> |
30 | 19 | <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> |
31 | - <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-datetimepicker.css' %}"> | |
20 | + | |
21 | + <!-- Bootstrap and themes (material) --> | |
22 | + <link rel="stylesheet" type="text/css" href="{% static 'bootstrap-3.3.7/css/bootstrap.css' %}"> | |
23 | + | |
24 | + <link rel="stylesheet" type="text/css" href="{% static 'material/css/bootstrap-material-design.min.css' %}"> | |
25 | + <link rel="stylesheet" type="text/css" href="{% static 'material/css/ripples.css' %}"> | |
26 | + <link rel="stylesheet" type="text/css" href="{% static 'material/css/ripples.min.css' %}"> | |
27 | + | |
28 | + <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-datetimepicker.css' %}"> | |
32 | 29 | <link rel="stylesheet" type="text/css" href="{% static 'css/alertifyjs/alertify.min.css' %}"> |
33 | 30 | <link rel="stylesheet" type="text/css" href="{% static 'css/alertifyjs/themes/bootstrap.css' %}"> |
34 | 31 | |
32 | + <link rel="stylesheet" type="text/css" href="{% static 'css/jPages.css' %}"> | |
33 | + | |
34 | + <script src="{% static 'js/cropper.min.js' %}"></script> <!-- Js for cropper--> | |
35 | + <link href="{% static 'css/cropper.min.css' %}" rel="stylesheet"> <!-- CSS for cropper--> | |
36 | + | |
37 | + <script type="text/javascript" src="{% static 'js/printThis.js' %}"></script> <!-- Print this plugin js--> | |
38 | + | |
39 | + | |
40 | + <script type="text/javascript" src="{% static 'bootstrap-3.3.7/js/bootstrap.min.js' %}"></script> | |
41 | + <!--<script type="text/javascript" src="{% static 'js/bootstrap-acessibility2.min.js' %}"></script>--> | |
35 | 42 | <script type="text/javascript" src="{% static 'material/js/material.min.js' %}"></script> |
36 | 43 | <script type="text/javascript" src="{% static 'material/js/ripples.min.js' %}"></script> |
37 | 44 | <script type="text/javascript" src="{% static 'js/moment-with-locales.js' %}"></script> |
38 | - <script type="text/javascript" src="{% static 'js/bootstrap-datetimepicker.js' %}"></script> | |
45 | + <script type="text/javascript" src="{% static 'js/bootstrap-datetimepicker.js' %}"></script> | |
39 | 46 | <script type="text/javascript" src="{% static 'js/alertify.min.js' %}"></script> |
40 | 47 | <script type="text/javascript" src="{% static 'js/jscookie.js' %}"></script> |
41 | - <script type="text/javascript" src="{% static 'js/jPages.js' %}"></script> | |
42 | - <script type="text/javascript" src="{% static 'js/d3.min.js' %}"></script> | |
48 | + <script type="text/javascript" src="{% static 'js/jPages.js' %}"></script> | |
49 | + <script type="text/javascript" src="{% static 'js/d3.v3.min.js' %}"></script> | |
43 | 50 | <script type="text/javascript" src="{% static 'subjects/js/modal_subject.js' %}"></script> |
44 | 51 | |
52 | + <!-- Font awesome --> | |
53 | + <link rel="stylesheet" type="text/css" href="{% static 'font-awesome-4.6.3/css/font-awesome.min.css' %}"> | |
45 | 54 | |
46 | - <script type="text/javascript">$.material.init()</script> | |
47 | - <script src="{% static 'js/main.js' %}"></script> | |
48 | - <script src="{% static 'js/socket.js' %}"></script> | |
49 | - | |
50 | - <!-- Summernote --> | |
51 | - <script src="{% static 'summernote/summernote.js' %}" type="text/javascript"></script> | |
52 | - <link href="{% static 'summernote/summernote.css' %}" type="text/css" rel="stylesheet" /> | |
55 | + <!-- Custom styles --> | |
56 | + <link rel="stylesheet" type="text/css" href="{% static 'css/base/amadeus_responsive.css' %}"> | |
57 | + <link rel="stylesheet" type="text/css" href="{% static 'css/base/amadeus.css' %}"> | |
53 | 58 | |
54 | 59 | {% with 'css/themes/'|add:theme.css_style|add:'.css' as theme_selected %} |
55 | 60 | <link rel="stylesheet" type="text/css" href="{% static theme_selected %}"> |
56 | 61 | {% endwith %} |
57 | 62 | |
58 | - <script type="text/javascript" src="{% static 'js/bootstrap-slider.js' %} "></script> | |
63 | + | |
64 | + <link rel="stylesheet" href="{% static 'css/estilo.css' %}"> | |
59 | 65 | </head> |
60 | 66 | <body style="background: #FFF"> |
61 | 67 | <div class="container-fluid" style="padding-top: 20px"> |
... | ... | @@ -63,39 +69,127 @@ |
63 | 69 | {{ bulletin.content }} |
64 | 70 | {% endautoescape %} |
65 | 71 | |
66 | - <hr /> | |
67 | 72 | |
68 | - <div class="row"> | |
69 | - <div class="col-md-12"> | |
70 | - <b><h5> {% trans "Check your goals" %}:</b></h5> | |
71 | - <table class="table table-bordered"> | |
72 | - <thead> | |
73 | - <tr> | |
74 | - <th style="text-align:center;vertical-align:middle" colspan="1" rowspan="2">Meta</th> | |
75 | - <th style="text-align:center;vertical-align:middle" colspan="1" rowspan="2">Média da Turma</th> | |
76 | - <th style="text-align:center" colspan="3">Dados Individuais</th> | |
77 | - </tr> | |
78 | - <tr> | |
79 | - <th style="text-align:center">Desejada</th> | |
80 | - <th style="text-align:center">Estabelecida</th> | |
81 | - <th style="text-align:center">Alcançada</th> | |
82 | - </tr> | |
83 | - </thead> | |
84 | - <tbody> | |
85 | - {% for meta in metas%} | |
73 | + | |
74 | + <div style="padding-left: 80px;padding-right: 80px;"> | |
75 | + <div align="left" style="font-size:22px; color: #878787; padding-top: 30px;">Confira as suas metas</div> | |
76 | + <hr style="height:2px; background-color:#878787; margin-top: 5px;"> | |
77 | + <div class="row"> | |
78 | + <div class="col-md-4"> | |
79 | + <div style="font-size:16px; color: #000; padding-botom: 10px;"><b>Metas Atingidas</b></div> | |
80 | + <div id="donut_chart" align="center"></div> | |
81 | + </div> | |
82 | + | |
83 | + <div class="col-md-8"> | |
84 | + <div style="font-size:16px; text-align:left; color: #000; padding-left: 10px; "><b>Detalhamento das metas</b></div> | |
85 | + <hr style="height:2px; background-color:#878787;margin-top: 5px;margin-bottom: 5px;"> | |
86 | + <table class="table table-hover"> | |
87 | + <thead> | |
88 | + <tr> | |
89 | + <th style="text-align:center">Descrição</th> | |
90 | + <th style="width:150px; text-align:center">Recomendação </br> do(a) professor(a)</th> | |
91 | + <th style="text-align:center">Mádia da turma</th> | |
92 | + <th style="text-align:center">Sua meta</th> | |
93 | + <th style="text-align:center">Seu resultado</th> | |
94 | + </tr> | |
95 | + </thead> | |
96 | + <tbody> | |
97 | + {% for meta in metas%} | |
98 | + <tr> | |
99 | + <th style="font-weight: normal;">{{ meta.description }}</th> | |
100 | + <th style="text-align:center;font-weight: normal;">{{ meta.desejada }} %</th> | |
101 | + <td style="text-align:center;font-weight: normal;">{{ meta.media }}%</td> | |
102 | + <th style="text-align:center; font-weight: normal;">{{ meta.estabelecida }}%</th> | |
103 | + | |
104 | + | |
105 | + <!-- Cor amarela --> | |
106 | + {% if meta.alcancada < meta.desejada and meta.alcancada > meta.estabelecida %} | |
107 | + <th style="text-align:center;background-color:#f3ff00 ; font-weight: normal;">{{ meta.alcancada }}%</th> | |
108 | + {% endif %} | |
109 | + | |
110 | + {% if meta.alcancada > meta.desejada and meta.alcancada < meta.estabelecida %} | |
111 | + <th style="text-align:center;background-color:#f3ff00 ; font-weight: normal;">{{ meta.alcancada }}%</th> | |
112 | + | |
113 | + {% endif %} | |
114 | + <!-- Cor amarela --> | |
115 | + | |
116 | + | |
117 | + <!-- Cor verde --> | |
118 | + {% if meta.alcancada > meta.desejada and meta.alcancada > meta.estabelecida %} | |
119 | + <th style="text-align:center;background-color:#7bdc42 ; font-weight: normal;">{{ meta.alcancada }}%</th> | |
120 | + {% endif %} | |
121 | + <!-- Cor verde --> | |
122 | + | |
123 | + <!-- Cor vermelha --> | |
124 | + {% if meta.alcancada < meta.desejada and meta.alcancada < meta.estabelecida %} | |
125 | + <th style="text-align:center;background-color:#ff0000; font-weight: normal;">{{ meta.alcancada }}%</th> | |
126 | + | |
127 | + {% endif %} | |
128 | + <!-- Cor vermelha --> | |
129 | + | |
130 | + | |
131 | + </tr> | |
132 | + | |
133 | + {% endfor %} | |
134 | + | |
135 | + | |
136 | + </tbody> | |
137 | + </table> | |
138 | + <hr style="height:1px; background-color:#878787;margin-top: -20px;"> | |
139 | + </div> | |
140 | + </div> | |
141 | + </div> | |
142 | + <div style="padding-left: 80px;padding-right: 80px;"> | |
143 | + <div align="left" style="font-size:22px; color: #878787; padding-top: 30px; ">Indicadores relevantes para o seu desempenho</div> | |
144 | + <hr style="height:2px; background-color:#878787; margin-top: 5px;"> | |
145 | + <div class="row" style="padding-left: 15px;" > | |
146 | + <table > | |
147 | + <tr > | |
148 | + <td style="background-color:#002F4B; width: 20px;"></td> | |
149 | + <td style="padding-left: 5px;">Seu ressultado</td> | |
150 | + <td style="width: 20px"></td> | |
151 | + <td style="background-color:#35ae5d; width: 20px;"></td> | |
152 | + <td style="padding-left: 5px;">Nível acima da mediana dos aprovados</td> | |
153 | + <td style="width: 20px"></td> | |
154 | + <td style="background-color:#ffd75d; width: 20px;"></td> | |
155 | + <td style="padding-left: 5px;">Nível abaixo da mediana dos aprovados</td> | |
156 | + <td style="width: 30px"></td> | |
157 | + </tr> | |
158 | + </table> | |
159 | + </div> | |
160 | + | |
161 | + <div class="row" style="padding-left: 10px;"> | |
162 | + <div class="col-md-7" > | |
163 | + <div class="row"> | |
164 | + <div id="bullet_chart"> </div> | |
165 | + </div> | |
166 | + </div> | |
167 | + <div class="col-md-5"> | |
168 | + | |
169 | + <div style="font-size:16px; text-align:left; color: #000; padding-left: 20px;padding-top: 30px; "> | |
170 | + <b>Descrição dos indicadores</b> | |
171 | + </div> | |
172 | + | |
173 | + <hr style="height:2px; background-color:#878787;margin-top: 5px;margin-bottom: -1px;"> | |
174 | + | |
175 | + <table class="table table-hover"> | |
176 | + <tbody> | |
177 | + {% for titulo in titulos %} | |
86 | 178 | <tr> |
87 | - <td>{{ meta.description }}</td> | |
88 | - <td></td> | |
89 | - <td style="text-align:center">{{ meta.desejada }} %</td> | |
90 | - <td style="text-align:center">{{ meta.estabelecida }} %</td> | |
91 | - <td style="text-align:center">%</td> | |
179 | + <th style="width:110px;"> | |
180 | + Indicador 0{{forloop.counter }}: | |
181 | + </th> | |
182 | + <th style="text-align:left; font-weight: normal; padding-left:0px;"> | |
183 | + {{titulo}} | |
184 | + </th> | |
92 | 185 | </tr> |
186 | + {% endfor %} | |
93 | 187 | |
94 | - {% endfor %} | |
95 | - </tbody> | |
96 | - </table> | |
97 | - </div> | |
98 | - </div> | |
188 | + </tbody> | |
189 | + </table> | |
190 | + </div> | |
191 | + </div> | |
192 | + </div> | |
99 | 193 | |
100 | 194 | <div class="row"> |
101 | 195 | <div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 alert-warning bulletin-warning"> |
... | ... | @@ -132,5 +226,1042 @@ |
132 | 226 | </div> |
133 | 227 | |
134 | 228 | |
229 | + <script type="text/javascript"> | |
230 | + // Variável obtidas a partir do número de metas atendidas | |
231 | + var percent = "{{ percent }}"; | |
232 | + | |
233 | + | |
234 | + | |
235 | + // Script para a geração do gráfico de metas atingidas | |
236 | + var ratio=percent/100; | |
237 | + var pie = d3.layout.pie() | |
238 | + .value(function(d){return d}) | |
239 | + .sort(null); | |
240 | + var w=200,h=200; | |
241 | + var outerRadius=(w/2)-10; | |
242 | + var innerRadius=70; | |
243 | + var color = ['#ececec','#002F4B']; | |
244 | + var arc=d3.svg.arc() | |
245 | + .innerRadius(innerRadius) | |
246 | + .outerRadius(outerRadius) | |
247 | + .startAngle(0) | |
248 | + .endAngle(2*Math.PI); | |
249 | + var arcLine=d3.svg.arc() | |
250 | + .innerRadius(innerRadius) | |
251 | + .outerRadius(outerRadius) | |
252 | + .cornerRadius(20) | |
253 | + .startAngle(-0.05); | |
254 | + var svg=d3.select("#donut_chart") | |
255 | + .append("svg") | |
256 | + .attr({ | |
257 | + width:w, | |
258 | + height:h, | |
259 | + class:'shadow' | |
260 | + }).append('g') | |
261 | + .attr({ | |
262 | + transform:'translate('+w/2+','+h/2+')' | |
263 | + }); | |
264 | + var defs = svg.append("svg:defs"); | |
265 | + var inset_shadow = defs.append("svg:filter") | |
266 | + .attr("id", "inset-shadow"); | |
267 | + inset_shadow.append("svg:feOffset") | |
268 | + .attr({ | |
269 | + dx:0, | |
270 | + dy:0 | |
271 | + }); | |
272 | + inset_shadow.append("svg:feGaussianBlur") | |
273 | + .attr({ | |
274 | + stdDeviation:4, | |
275 | + result:'offset-blur' | |
276 | + }); | |
277 | + inset_shadow.append("svg:feComposite") | |
278 | + .attr({ | |
279 | + operator:'out', | |
280 | + in:'SourceGraphic', | |
281 | + in2:'offset-blur', | |
282 | + result:'inverse' | |
283 | + }); | |
284 | + inset_shadow.append("svg:feFlood") | |
285 | + .attr({ | |
286 | + 'flood-color':'black', | |
287 | + 'flood-opacity':.7, | |
288 | + result:'color' | |
289 | + }); | |
290 | + inset_shadow.append("svg:feComposite") | |
291 | + .attr({ | |
292 | + operator:'in', | |
293 | + in:'color', | |
294 | + in2:'inverse', | |
295 | + result:'shadow' | |
296 | + }); | |
297 | + inset_shadow.append("svg:feComposite") | |
298 | + .attr({ | |
299 | + operator:'over', | |
300 | + in:'shadow', | |
301 | + in2:'SourceGraphic' | |
302 | + }); | |
303 | + var pathBackground=svg.append('path') | |
304 | + .attr({ | |
305 | + d:arc | |
306 | + }) | |
307 | + .style({ | |
308 | + fill:color[0], | |
309 | + filter:'url(#inset-shadow)' | |
310 | + }); | |
311 | + var pathForeground=svg.append('path') | |
312 | + .datum({endAngle:0}) | |
313 | + .attr({ | |
314 | + d:arcLine | |
315 | + }) | |
316 | + .style({ | |
317 | + fill:color[1], | |
318 | + filter:'url(#inset-shadow)' | |
319 | + }); | |
320 | + var circle=svg.append('circle') | |
321 | + .attr({ | |
322 | + cx:0, | |
323 | + cy:0, | |
324 | + r:innerRadius | |
325 | + }) | |
326 | + .style({ | |
327 | + fill:color[0], | |
328 | + 'fill-opacity':.1 | |
329 | + }); | |
330 | + var middleCount=svg.append('text') | |
331 | + .datum(0) | |
332 | + .text(function(d){ | |
333 | + return d+'%'; | |
334 | + }) | |
335 | + .attr({ | |
336 | + class:'middleText', | |
337 | + 'text-anchor':'middle', | |
338 | + dy:12 | |
339 | + }) | |
340 | + .style({ | |
341 | + fill:d3.rgb(color[1]), | |
342 | + 'font-size':'50px', | |
343 | + filter:'url(#inset-shadow)' | |
344 | + }); | |
345 | + var oldValue=0; | |
346 | + var arcTween=function(transition, newValue,oldValue) { | |
347 | + transition.attrTween("d", function (d) { | |
348 | + var interpolate = d3.interpolate(d.endAngle, ((2*Math.PI))*(newValue/100)); | |
349 | + var interpolateCount = d3.interpolate(oldValue, newValue); | |
350 | + return function (t) { | |
351 | + d.endAngle = interpolate(t); | |
352 | + middleCount.text(Math.floor(interpolateCount(t))+'%'); | |
353 | + return arcLine(d); | |
354 | + }; | |
355 | + }); | |
356 | + }; | |
357 | + var animate=function(){ | |
358 | + pathForeground.transition() | |
359 | + .duration(1500) | |
360 | + .ease('cubic') | |
361 | + .call(arcTween,percent,oldValue); | |
362 | + oldValue=percent; | |
363 | + }; | |
364 | + setTimeout(animate,0); | |
365 | + | |
366 | + </script> | |
367 | + | |
368 | + <script type="text/javascript"> | |
369 | + // Script para a geração do gráfico de indicadores relevantes | |
370 | + var mediana1 = parseFloat("{{medianas.0}}".replace(",",".")) | |
371 | + var mediana2 = parseFloat("{{medianas.1}}".replace(",",".")) | |
372 | + var mediana3 = parseFloat("{{medianas.2}}".replace(",",".")) | |
373 | + var mediana4 = parseFloat("{{medianas.3}}".replace(",",".")) | |
374 | + var mediana5 = parseFloat("{{medianas.4}}".replace(",",".")) | |
375 | + var mediana6 = parseFloat("{{medianas.5}}".replace(",",".")) | |
376 | + | |
377 | + var maximo1 = {{maximos.0}} | |
378 | + var maximo2 = {{maximos.1}} | |
379 | + var maximo3 = {{maximos.2}} | |
380 | + var maximo4 = {{maximos.3}} | |
381 | + var maximo5 = {{maximos.4}} | |
382 | + var maximo6 = {{maximos.5}} | |
383 | + | |
384 | + var resultado1 = {{resultados.0}} | |
385 | + var resultado2 = {{resultados.1}} | |
386 | + var resultado3 = {{resultados.2}} | |
387 | + var resultado4 = {{resultados.3}} | |
388 | + var resultado5 = {{resultados.4}} | |
389 | + var resultado6 = {{resultados.5}} | |
390 | + | |
391 | + | |
392 | + // Variável com os dados obtidos da planilha carregada com os dados dos indicadores | |
393 | + var dataset = [ | |
394 | + {indicador: "Frequência", valor: resultado1, mediana: mediana1, maximo: maximo1}, | |
395 | + {indicador: "Nota no Simulado 01", valor: resultado2, mediana: mediana2, maximo: maximo2}, | |
396 | + {indicador: "Nota no simulado 02", valor: resultado3, mediana: mediana3, maximo: maximo3}, | |
397 | + {indicador: "Atividades on-line", valor: resultado4, mediana: mediana4, maximo: maximo4}, | |
398 | + {indicador: "Número de dias que viu o simulado", valor: resultado5, mediana: mediana5, maximo: maximo5}, | |
399 | + {indicador: "Número de acesso ao anbiente virtual", valor: resultado6, mediana: mediana6, maximo: maximo6} | |
400 | + ]; | |
401 | + | |
402 | + // Script para a geração do gráfico de indicadores relevantes | |
403 | + | |
404 | + var ind01 = [{indicador: dataset[0].indicador , valor: dataset[0].valor, mediana: dataset[0].mediana, maximo: dataset[0].maximo}]; | |
405 | + var ind02 = [{indicador: dataset[1].indicador , valor: dataset[1].valor, mediana: dataset[1].mediana, maximo: dataset[1].maximo}]; | |
406 | + var ind03 = [{indicador: dataset[2].indicador , valor: dataset[2].valor, mediana: dataset[2].mediana, maximo: dataset[2].maximo}]; | |
407 | + var ind04 = [{indicador: dataset[3].indicador , valor: dataset[3].valor, mediana: dataset[3].mediana, maximo: dataset[3].maximo}]; | |
408 | + var ind05 = [{indicador: dataset[4].indicador , valor: dataset[4].valor, mediana: dataset[4].mediana, maximo: dataset[4].maximo}]; | |
409 | + var ind06 = [{indicador: dataset[5].indicador , valor: dataset[5].valor, mediana: dataset[5].mediana, maximo: dataset[5].maximo}]; | |
410 | + | |
411 | + // Variáveis de largura e altura da área de desenho do SVG | |
412 | + var w = 110; | |
413 | + var h = 350; | |
414 | + | |
415 | + // Margens | |
416 | + var margin = {top: 40,bottom: 40,left: 40,right: 10}; | |
417 | + | |
418 | + // Definindo a área em que o gráfico será construído dentro da área de desenho | |
419 | + var width = w - margin.left - margin.right; | |
420 | + var height = h - margin.top - margin.bottom; | |
421 | + | |
422 | + // Definindo x1 com escala ordinal | |
423 | + var x = d3.scale.ordinal().domain(ind01.map(function(entry){return "Indicador 01";})).rangeBands([0, width]); | |
424 | + var x2 = d3.scale.ordinal().domain(ind02.map(function(entry){return "Indicador 02";})).rangeBands([0, width]); | |
425 | + var x3 = d3.scale.ordinal().domain(ind03.map(function(entry){return "Indicador 03";})).rangeBands([0, width]); | |
426 | + var x4 = d3.scale.ordinal().domain(ind04.map(function(entry){return "Indicador 04";})).rangeBands([0, width]); | |
427 | + var x5 = d3.scale.ordinal().domain(ind05.map(function(entry){return "Indicador 05";})).rangeBands([0, width]); | |
428 | + var x6 = d3.scale.ordinal().domain(ind06.map(function(entry){return "Indicador 06";})).rangeBands([0, width]); | |
429 | + | |
430 | + // Definindo y com escala linear | |
431 | + var y = d3.scale.linear().domain([0, d3.max(ind01, function(d){return d.maximo;})]).range([height, 0]); | |
432 | + var y2 = d3.scale.linear().domain([0, d3.max(ind02, function(d){return d.maximo;})]).range([height, 0]); | |
433 | + var y3 = d3.scale.linear().domain([0, d3.max(ind03, function(d){return d.maximo;})]).range([height, 0]); | |
434 | + var y4 = d3.scale.linear().domain([0, d3.max(ind04, function(d){return d.maximo;})]).range([height, 0]); | |
435 | + var y5 = d3.scale.linear().domain([0, d3.max(ind05, function(d){return d.maximo;})]).range([height, 0]); | |
436 | + var y6 = d3.scale.linear().domain([0, d3.max(ind06, function(d){return d.maximo;})]).range([height, 0]); | |
437 | + | |
438 | + // Desenhando o eixo x | |
439 | + var xAxis = d3.svg.axis().scale(x).orient("bottom"); | |
440 | + var xAxis2 = d3.svg.axis().scale(x2).orient("bottom"); | |
441 | + var xAxis3 = d3.svg.axis().scale(x3).orient("bottom"); | |
442 | + var xAxis4 = d3.svg.axis().scale(x4).orient("bottom"); | |
443 | + var xAxis5 = d3.svg.axis().scale(x5).orient("bottom"); | |
444 | + var xAxis6 = d3.svg.axis().scale(x6).orient("bottom"); | |
445 | + | |
446 | + // Desenhando o eixo y | |
447 | + var yAxis = d3.svg.axis().scale(y).orient("left"); | |
448 | + var yAxis2 = d3.svg.axis().scale(y2).orient("left"); | |
449 | + var yAxis3 = d3.svg.axis().scale(y3).orient("left"); | |
450 | + var yAxis4 = d3.svg.axis().scale(y4).orient("left"); | |
451 | + var yAxis5 = d3.svg.axis().scale(y5).orient("left"); | |
452 | + var yAxis6 = d3.svg.axis().scale(y6).orient("left"); | |
453 | + | |
454 | + // Definindo linhas de grid | |
455 | + var yGridlines = d3.svg.axis() | |
456 | + .scale(y) | |
457 | + .tickSize(-width,0,0) | |
458 | + .tickFormat("") | |
459 | + .orient("left"); | |
460 | + | |
461 | + | |
462 | + // Definindo o objeto SVG | |
463 | + var svg = d3.select("#bullet_chart").append("svg").attr("id", "bullet_chart1").attr("width", 6*w).attr("height", h); | |
464 | + | |
465 | + // Definindo um objeto SVG agrupado | |
466 | + var bullet_chart = svg.append("g").classed("display", true).attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
467 | + var bullet_chart2 = svg.append("g").classed("display", true).attr("transform", "translate(" + (margin.left+w) + "," + margin.top + ")"); | |
468 | + var bullet_chart3 = svg.append("g").classed("display", true).attr("transform", "translate(" + (margin.left+2*w) + "," + margin.top + ")"); | |
469 | + var bullet_chart4 = svg.append("g").classed("display", true).attr("transform", "translate(" + (margin.left+3*w) + "," + margin.top + ")"); | |
470 | + var bullet_chart5 = svg.append("g").classed("display", true).attr("transform", "translate(" + (margin.left+4*w) + "," + margin.top + ")"); | |
471 | + var bullet_chart6 = svg.append("g").classed("display", true).attr("transform", "translate(" + (margin.left+5*w) + "," + margin.top + ")"); | |
472 | + | |
473 | + // Definindo o objeto tooltip | |
474 | + var tooltip = d3.select("body").append("div").attr("class", "toolTip"); | |
475 | + | |
476 | + // Definindo o gradiente verde | |
477 | + var gradient_green = svg.append('svg:defs') | |
478 | + .append('svg:linearGradient') | |
479 | + .attr('id', 'gradient_green') | |
480 | + .attr('x1', '0%') | |
481 | + .attr('y1', '0%') | |
482 | + .attr('x2', '100%') | |
483 | + .attr('y2', '0%'); | |
484 | + | |
485 | + gradient_green.append('svg:stop') | |
486 | + .attr('offset', '5%') | |
487 | + .attr('stop-color', '#008c2f') | |
488 | + .attr('stop-opacity', 0.8); | |
489 | + | |
490 | + gradient_green.append('svg:stop') | |
491 | + .attr('offset', '10%') | |
492 | + .attr('stop-color', '#d4eedc') | |
493 | + .attr('stop-opacity', 0.8); | |
494 | + | |
495 | + gradient_green.append('svg:stop') | |
496 | + .attr('offset', '20%') | |
497 | + .attr('stop-color', '#009933') | |
498 | + .attr('stop-opacity', 0.8); | |
499 | + | |
500 | + gradient_green.append('svg:stop') | |
501 | + .attr('offset', '85%') | |
502 | + .attr('stop-color', '#35ae5d') | |
503 | + .attr('stop-opacity', 0.8); | |
504 | + | |
505 | + gradient_green.append('svg:stop') | |
506 | + .attr('offset', '95%') | |
507 | + .attr('stop-color', '#007c29') | |
508 | + .attr('stop-opacity', 0.8); | |
509 | + | |
510 | + | |
511 | + // Definindo o gradiente amarelo | |
512 | + var gradient_yellow = svg.append('svg:defs') | |
513 | + .append('svg:linearGradient') | |
514 | + .attr('id', 'gradient_yellow') | |
515 | + .attr('x1', '0%') | |
516 | + .attr('y1', '0%') | |
517 | + .attr('x2', '100%') | |
518 | + .attr('y2', '0%'); | |
519 | + | |
520 | + gradient_yellow.append('svg:stop') | |
521 | + .attr('offset', '5%') | |
522 | + .attr('stop-color', '#bc9626') | |
523 | + .attr('stop-opacity', 0.8); | |
524 | + | |
525 | + gradient_yellow.append('svg:stop') | |
526 | + .attr('offset', '10%') | |
527 | + .attr('stop-color', '#fff6dc') | |
528 | + .attr('stop-opacity', 0.8); | |
529 | + | |
530 | + gradient_yellow.append('svg:stop') | |
531 | + .attr('offset', '20%') | |
532 | + .attr('stop-color', '#ffcc33') | |
533 | + .attr('stop-opacity', 0.8); | |
534 | + | |
535 | + gradient_yellow.append('svg:stop') | |
536 | + .attr('offset', '85%') | |
537 | + .attr('stop-color', '#ffd75d') | |
538 | + .attr('stop-opacity', 0.8); | |
539 | + | |
540 | + gradient_yellow.append('svg:stop') | |
541 | + .attr('offset', '95%') | |
542 | + .attr('stop-color', '#b28e24') | |
543 | + .attr('stop-opacity', 0.8); | |
544 | + | |
545 | + | |
546 | + // Função que desenha o gráfico 1 | |
547 | + function plot1(params){ | |
548 | + this.append("g") | |
549 | + .call(params.gridlines) | |
550 | + .classed("gridline", true) | |
551 | + .attr("transform", "translate(0,0)") | |
552 | + | |
553 | + // Interartividade ao passar o mouse pelas barras | |
554 | + this.selectAll(".maximo") | |
555 | + .data(params.data) | |
556 | + .enter() | |
557 | + .append("rect") | |
558 | + .attr('fill', 'url(#gradient_green)') | |
559 | + .on("mouseout", function(d,i){ | |
560 | + tooltip.style("display", "none"); | |
561 | + }) | |
562 | + | |
563 | + .on("mousemove", function(d){ | |
564 | + tooltip | |
565 | + .style("left", d3.event.pageX - 80 + "px") | |
566 | + .style("top", d3.event.pageY - 110 + "px") | |
567 | + .style("display", "inline-block") | |
568 | + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>" | |
569 | + + "Máximo: " + (d.maximo) | |
570 | + + "<br>" + "Mediana: " + (d.mediana)); | |
571 | + }) | |
572 | + .attr("y", function(d,i){ | |
573 | + return y(d.maximo); | |
574 | + }) | |
575 | + .attr("height", function(d,i){ | |
576 | + return height - y(d.maximo-d.mediana); | |
577 | + }) | |
578 | + .attr("width", function(d){ | |
579 | + return x.rangeBand(); | |
580 | + }) | |
581 | + | |
582 | + this.selectAll(".mediana") | |
583 | + .data(params.data) | |
584 | + .enter() | |
585 | + .append("rect") | |
586 | + .attr('fill', 'url(#gradient_yellow)') | |
587 | + .on("mouseout", function(d,i){ | |
588 | + tooltip.style("display", "none"); | |
589 | + }) | |
590 | + | |
591 | + .on("mousemove", function(d){ | |
592 | + tooltip | |
593 | + .style("left", d3.event.pageX - 80 + "px") | |
594 | + .style("top", d3.event.pageY - 110 + "px") | |
595 | + .style("display", "inline-block") | |
596 | + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>" | |
597 | + + "Máximo: " + (d.maximo) | |
598 | + + "<br>" + "Mediana: " + (d.mediana)); | |
599 | + }) | |
600 | + .attr("y", function(d,i){ | |
601 | + return y(d.mediana); | |
602 | + }) | |
603 | + .attr("height", function(d,i){ | |
604 | + return height - y(d.mediana); | |
605 | + }) | |
606 | + .attr("width", function(d){ | |
607 | + return x.rangeBand(); | |
608 | + }) | |
609 | + | |
610 | + this.selectAll(".valor") | |
611 | + .data(params.data) | |
612 | + .enter() | |
613 | + .append("rect") | |
614 | + .attr('fill', "#002f4b") | |
615 | + .on("mouseover", function(d,i){ | |
616 | + d3.select(this).style("fill", 'rgba(0, 0, 0, 0.5)'); | |
617 | + }) | |
618 | + .on("mouseout", function(d,i){ | |
619 | + d3.select(this).style("fill", "#002f4b"); | |
620 | + tooltip.style("display", "none"); | |
621 | + }) | |
622 | + | |
623 | + .on("mousemove", function(d){ | |
624 | + tooltip | |
625 | + .style("left", d3.event.pageX - 80 + "px") | |
626 | + .style("top", d3.event.pageY - 110 + "px") | |
627 | + .style("display", "inline-block") | |
628 | + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>" | |
629 | + + "Máximo: " + (d.maximo) | |
630 | + + "<br>" + "Mediana: " + (d.mediana)); | |
631 | + }) | |
632 | + .attr("x", 20) | |
633 | + .attr("width", function(d){ | |
634 | + return x.rangeBand()-40; | |
635 | + }) | |
636 | + .attr("height",function(d,i) {return y(d.maximo);}) | |
637 | + .attr("y", function(d,i) {return height - y(d.maximo);}) | |
638 | + .transition() | |
639 | + .duration(2000) | |
640 | + .attr("height", function(d,i) {return height - y(d.valor);}) | |
641 | + .attr("y",function(d,i) {return y(d.valor);}) | |
642 | + | |
643 | + // Eixo x | |
644 | + this.append("g") | |
645 | + .classed("x axis", true) | |
646 | + .attr("transform", "translate(" + 0 + "," + height + ")") | |
647 | + .call(params.axis.x) | |
648 | + .selectAll("text") | |
649 | + .style("text-anchor", "end") | |
650 | + .attr("dx", 40) | |
651 | + .attr("dy", 15) | |
652 | + .attr("transform", "translate(0,0) rotate(0)"); | |
653 | + | |
654 | + // Eixo y | |
655 | + this.append("g") | |
656 | + .classed("y axis", true) | |
657 | + .attr("transform", "translate(0,0)") | |
658 | + .call(params.axis.y); | |
659 | + } | |
660 | + | |
661 | + // Função que desenha o gráfico 2 | |
662 | + function plot2(params){ | |
663 | + this.append("g") | |
664 | + .call(params.gridlines) | |
665 | + .classed("gridline", true) | |
666 | + .attr("transform", "translate(0,0)") | |
667 | + | |
668 | + // Interartividade ao passar o mouse pelas barras | |
669 | + this.selectAll(".maximo") | |
670 | + .data(params.data) | |
671 | + .enter() | |
672 | + .append("rect") | |
673 | + .attr('fill', 'url(#gradient_green)') | |
674 | + .on("mouseout", function(d,i){ | |
675 | + tooltip.style("display", "none"); | |
676 | + }) | |
677 | + | |
678 | + .on("mousemove", function(d){ | |
679 | + tooltip | |
680 | + .style("left", d3.event.pageX - 80 + "px") | |
681 | + .style("top", d3.event.pageY - 110 + "px") | |
682 | + .style("display", "inline-block") | |
683 | + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>" | |
684 | + + "Máximo: " + (d.maximo) | |
685 | + + "<br>" + "Mediana: " + (d.mediana)); | |
686 | + }) | |
687 | + .attr("y2", function(d,i){ | |
688 | + return y2(d.maximo); | |
689 | + }) | |
690 | + .attr("height", function(d,i){ | |
691 | + return height - y2(d.maximo-d.mediana); | |
692 | + }) | |
693 | + .attr("width", function(d){ | |
694 | + return x2.rangeBand(); | |
695 | + | |
696 | + }) | |
697 | + | |
698 | + this.selectAll(".mediana") | |
699 | + .data(params.data) | |
700 | + .enter() | |
701 | + .append("rect") | |
702 | + .attr('fill', 'url(#gradient_yellow)') | |
703 | + .on("mouseout", function(d,i){ | |
704 | + tooltip.style("display", "none"); | |
705 | + }) | |
706 | + .on("mousemove", function(d){ | |
707 | + tooltip | |
708 | + .style("left", d3.event.pageX - 80 + "px") | |
709 | + .style("top", d3.event.pageY - 110 + "px") | |
710 | + .style("display", "inline-block") | |
711 | + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>" | |
712 | + + "Máximo: " + (d.maximo) | |
713 | + + "<br>" + "Mediana: " + (d.mediana)); | |
714 | + }) | |
715 | + .attr("y", function(d,i){ | |
716 | + return y2(d.mediana); | |
717 | + }) | |
718 | + .attr("height", function(d,i){ | |
719 | + return height - y2(d.mediana); | |
720 | + }) | |
721 | + .attr("width", function(d){ | |
722 | + return x2.rangeBand(); | |
723 | + }) | |
724 | + | |
725 | + this.selectAll(".valor") | |
726 | + .data(params.data) | |
727 | + .enter() | |
728 | + .append("rect") | |
729 | + .attr('fill', "#002f4b") | |
730 | + .on("mouseover", function(d,i){ | |
731 | + d3.select(this).style("fill", 'rgba(0, 0, 0, 0.5)'); | |
732 | + }) | |
733 | + .on("mouseout", function(d,i){ | |
734 | + d3.select(this).style("fill", "#002f4b"); | |
735 | + tooltip.style("display", "none"); | |
736 | + }) | |
737 | + .on("mousemove", function(d){ | |
738 | + tooltip | |
739 | + .style("left", d3.event.pageX - 80 + "px") | |
740 | + .style("top", d3.event.pageY - 110 + "px") | |
741 | + .style("display", "inline-block") | |
742 | + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>" | |
743 | + + "Máximo: " + (d.maximo) | |
744 | + + "<br>" + "Mediana: " + (d.mediana)); | |
745 | + }) | |
746 | + .attr("x", 20) | |
747 | + .attr("width", function(d){ | |
748 | + return x2.rangeBand()-40; | |
749 | + }) | |
750 | + .attr("height",function(d,i) {return y2(d.maximo);}) | |
751 | + .attr("y", function(d,i) {return height - y2(d.maximo);}) | |
752 | + .transition() | |
753 | + .duration(2000) | |
754 | + .attr("height", function(d,i) {return height - y2(d.valor);}) | |
755 | + .attr("y",function(d,i) {return y2(d.valor);}) | |
756 | + // Eixo x | |
757 | + this.append("g") | |
758 | + .classed("x2 axis", true) | |
759 | + .attr("transform", "translate(" + 0 + "," + height + ")") | |
760 | + .call(params.axis.x) | |
761 | + .selectAll("text") | |
762 | + .style("text-anchor", "end") | |
763 | + .attr("dx", 40) | |
764 | + .attr("dy", 15) | |
765 | + .attr("transform", "translate(0,0) rotate(0)"); | |
766 | + | |
767 | + // Eixo y | |
768 | + this.append("g") | |
769 | + .classed("y2 axis", true) | |
770 | + .attr("transform", "translate(0,0)") | |
771 | + .call(params.axis.y); | |
772 | + } | |
773 | + | |
774 | + | |
775 | + // Função que desenha o gráfico 3 | |
776 | + function plot3(params){ | |
777 | + this.append("g") | |
778 | + .call(params.gridlines) | |
779 | + .classed("gridline", true) | |
780 | + .attr("transform", "translate(0,0)") | |
781 | + | |
782 | + // Interartividade ao passar o mouse pelas barras | |
783 | + this.selectAll(".bar") | |
784 | + .data(params.data) | |
785 | + .enter() | |
786 | + .append("rect") | |
787 | + .attr('fill', 'url(#gradient_green)') | |
788 | + .on("mouseout", function(d,i){ | |
789 | + tooltip.style("display", "none"); | |
790 | + }) | |
791 | + .on("mousemove", function(d){ | |
792 | + tooltip | |
793 | + .style("left", d3.event.pageX - 80 + "px") | |
794 | + .style("top", d3.event.pageY - 110 + "px") | |
795 | + .style("display", "inline-block") | |
796 | + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>" | |
797 | + + "Máximo: " + (d.maximo) | |
798 | + + "<br>" + "Mediana: " + (d.mediana)); | |
799 | + }) | |
800 | + .attr("y", function(d,i){ | |
801 | + return y3(d.maximo); | |
802 | + }) | |
803 | + .attr("height", function(d,i){ | |
804 | + return height - y3(d.maximo-d.mediana); | |
805 | + }) | |
806 | + .attr("width", function(d){ | |
807 | + return x3.rangeBand(); | |
808 | + }) | |
809 | + | |
810 | + this.selectAll(".mediana") | |
811 | + .data(params.data) | |
812 | + .enter() | |
813 | + .append("rect") | |
814 | + .attr('fill', 'url(#gradient_yellow)') | |
815 | + .on("mouseout", function(d,i){ | |
816 | + tooltip.style("display", "none"); | |
817 | + }) | |
818 | + .on("mousemove", function(d){ | |
819 | + tooltip | |
820 | + .style("left", d3.event.pageX - 80 + "px") | |
821 | + .style("top", d3.event.pageY - 110 + "px") | |
822 | + .style("display", "inline-block") | |
823 | + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>" | |
824 | + + "Máximo: " + (d.maximo) | |
825 | + + "<br>" + "Mediana: " + (d.mediana)); | |
826 | + }) | |
827 | + .attr("y", function(d,i){ | |
828 | + return y3(d.mediana); | |
829 | + }) | |
830 | + .attr("height", function(d,i){ | |
831 | + return height - y3(d.mediana); | |
832 | + }) | |
833 | + .attr("width", function(d){ | |
834 | + return x3.rangeBand(); | |
835 | + }) | |
836 | + | |
837 | + this.selectAll(".valor") | |
838 | + .data(params.data) | |
839 | + .enter() | |
840 | + .append("rect") | |
841 | + .attr('fill', "#002f4b") | |
842 | + .on("mouseover", function(d,i){ | |
843 | + d3.select(this).style("fill", 'rgba(0, 0, 0, 0.5)'); | |
844 | + }) | |
845 | + .on("mouseout", function(d,i){ | |
846 | + d3.select(this).style("fill", "#002f4b"); | |
847 | + tooltip.style("display", "none"); | |
848 | + }) | |
849 | + .on("mousemove", function(d){ | |
850 | + tooltip | |
851 | + .style("left", d3.event.pageX - 80 + "px") | |
852 | + .style("top", d3.event.pageY - 110 + "px") | |
853 | + .style("display", "inline-block") | |
854 | + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>" | |
855 | + + "Máximo: " + (d.maximo) | |
856 | + + "<br>" + "Mediana: " + (d.mediana)); | |
857 | + }) | |
858 | + | |
859 | + .attr("x", 20) | |
860 | + .attr("width", function(d){ | |
861 | + return x3.rangeBand()-40; | |
862 | + }) | |
863 | + .attr("height",function(d,i) {return y3(d.maximo);}) | |
864 | + .attr("y", function(d,i) {return height - y3(d.maximo);}) | |
865 | + .transition() | |
866 | + .duration(2000) | |
867 | + .attr("height", function(d,i) {return height - y3(d.valor);}) | |
868 | + .attr("y",function(d,i) {return y3(d.valor);}) | |
869 | + | |
870 | + // Eixo x | |
871 | + this.append("g") | |
872 | + .classed("x3 axis", true) | |
873 | + .attr("transform", "translate(" + 0 + "," + height + ")") | |
874 | + .call(params.axis.x) | |
875 | + .selectAll("text") | |
876 | + .style("text-anchor", "end") | |
877 | + .attr("dx", 40) | |
878 | + .attr("dy", 15) | |
879 | + .attr("transform", "translate(0,0) rotate(0)"); | |
880 | + | |
881 | + // Eixo y | |
882 | + this.append("g") | |
883 | + .classed("y3 axis", true) | |
884 | + .attr("transform", "translate(0,0)") | |
885 | + .call(params.axis.y); | |
886 | + } | |
887 | + | |
888 | + // Função que desenha o gráfico 4 | |
889 | + function plot4(params){ | |
890 | + this.append("g") | |
891 | + .call(params.gridlines) | |
892 | + .classed("gridline", true) | |
893 | + .attr("transform", "translate(0,0)") | |
894 | + | |
895 | + // Interartividade ao passar o mouse pelas barras | |
896 | + this.selectAll(".bar") | |
897 | + .data(params.data) | |
898 | + .enter() | |
899 | + .append("rect") | |
900 | + .attr('fill', 'url(#gradient_green)') | |
901 | + .on("mouseout", function(d,i){ | |
902 | + tooltip.style("display", "none"); | |
903 | + }) | |
904 | + .on("mousemove", function(d){ | |
905 | + tooltip | |
906 | + .style("left", d3.event.pageX - 80 + "px") | |
907 | + .style("top", d3.event.pageY - 110 + "px") | |
908 | + .style("display", "inline-block") | |
909 | + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>" | |
910 | + + "Máximo: " + (d.maximo) | |
911 | + + "<br>" + "Mediana: " + (d.mediana)); | |
912 | + }) | |
913 | + .attr("y", function(d,i){ | |
914 | + return y4(d.maximo); | |
915 | + }) | |
916 | + .attr("height", function(d,i){ | |
917 | + return height - y4(d.maximo-d.mediana); | |
918 | + }) | |
919 | + .attr("width", function(d){ | |
920 | + return x4.rangeBand(); | |
921 | + }) | |
922 | + | |
923 | + this.selectAll(".mediana") | |
924 | + .data(params.data) | |
925 | + .enter() | |
926 | + .append("rect") | |
927 | + .attr('fill', 'url(#gradient_yellow)') | |
928 | + .on("mouseout", function(d,i){ | |
929 | + tooltip.style("display", "none"); | |
930 | + }) | |
931 | + .on("mousemove", function(d){ | |
932 | + tooltip | |
933 | + .style("left", d3.event.pageX - 80 + "px") | |
934 | + .style("top", d3.event.pageY - 110 + "px") | |
935 | + .style("display", "inline-block") | |
936 | + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>" | |
937 | + + "Máximo: " + (d.maximo) | |
938 | + + "<br>" + "Mediana: " + (d.mediana)); | |
939 | + }) | |
940 | + .attr("y", function(d,i){ | |
941 | + return y4(d.mediana); | |
942 | + }) | |
943 | + .attr("height", function(d,i){ | |
944 | + return height - y4(d.mediana); | |
945 | + }) | |
946 | + .attr("width", function(d){ | |
947 | + return x4.rangeBand(); | |
948 | + }) | |
949 | + | |
950 | + this.selectAll(".valor") | |
951 | + .data(params.data) | |
952 | + .enter() | |
953 | + .append("rect") | |
954 | + .attr('fill', "#002f4b") | |
955 | + .on("mouseover", function(d,i){ | |
956 | + d3.select(this).style("fill", 'rgba(0, 0, 0, 0.5)'); | |
957 | + }) | |
958 | + .on("mouseout", function(d,i){ | |
959 | + d3.select(this).style("fill", "#002f4b"); | |
960 | + tooltip.style("display", "none"); | |
961 | + }) | |
962 | + | |
963 | + .on("mousemove", function(d){ | |
964 | + tooltip | |
965 | + .style("left", d3.event.pageX - 80 + "px") | |
966 | + .style("top", d3.event.pageY - 110 + "px") | |
967 | + .style("display", "inline-block") | |
968 | + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>" | |
969 | + + "Máximo: " + (d.maximo) | |
970 | + + "<br>" + "Mediana: " + (d.mediana)); | |
971 | + }) | |
972 | + | |
973 | + .attr("x", 20) | |
974 | + .attr("width", function(d){ | |
975 | + return x4.rangeBand()-40; | |
976 | + }) | |
977 | + .attr("height",function(d,i) {return y4(d.maximo);}) | |
978 | + .attr("y", function(d,i) {return height - y4(d.maximo);}) | |
979 | + .transition() | |
980 | + .duration(2000) | |
981 | + .attr("height", function(d,i) {return height - y4(d.valor);}) | |
982 | + .attr("y",function(d,i) {return y4(d.valor);}) | |
983 | + | |
984 | + // Eixo x | |
985 | + this.append("g") | |
986 | + .classed("x4 axis", true) | |
987 | + .attr("transform", "translate(" + 0 + "," + height + ")") | |
988 | + .call(params.axis.x) | |
989 | + .selectAll("text") | |
990 | + .style("text-anchor", "end") | |
991 | + .attr("dx", 40) | |
992 | + .attr("dy", 15) | |
993 | + .attr("transform", "translate(0,0) rotate(0)"); | |
994 | + | |
995 | + // Eixo y | |
996 | + this.append("g") | |
997 | + .classed("y4 axis", true) | |
998 | + .attr("transform", "translate(0,0)") | |
999 | + .call(params.axis.y); | |
1000 | + } | |
1001 | + | |
1002 | + | |
1003 | + // Função que desenha o gráfico 5 | |
1004 | + function plot5(params){ | |
1005 | + this.append("g") | |
1006 | + .call(params.gridlines) | |
1007 | + .classed("gridline", true) | |
1008 | + .attr("transform", "translate(0,0)") | |
1009 | + | |
1010 | + // Interartividade ao passar o mouse pelas barras | |
1011 | + this.selectAll(".maximo") | |
1012 | + .data(params.data) | |
1013 | + .enter() | |
1014 | + .append("rect") | |
1015 | + .attr('fill', 'url(#gradient_green)') | |
1016 | + .on("mouseout", function(d,i){ | |
1017 | + tooltip.style("display", "none"); | |
1018 | + }) | |
1019 | + | |
1020 | + .on("mousemove", function(d){ | |
1021 | + tooltip | |
1022 | + .style("left", d3.event.pageX - 80 + "px") | |
1023 | + .style("top", d3.event.pageY - 110 + "px") | |
1024 | + .style("display", "inline-block") | |
1025 | + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>" | |
1026 | + + "Máximo: " + (d.maximo) | |
1027 | + + "<br>" + "Mediana: " + (d.mediana)); | |
1028 | + }) | |
1029 | + .attr("y5", function(d,i){ | |
1030 | + return y5(d.maximo); | |
1031 | + }) | |
1032 | + .attr("height", function(d,i){ | |
1033 | + return height - y5(d.maximo-d.mediana); | |
1034 | + }) | |
1035 | + .attr("width", function(d){ | |
1036 | + return x5.rangeBand(); | |
1037 | + }) | |
1038 | + | |
1039 | + this.selectAll(".mediana") | |
1040 | + .data(params.data) | |
1041 | + .enter() | |
1042 | + .append("rect") | |
1043 | + .attr('fill', 'url(#gradient_yellow)') | |
1044 | + .on("mouseout", function(d,i){ | |
1045 | + tooltip.style("display", "none"); | |
1046 | + }) | |
1047 | + .on("mousemove", function(d){ | |
1048 | + tooltip | |
1049 | + .style("left", d3.event.pageX - 80 + "px") | |
1050 | + .style("top", d3.event.pageY - 110 + "px") | |
1051 | + .style("display", "inline-block") | |
1052 | + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>" | |
1053 | + + "Máximo: " + (d.maximo) | |
1054 | + + "<br>" + "Mediana: " + (d.mediana)); | |
1055 | + }) | |
1056 | + | |
1057 | + .attr("y", function(d,i){ | |
1058 | + return y5(d.mediana); | |
1059 | + }) | |
1060 | + .attr("height", function(d,i){ | |
1061 | + return height - y5(d.mediana); | |
1062 | + }) | |
1063 | + .attr("width", function(d){ | |
1064 | + return x5.rangeBand(); | |
1065 | + }) | |
1066 | + | |
1067 | + this.selectAll(".valor") | |
1068 | + .data(params.data) | |
1069 | + .enter() | |
1070 | + .append("rect") | |
1071 | + .attr('fill', "#002f4b") | |
1072 | + .on("mouseover", function(d,i){ | |
1073 | + d3.select(this).style("fill", 'rgba(0, 0, 0, 0.5)'); | |
1074 | + }) | |
1075 | + .on("mouseout", function(d,i){ | |
1076 | + d3.select(this).style("fill", "#002f4b"); | |
1077 | + tooltip.style("display", "none"); | |
1078 | + }) | |
1079 | + .on("mousemove", function(d){ | |
1080 | + tooltip | |
1081 | + .style("left", d3.event.pageX - 80 + "px") | |
1082 | + .style("top", d3.event.pageY - 110 + "px") | |
1083 | + .style("display", "inline-block") | |
1084 | + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>" | |
1085 | + + "Máximo: " + (d.maximo) | |
1086 | + + "<br>" + "Mediana: " + (d.mediana)); | |
1087 | + }) | |
1088 | + | |
1089 | + .attr("x", 20) | |
1090 | + .attr("width", function(d){ | |
1091 | + return x5.rangeBand()-40; | |
1092 | + }) | |
1093 | + .attr("height",function(d,i) {return y5(d.maximo);}) | |
1094 | + .attr("y", function(d,i) {return height - y5(d.maximo);}) | |
1095 | + .transition() | |
1096 | + .duration(2000) | |
1097 | + .attr("height", function(d,i) {return height - y5(d.valor);}) | |
1098 | + .attr("y",function(d,i) {return y5(d.valor);}) | |
1099 | + | |
1100 | + // Eixo x | |
1101 | + this.append("g") | |
1102 | + .classed("x5 axis", true) | |
1103 | + .attr("transform", "translate(" + 0 + "," + height + ")") | |
1104 | + .call(params.axis.x) | |
1105 | + .selectAll("text") | |
1106 | + .style("text-anchor", "end") | |
1107 | + .attr("dx", 40) | |
1108 | + .attr("dy", 15) | |
1109 | + .attr("transform", "translate(0,0) rotate(0)"); | |
1110 | + | |
1111 | + // Eixo y | |
1112 | + this.append("g") | |
1113 | + .classed("y5 axis", true) | |
1114 | + .attr("transform", "translate(0,0)") | |
1115 | + .call(params.axis.y); | |
1116 | + } | |
1117 | + | |
1118 | + | |
1119 | + // Função que desenha o gráfico 6 | |
1120 | + function plot6(params){ | |
1121 | + this.append("g") | |
1122 | + .call(params.gridlines) | |
1123 | + .classed("gridline", true) | |
1124 | + .attr("transform", "translate(0,0)") | |
1125 | + | |
1126 | + // Interartividade ao passar o mouse pelas barras | |
1127 | + this.selectAll(".bar") | |
1128 | + .data(params.data) | |
1129 | + .enter() | |
1130 | + .append("rect") | |
1131 | + .attr('fill', 'url(#gradient_green)') | |
1132 | + .on("mouseout", function(d,i){ | |
1133 | + tooltip.style("display", "none"); | |
1134 | + }) | |
1135 | + .on("mousemove", function(d){ | |
1136 | + tooltip | |
1137 | + .style("left", d3.event.pageX - 80 + "px") | |
1138 | + .style("top", d3.event.pageY - 110 + "px") | |
1139 | + .style("display", "inline-block") | |
1140 | + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>" | |
1141 | + + "Máximo: " + (d.maximo) | |
1142 | + + "<br>" + "Mediana: " + (d.mediana)); | |
1143 | + }) | |
1144 | + .attr("y", function(d,i){ | |
1145 | + return y6(d.maximo); | |
1146 | + }) | |
1147 | + .attr("height", function(d,i){ | |
1148 | + return height - y6(d.maximo-d.mediana); | |
1149 | + }) | |
1150 | + .attr("width", function(d){ | |
1151 | + return x4.rangeBand(); | |
1152 | + }) | |
1153 | + | |
1154 | + this.selectAll(".mediana") | |
1155 | + .data(params.data) | |
1156 | + .enter() | |
1157 | + .append("rect") | |
1158 | + .attr('fill', 'url(#gradient_yellow)') | |
1159 | + .on("mouseout", function(d,i){ | |
1160 | + tooltip.style("display", "none"); | |
1161 | + }) | |
1162 | + .on("mousemove", function(d){ | |
1163 | + tooltip | |
1164 | + .style("left", d3.event.pageX - 80 + "px") | |
1165 | + .style("top", d3.event.pageY - 110 + "px") | |
1166 | + .style("display", "inline-block") | |
1167 | + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>" | |
1168 | + + "Máximo: " + (d.maximo) | |
1169 | + + "<br>" + "Mediana: " + (d.mediana)); | |
1170 | + }) | |
1171 | + .attr("y", function(d,i){ | |
1172 | + return y6(d.mediana); | |
1173 | + }) | |
1174 | + .attr("height", function(d,i){ | |
1175 | + return height - y6(d.mediana); | |
1176 | + }) | |
1177 | + .attr("width", function(d){ | |
1178 | + return x6.rangeBand(); | |
1179 | + }) | |
1180 | + | |
1181 | + this.selectAll(".valor") | |
1182 | + .data(params.data) | |
1183 | + .enter() | |
1184 | + .append("rect") | |
1185 | + .attr('fill', "#002f4b") | |
1186 | + .on("mouseover", function(d,i){ | |
1187 | + d3.select(this).style("fill", 'rgba(0, 0, 0, 0.5)'); | |
1188 | + }) | |
1189 | + .on("mouseout", function(d,i){ | |
1190 | + d3.select(this).style("fill", "#002f4b"); | |
1191 | + tooltip.style("display", "none"); | |
1192 | + }) | |
1193 | + .on("mousemove", function(d){ | |
1194 | + tooltip | |
1195 | + .style("left", d3.event.pageX - 80 + "px") | |
1196 | + .style("top", d3.event.pageY - 110 + "px") | |
1197 | + .style("display", "inline-block") | |
1198 | + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>" | |
1199 | + + "Máximo: " + (d.maximo) | |
1200 | + + "<br>" + "Mediana: " + (d.mediana)); | |
1201 | + }) | |
1202 | + | |
1203 | + .attr("x", 20 ) | |
1204 | + .attr("width", function(d){ | |
1205 | + return x6.rangeBand()-40; | |
1206 | + }) | |
1207 | + .attr("height",function(d,i) {return y6(d.maximo);}) | |
1208 | + .attr("y", function(d,i) {return height - y6(d.maximo);}) | |
1209 | + .transition() | |
1210 | + .duration(2000) | |
1211 | + .attr("height", function(d,i) {return height - y6(d.valor);}) | |
1212 | + .attr("y",function(d,i) {return y6(d.valor);}) | |
1213 | + | |
1214 | + // Eixo x | |
1215 | + this.append("g") | |
1216 | + .classed("x6 axis", true) | |
1217 | + .attr("transform", "translate(" + 0 + "," + height + ")") | |
1218 | + .call(params.axis.x) | |
1219 | + .selectAll("text") | |
1220 | + .style("text-anchor", "end") | |
1221 | + .attr("dx", 40) | |
1222 | + .attr("dy", 15) | |
1223 | + .attr("transform", "translate(0,0) rotate(0)"); | |
1224 | + | |
1225 | + // Eixo y | |
1226 | + this.append("g") | |
1227 | + .classed("y6 axis", true) | |
1228 | + .attr("transform", "translate(0,0)") | |
1229 | + .call(params.axis.y); | |
1230 | + } | |
1231 | + | |
1232 | + // Chamada às funções | |
1233 | + | |
1234 | + plot1.call(bullet_chart, { | |
1235 | + data: ind01, | |
1236 | + axis:{x: xAxis,y: yAxis}, | |
1237 | + gridlines: yGridlines}); | |
1238 | + | |
1239 | + plot2.call(bullet_chart2, { | |
1240 | + data: ind02, | |
1241 | + axis:{x: xAxis2,y: yAxis2}, | |
1242 | + gridlines: yGridlines}); | |
1243 | + | |
1244 | + plot3.call(bullet_chart3, { | |
1245 | + data: ind03, | |
1246 | + axis:{x: xAxis3,y: yAxis3}, | |
1247 | + gridlines: yGridlines}); | |
1248 | + | |
1249 | + plot4.call(bullet_chart4, { | |
1250 | + data: ind04, | |
1251 | + axis:{x: xAxis4,y: yAxis4}, | |
1252 | + gridlines: yGridlines}); | |
1253 | + | |
1254 | + plot5.call(bullet_chart5, { | |
1255 | + data: ind05, | |
1256 | + axis:{x: xAxis5,y: yAxis5}, | |
1257 | + gridlines: yGridlines}); | |
1258 | + | |
1259 | + plot6.call(bullet_chart6, { | |
1260 | + data: ind06, | |
1261 | + axis:{x: xAxis6,y: yAxis6}, | |
1262 | + gridlines: yGridlines}); | |
1263 | + | |
1264 | + </script> | |
1265 | + | |
135 | 1266 | </body> |
136 | 1267 | </html> | ... | ... |