Download as
Browse Code »

Commit 8d1ff0752727224bf55b1e59132257f7b29a6ce0

Authored by Edmar Moretti
1 parent 9ce0f6fa
Exists in master and in 7 other branches composer, doc-root, docker, guia, licenca, readme, unmaintened

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
  Diff comments   View file @8d1ff07
... ... @@ -68,6 +68,7 @@ i3GEOF.graficointerativo = {
68 68 i3GEO.guias.mostraGuiaFerramenta("i3GEOgraficointerativoguia4","i3GEOgraficointerativoguia");
69 69 var so = new SWFObject(i3GEO.configura.locaplic+"/pacotes/openflashchart/open-flash-chart.swf", "i3GEOgraficointerativoGrafico1", "95%", "88%", "9", "#ffffff");
70 70 so.addVariable("get-data", "i3GEOF.graficointerativo.tabela2dados");
  71 + so.addVariable("loading","Criando grafico...");
71 72 so.write("i3GEOgraficointerativoGrafico");
72 73 };
73 74 i3GEOF.graficointerativo.ativaFoco();
... ... @@ -122,6 +123,25 @@ i3GEOF.graficointerativo = {
122 123 ' <p class=paragrafo >Escolha o tipo de gráfico: </p>' +
123 124 ' <table class=lista6 >' +
124 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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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 145 ' </table>' +
126 146 '</div> ' +
127 147 '<div class=guiaobj id="i3GEOgraficointerativoguia2obj" style="left:1px;display:none;top:-5px">' +
... ... @@ -145,7 +165,7 @@ i3GEOF.graficointerativo = {
145 165 '<div class=guiaobj id="i3GEOgraficointerativoguia3obj" style="left:1px;display:none;top:-5px">' +
146 166 '</div>'+
147 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 169 '</div>';
150 170 return ins;
151 171 },
... ... @@ -200,7 +220,10 @@ i3GEOF.graficointerativo = {
200 220 */
201 221 ativaTipo: function(obj){
202 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 229 Function: configuraDados
... ... @@ -284,7 +307,7 @@ i3GEOF.graficointerativo = {
284 307 ins = [],
285 308 i,
286 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 311 for (i=1;i<n; i++){
289 312 v = dados[i].split(";");
290 313 v[0] = v[0].replace("'","");
... ... @@ -292,6 +315,8 @@ i3GEOF.graficointerativo = {
292 315 //ins += v[0]+" "+v[1];
293 316 id = "i3GEOgraficointerativoDados"+i; //layer+indice da classe
294 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 320 ins.push($inputText("","",id+"_nome","digite o novo nome",20,v[0],"nome"));
296 321 ins.push("</td><td>");
297 322 ins.push($inputText("","",id+"_valor","digite o novo valor",12,v[1],"valor"));
... ... @@ -314,7 +339,8 @@ i3GEOF.graficointerativo = {
314 339 Obtém os dados da tabela para compor o gráfico
315 340 */
316 341 tabela2dados: function(){
317   - var inputs = $i("i3GEOgraficointerativoDados").getElementsByTagName("input"),
  342 + var temp,
  343 + inputs = $i("i3GEOgraficointerativoDados").getElementsByTagName("input"),
318 344 ninputs = inputs.length,
319 345 i,
320 346 parametros,
... ... @@ -323,38 +349,121 @@ i3GEOF.graficointerativo = {
323 349 cores = [],
324 350 indice = $i("i3GEOgraficointerativoComboTemasId").options.selectedIndex,
325 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 370 for(i=0;i<ninputs;i = i + 3){
328 371 nomes.push(inputs[i].value+" ");
329 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 380 par.push({"value":inputs[i+1].value * 1,"label":inputs[i].value+" "});
332 381 }
333 382 if(i3GEOF.graficointerativo.tipo === "pizza2d"){
334   - parametros = JSON1.stringify({
  383 + parametros = {
335 384 "elements":[{
336 385 "type": "pie",
337 386 "start-angle": 180,
338 387 "colours": cores,
339   - "alpha": 0.6,
340   - "stroke": 2,
  388 + "alpha": alpha,
  389 + "stroke": stroke,
341 390 "animate": 1,
342 391 "values" : par,
343 392 "tip": "#val# de #total#<br>#percent# de 100%",
344   - "gradient-fill": true
  393 + "gradient-fill": gradient
345 394 }],
346 395 "title":{
347 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 399 "num_decimals": 2,
351 400 "is_fixed_num_decimals_forced": true,
352 401 "is_decimal_separator_comma": true,
353 402 "is_thousand_separator_disabled": true,
354 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 469 Function: corj
... ...