Commit 8d1ff0752727224bf55b1e59132257f7b29a6ce0
1 parent
9ce0f6fa
Exists in
master
and in
7 other branches
inclusão de novos gráficos na ferramenta gráficos interativos
Showing
1 changed file
with
122 additions
and
13 deletions
Show diff stats
ferramentas/graficointerativo/index.js.php
@@ -68,6 +68,7 @@ i3GEOF.graficointerativo = { | @@ -68,6 +68,7 @@ i3GEOF.graficointerativo = { | ||
68 | i3GEO.guias.mostraGuiaFerramenta("i3GEOgraficointerativoguia4","i3GEOgraficointerativoguia"); | 68 | i3GEO.guias.mostraGuiaFerramenta("i3GEOgraficointerativoguia4","i3GEOgraficointerativoguia"); |
69 | var so = new SWFObject(i3GEO.configura.locaplic+"/pacotes/openflashchart/open-flash-chart.swf", "i3GEOgraficointerativoGrafico1", "95%", "88%", "9", "#ffffff"); | 69 | var so = new SWFObject(i3GEO.configura.locaplic+"/pacotes/openflashchart/open-flash-chart.swf", "i3GEOgraficointerativoGrafico1", "95%", "88%", "9", "#ffffff"); |
70 | so.addVariable("get-data", "i3GEOF.graficointerativo.tabela2dados"); | 70 | so.addVariable("get-data", "i3GEOF.graficointerativo.tabela2dados"); |
71 | + so.addVariable("loading","Criando grafico..."); | ||
71 | so.write("i3GEOgraficointerativoGrafico"); | 72 | so.write("i3GEOgraficointerativoGrafico"); |
72 | }; | 73 | }; |
73 | i3GEOF.graficointerativo.ativaFoco(); | 74 | i3GEOF.graficointerativo.ativaFoco(); |
@@ -122,6 +123,25 @@ i3GEOF.graficointerativo = { | @@ -122,6 +123,25 @@ i3GEOF.graficointerativo = { | ||
122 | ' <p class=paragrafo >Escolha o tipo de gráfico: </p>' + | 123 | ' <p class=paragrafo >Escolha o tipo de gráfico: </p>' + |
123 | ' <table class=lista6 >' + | 124 | ' <table class=lista6 >' + |
124 | ' <tr><td><input type=radio onclick="i3GEOF.graficointerativo.ativaTipo(this)" value="pizza2d" name="tipoGrafico" style=cursor:pointer > </td><td>pizza 2d</td></tr>' + | 125 | ' <tr><td><input type=radio onclick="i3GEOF.graficointerativo.ativaTipo(this)" value="pizza2d" name="tipoGrafico" style=cursor:pointer > </td><td>pizza 2d</td></tr>' + |
126 | + ' <tr><td> </td></tr>' + | ||
127 | + ' <tr><td><input type=radio onclick="i3GEOF.graficointerativo.ativaTipo(this)" value="area" name="tipoGrafico" style=cursor:pointer > </td><td>área 2d</td></tr>' + | ||
128 | + ' <tr><td> </td></tr>' + | ||
129 | + | ||
130 | + ' <tr><td><input type=radio onclick="i3GEOF.graficointerativo.ativaTipo(this)" value="bar_filled" name="tipoGrafico" style=cursor:pointer > </td><td>barras simples</td></tr>' + | ||
131 | + ' <tr><td> </td></tr>' + | ||
132 | + ' <tr><td><input type=radio onclick="i3GEOF.graficointerativo.ativaTipo(this)" value="bar_glass" name="tipoGrafico" style=cursor:pointer > </td><td>barras 2 cores</td></tr>' + | ||
133 | + ' <tr><td> </td></tr>' + | ||
134 | + ' <tr><td><input type=radio onclick="i3GEOF.graficointerativo.ativaTipo(this)" value="bar_3d" name="tipoGrafico" style=cursor:pointer > </td><td>barras 3d</td></tr>' + | ||
135 | + ' <tr><td> </td></tr>' + | ||
136 | + ' <tr><td><input type=radio onclick="i3GEOF.graficointerativo.ativaTipo(this)" value="bar_sketch" name="tipoGrafico" style=cursor:pointer > </td><td>barras rascunho</td></tr>' + | ||
137 | + ' <tr><td> </td></tr>' + | ||
138 | + ' <tr><td><input type=radio onclick="i3GEOF.graficointerativo.ativaTipo(this)" value="bar_cylinder" name="tipoGrafico" style=cursor:pointer > </td><td>barras cilindro</td></tr>' + | ||
139 | + ' <tr><td> </td></tr>' + | ||
140 | + ' <tr><td><input type=radio onclick="i3GEOF.graficointerativo.ativaTipo(this)" value="bar_cylinder_outline" name="tipoGrafico" style=cursor:pointer > </td><td>barras cilindro com contorno</td></tr>' + | ||
141 | + ' <tr><td> </td></tr>' + | ||
142 | + ' <tr><td><input type=radio onclick="i3GEOF.graficointerativo.ativaTipo(this)" value="bar_round_glass" name="tipoGrafico" style=cursor:pointer > </td><td>barras cúpula</td></tr>' + | ||
143 | + ' <tr><td> </td></tr>' + | ||
144 | + ' <tr><td><input type=radio onclick="i3GEOF.graficointerativo.ativaTipo(this)" value="bar_round" name="tipoGrafico" style=cursor:pointer > </td><td>barras pílula</td></tr>' + | ||
125 | ' </table>' + | 145 | ' </table>' + |
126 | '</div> ' + | 146 | '</div> ' + |
127 | '<div class=guiaobj id="i3GEOgraficointerativoguia2obj" style="left:1px;display:none;top:-5px">' + | 147 | '<div class=guiaobj id="i3GEOgraficointerativoguia2obj" style="left:1px;display:none;top:-5px">' + |
@@ -145,7 +165,7 @@ i3GEOF.graficointerativo = { | @@ -145,7 +165,7 @@ i3GEOF.graficointerativo = { | ||
145 | '<div class=guiaobj id="i3GEOgraficointerativoguia3obj" style="left:1px;display:none;top:-5px">' + | 165 | '<div class=guiaobj id="i3GEOgraficointerativoguia3obj" style="left:1px;display:none;top:-5px">' + |
146 | '</div>'+ | 166 | '</div>'+ |
147 | '<div class=guiaobj id="i3GEOgraficointerativoguia4obj" style="left:1px;display:none;top:-5px">' + | 167 | '<div class=guiaobj id="i3GEOgraficointerativoguia4obj" style="left:1px;display:none;top:-5px">' + |
148 | - ' <div id="i3GEOgraficointerativoGrafico">gráfico</div>' + | 168 | + ' <div id="i3GEOgraficointerativoGrafico"></div>' + |
149 | '</div>'; | 169 | '</div>'; |
150 | return ins; | 170 | return ins; |
151 | }, | 171 | }, |
@@ -200,7 +220,10 @@ i3GEOF.graficointerativo = { | @@ -200,7 +220,10 @@ i3GEOF.graficointerativo = { | ||
200 | */ | 220 | */ |
201 | ativaTipo: function(obj){ | 221 | ativaTipo: function(obj){ |
202 | i3GEOF.graficointerativo.tipo = obj.value; | 222 | i3GEOF.graficointerativo.tipo = obj.value; |
203 | - $i("i3GEOgraficointerativoguia2").onclick.call(); | 223 | + if($i("i3GEOgraficointerativoGrafico").innerHTML === "") |
224 | + {$i("i3GEOgraficointerativoguia2").onclick.call();} | ||
225 | + else | ||
226 | + {$i("i3GEOgraficointerativoguia4").onclick.call();} | ||
204 | }, | 227 | }, |
205 | /* | 228 | /* |
206 | Function: configuraDados | 229 | Function: configuraDados |
@@ -284,7 +307,7 @@ i3GEOF.graficointerativo = { | @@ -284,7 +307,7 @@ i3GEOF.graficointerativo = { | ||
284 | ins = [], | 307 | ins = [], |
285 | i, | 308 | i, |
286 | id; | 309 | id; |
287 | - ins.push("<p class=paragrafo >Tabela de dados para o gráfico. Os valores podem ser editados</p><table class=lista4 id=i3GEOgraficointerativotabeladados ><tr><td style=background-color:yellow >nome</td><td style=background-color:yellow >valor</td><td style=background-color:yellow >cor</td><td></td></tr>"); | 310 | + ins.push("<p class=paragrafo >Tabela de dados para o gráfico. Os valores podem ser editados</p><table class=lista4 id=i3GEOgraficointerativotabeladados ><tr><td></td><td style=background-color:yellow >nome</td><td style=background-color:yellow >valor</td><td style=background-color:yellow >cor</td><td></td></tr>"); |
288 | for (i=1;i<n; i++){ | 311 | for (i=1;i<n; i++){ |
289 | v = dados[i].split(";"); | 312 | v = dados[i].split(";"); |
290 | v[0] = v[0].replace("'",""); | 313 | v[0] = v[0].replace("'",""); |
@@ -292,6 +315,8 @@ i3GEOF.graficointerativo = { | @@ -292,6 +315,8 @@ i3GEOF.graficointerativo = { | ||
292 | //ins += v[0]+" "+v[1]; | 315 | //ins += v[0]+" "+v[1]; |
293 | id = "i3GEOgraficointerativoDados"+i; //layer+indice da classe | 316 | id = "i3GEOgraficointerativoDados"+i; //layer+indice da classe |
294 | ins.push("<tr><td>"); | 317 | ins.push("<tr><td>"); |
318 | + ins.push("<img style='cursor:pointer' title='clique para excluir' onclick='i3GEOF.graficointerativo.excluilinha(this)' src='"+i3GEO.configura.locaplic+"/imagens/x.gif' title='excluir' /></td>"); | ||
319 | + ins.push("</td><td>"); | ||
295 | ins.push($inputText("","",id+"_nome","digite o novo nome",20,v[0],"nome")); | 320 | ins.push($inputText("","",id+"_nome","digite o novo nome",20,v[0],"nome")); |
296 | ins.push("</td><td>"); | 321 | ins.push("</td><td>"); |
297 | ins.push($inputText("","",id+"_valor","digite o novo valor",12,v[1],"valor")); | 322 | ins.push($inputText("","",id+"_valor","digite o novo valor",12,v[1],"valor")); |
@@ -314,7 +339,8 @@ i3GEOF.graficointerativo = { | @@ -314,7 +339,8 @@ i3GEOF.graficointerativo = { | ||
314 | Obtém os dados da tabela para compor o gráfico | 339 | Obtém os dados da tabela para compor o gráfico |
315 | */ | 340 | */ |
316 | tabela2dados: function(){ | 341 | tabela2dados: function(){ |
317 | - var inputs = $i("i3GEOgraficointerativoDados").getElementsByTagName("input"), | 342 | + var temp, |
343 | + inputs = $i("i3GEOgraficointerativoDados").getElementsByTagName("input"), | ||
318 | ninputs = inputs.length, | 344 | ninputs = inputs.length, |
319 | i, | 345 | i, |
320 | parametros, | 346 | parametros, |
@@ -323,38 +349,121 @@ i3GEOF.graficointerativo = { | @@ -323,38 +349,121 @@ i3GEOF.graficointerativo = { | ||
323 | cores = [], | 349 | cores = [], |
324 | indice = $i("i3GEOgraficointerativoComboTemasId").options.selectedIndex, | 350 | indice = $i("i3GEOgraficointerativoComboTemasId").options.selectedIndex, |
325 | titulo = $i("i3GEOgraficointerativoComboTemasId").options[indice].text, | 351 | titulo = $i("i3GEOgraficointerativoComboTemasId").options[indice].text, |
326 | - par = []; | 352 | + par = [], |
353 | + soma = 0, | ||
354 | + menor = inputs[1].value * 1, | ||
355 | + maior = 0, | ||
356 | + alpha = 0.8, | ||
357 | + stroke = 2, | ||
358 | + gradient = true, | ||
359 | + tituloSize = "15px", | ||
360 | + tituloCor = "#000000", | ||
361 | + tituloAlinhamento = "center", | ||
362 | + corunica = "#E2D66A", | ||
363 | + outlinecolor = "#577261", | ||
364 | + corGrid = "#D7E4A3", | ||
365 | + divisoesY = 10, | ||
366 | + rotacaoX = 270, | ||
367 | + legendaX = $i("i3GEOgraficointerativoComboXid").value, | ||
368 | + legendaY = $i("i3GEOgraficointerativoComboYid").value, | ||
369 | + fill = "#C4B86A"; | ||
327 | for(i=0;i<ninputs;i = i + 3){ | 370 | for(i=0;i<ninputs;i = i + 3){ |
328 | nomes.push(inputs[i].value+" "); | 371 | nomes.push(inputs[i].value+" "); |
329 | cores.push(inputs[i+2].value); | 372 | cores.push(inputs[i+2].value); |
330 | - valores.push(inputs[i+1].value * 1); | 373 | + temp = inputs[i+1].value * 1; |
374 | + valores.push(temp); | ||
375 | + soma += temp; | ||
376 | + if(temp > maior) | ||
377 | + {maior = temp;} | ||
378 | + if(temp < menor) | ||
379 | + {menor = temp;} | ||
331 | par.push({"value":inputs[i+1].value * 1,"label":inputs[i].value+" "}); | 380 | par.push({"value":inputs[i+1].value * 1,"label":inputs[i].value+" "}); |
332 | } | 381 | } |
333 | if(i3GEOF.graficointerativo.tipo === "pizza2d"){ | 382 | if(i3GEOF.graficointerativo.tipo === "pizza2d"){ |
334 | - parametros = JSON1.stringify({ | 383 | + parametros = { |
335 | "elements":[{ | 384 | "elements":[{ |
336 | "type": "pie", | 385 | "type": "pie", |
337 | "start-angle": 180, | 386 | "start-angle": 180, |
338 | "colours": cores, | 387 | "colours": cores, |
339 | - "alpha": 0.6, | ||
340 | - "stroke": 2, | 388 | + "alpha": alpha, |
389 | + "stroke": stroke, | ||
341 | "animate": 1, | 390 | "animate": 1, |
342 | "values" : par, | 391 | "values" : par, |
343 | "tip": "#val# de #total#<br>#percent# de 100%", | 392 | "tip": "#val# de #total#<br>#percent# de 100%", |
344 | - "gradient-fill": true | 393 | + "gradient-fill": gradient |
345 | }], | 394 | }], |
346 | "title":{ | 395 | "title":{ |
347 | "text": titulo, | 396 | "text": titulo, |
348 | - "style": "{font-size: 15px; color:#000000; text-align: center;}" | 397 | + "style": "{font-size: "+tituloSize+"; color:"+tituloCor+"; text-align: "+tituloAlinhamento+";}" |
349 | }, | 398 | }, |
350 | "num_decimals": 2, | 399 | "num_decimals": 2, |
351 | "is_fixed_num_decimals_forced": true, | 400 | "is_fixed_num_decimals_forced": true, |
352 | "is_decimal_separator_comma": true, | 401 | "is_decimal_separator_comma": true, |
353 | "is_thousand_separator_disabled": true, | 402 | "is_thousand_separator_disabled": true, |
354 | "x_axis": null | 403 | "x_axis": null |
355 | - }); | 404 | + }; |
405 | + } | ||
406 | + if(i3GEOF.graficointerativo.tipo === "area" || i3GEOF.graficointerativo.tipo === "bar_round" || i3GEOF.graficointerativo.tipo === "bar_round_glass" || i3GEOF.graficointerativo.tipo === "bar_filled" || i3GEOF.graficointerativo.tipo === "bar_glass" || i3GEOF.graficointerativo.tipo === "bar_3d" || i3GEOF.graficointerativo.tipo === "bar_sketch" || i3GEOF.graficointerativo.tipo === "bar_cylinder" || i3GEOF.graficointerativo.tipo === "bar_cylinder_outline"){ | ||
407 | + parametros = { | ||
408 | + "elements":[{ | ||
409 | + "type": i3GEOF.graficointerativo.tipo, | ||
410 | + "start-angle": 180, | ||
411 | + "colour": corunica, | ||
412 | + "outlinecolor": outlinecolor, | ||
413 | + "alpha": alpha, | ||
414 | + "stroke": stroke, | ||
415 | + "animate": 1, | ||
416 | + "values" : valores, | ||
417 | + "tip": "#val#", | ||
418 | + "gradient-fill": gradient, | ||
419 | + "fill": fill, | ||
420 | + "fill-alpha": alpha, | ||
421 | + "dot-style": { "type": "dot", "colour": "#9C0E57", "dot-size": 7 } | ||
422 | + }], | ||
423 | + "x_axis": { | ||
424 | + "colour": "#A2ACBA", | ||
425 | + "grid-colour": corGrid, | ||
426 | + "offset": true, | ||
427 | + "steps": 1, | ||
428 | + "labels": { | ||
429 | + "steps": 1, | ||
430 | + "rotate": rotacaoX, | ||
431 | + "colour": "#000000", | ||
432 | + "labels": nomes | ||
433 | + } | ||
434 | + }, | ||
435 | + "y_axis": { | ||
436 | + "min": menor, | ||
437 | + "max": maior, | ||
438 | + "steps": parseInt((parseInt(maior - menor,10) / divisoesY),10), | ||
439 | + }, | ||
440 | + "x_legend": { | ||
441 | + "text": legendaX, | ||
442 | + "style": "{font-size: 12px; color: #778877}" | ||
443 | + }, | ||
444 | + "y_legend": { | ||
445 | + "text": legendaY, | ||
446 | + "style": "{font-size: 12px; color: #778877}" | ||
447 | + }, | ||
448 | + "title":{ | ||
449 | + "text": titulo, | ||
450 | + "style": "{font-size: "+tituloSize+"; color:"+tituloCor+"; text-align: "+tituloAlinhamento+";}" | ||
451 | + } | ||
452 | + }; | ||
356 | } | 453 | } |
357 | - return parametros; | 454 | + return JSON1.stringify(parametros); |
455 | + }, | ||
456 | + /* | ||
457 | + Function: excluilinha | ||
458 | + | ||
459 | + Exclui uma linha da tabela de dados | ||
460 | + */ | ||
461 | + excluilinha: function(celula){ | ||
462 | + var p = celula.parentNode.parentNode; | ||
463 | + do{ | ||
464 | + p.removeChild(p.childNodes[0]); | ||
465 | + } while (p.childNodes.length > 0); | ||
466 | + p.parentNode.removeChild(p); | ||
358 | }, | 467 | }, |
359 | /* | 468 | /* |
360 | Function: corj | 469 | Function: corj |