Commit 86851a620f1aa25a0e9dacdf4df00509ffeffc1c
1 parent
fcc17c05
Exists in
master
and in
7 other branches
Inclusão de novos gráficos (linhas, pontos e pizza) na ferramenta de gráficos interativos com CCC2
Showing
2 changed files
with
154 additions
and
199 deletions
Show diff stats
ferramentas/graficointerativo1/index.js
... | ... | @@ -242,33 +242,19 @@ i3GEOF.graficointerativo1 = { |
242 | 242 | '<div class=guiaobj id="i3GEOgraficointerativo1guia1obj" style="left:1px;display:none;">' + |
243 | 243 | ' <p class=paragrafo >Escolha o tipo de gráfico: </p>' + |
244 | 244 | ' <table class=lista6 >' + |
245 | - //' <tr><td><img style=cursor:text; src="'+locaplic+'/imagens/oxygen/22x22/Actions-office-chart-pie-icon.png" /></td><td><input type=radio onclick="i3GEOF.graficointerativo1.ativaTipo(this)" value="pizza2d" name="tipoGrafico" style="border:0px solid white;cursor:pointer" > </td><td>pizza 2d</td></tr>' + | |
245 | + ' <tr><td><img style=cursor:text; src="'+locaplic+'/imagens/oxygen/22x22/Actions-office-chart-pie-icon.png" /></td><td><input type=radio onclick="i3GEOF.graficointerativo1.ativaTipo(this)" value="pizza_1" name="tipoGrafico" style="border:0px solid white;cursor:pointer" > </td><td>pizza 2d</td></tr>' + | |
246 | 246 | //' <tr><td> </td></tr>' + |
247 | 247 | //' <tr><td><img style=cursor:text; src="'+locaplic+'/imagens/oxygen/22x22/Actions-office-chart-area-stacked-icon.png" /></td><td><input type=radio onclick="i3GEOF.graficointerativo1.ativaTipo(this)" value="area" name="tipoGrafico" style="border:0px solid white;cursor:pointer" > </td><td>área 2d</td></tr>' + |
248 | - //' <tr><td> </td></tr>' + | |
249 | - //' <tr><td><img style=cursor:text; src="'+locaplic+'/imagens/oxygen/22x22/Actions-office-chart-scatter-icon.png" /></td><td><input type=radio onclick="i3GEOF.graficointerativo1.ativaTipo(this)" value="scatter" name="tipoGrafico" style="border:0px solid white;cursor:pointer" > </td><td>distribuição de pontos</td></tr>' + | |
250 | - //' <tr><td> </td></tr>' + | |
251 | - //' <tr><td><img style=cursor:text; src="'+locaplic+'/imagens/oxygen/22x22/Actions-office-chart-line-stacked-icon.png" /></td><td><input type=radio onclick="i3GEOF.graficointerativo1.ativaTipo(this)" value="line" name="tipoGrafico" style="border:0px solid white;cursor:pointer" > </td><td>linha</td></tr>' + | |
248 | + ' <tr><td> </td></tr>' + | |
249 | + ' <tr><td><img style=cursor:text; src="'+locaplic+'/imagens/oxygen/22x22/Actions-office-chart-scatter-icon.png" /></td><td><input type=radio onclick="i3GEOF.graficointerativo1.ativaTipo(this)" value="ponto_1" name="tipoGrafico" style="border:0px solid white;cursor:pointer" > </td><td>distribuição de pontos</td></tr>' + | |
250 | + ' <tr><td> </td></tr>' + | |
251 | + ' <tr><td><img style=cursor:text; src="'+locaplic+'/imagens/oxygen/22x22/Actions-office-chart-line-stacked-icon.png" /></td><td><input type=radio onclick="i3GEOF.graficointerativo1.ativaTipo(this)" value="linha_1" name="tipoGrafico" style="border:0px solid white;cursor:pointer" > </td><td>linhas simples</td></tr>' + | |
252 | 252 | //' <tr><td> </td></tr>' + |
253 | 253 | //' <tr><td><img style=cursor:text; src="'+locaplic+'/imagens/oxygen/22x22/Actions-office-chart-polar-icon.png" /></td><td><input type=radio onclick="i3GEOF.graficointerativo1.ativaTipo(this)" value="radar" name="tipoGrafico" style="border:0px solid white;cursor:pointer" > </td><td>radar</td></tr>' + |
254 | - //' <tr><td> </td></tr>' + | |
255 | - ' <tr><td><img style=cursor:text; src="'+locaplic+'/imagens/oxygen/22x22/Actions-office-chart-bar-icon.png" /></td><td><input type=radio onclick="i3GEOF.graficointerativo1.ativaTipo(this)" value="bar_1" name="tipoGrafico" style="border:0px solid white;cursor:pointer" > </td><td>barras simples</td></tr>' + | |
256 | - //' <tr><td> </td></tr>' + | |
257 | - //' <tr><td><img style=cursor:text; src="'+locaplic+'/imagens/oxygen/22x22/Actions-office-chart-bar-icon.png" /></td><td><input type=radio onclick="i3GEOF.graficointerativo1.ativaTipo(this)" value="bar_glass" name="tipoGrafico" style="border:0px solid white;cursor:pointer" > </td><td>barras 2 cores</td></tr>' + | |
258 | - //' <tr><td> </td></tr>' + | |
259 | - //' <tr><td><img style=cursor:text; src="'+locaplic+'/imagens/oxygen/22x22/Actions-office-chart-bar-icon.png" /></td><td><input type=radio onclick="i3GEOF.graficointerativo1.ativaTipo(this)" value="bar_3d" name="tipoGrafico" style="border:0px solid white;cursor:pointer" > </td><td>barras 3d</td></tr>' + | |
260 | - //' <tr><td> </td></tr>' + | |
261 | - //' <tr><td><img style=cursor:text; src="'+locaplic+'/imagens/oxygen/22x22/Actions-office-chart-bar-icon.png" /></td><td><input type=radio onclick="i3GEOF.graficointerativo1.ativaTipo(this)" value="bar_sketch" name="tipoGrafico" style="border:0px solid white;cursor:pointer" > </td><td>barras rascunho</td></tr>' + | |
262 | - //' <tr><td> </td></tr>' + | |
263 | - //' <tr><td><img style=cursor:text; src="'+locaplic+'/imagens/oxygen/22x22/Actions-office-chart-bar-icon.png" /></td><td><input type=radio onclick="i3GEOF.graficointerativo1.ativaTipo(this)" value="bar_cylinder" name="tipoGrafico" style="border:0px solid white;cursor:pointer" > </td><td>barras cilindro</td></tr>' + | |
264 | - //' <tr><td> </td></tr>' + | |
265 | - //' <tr><td><img style=cursor:text; src="'+locaplic+'/imagens/oxygen/22x22/Actions-office-chart-bar-icon.png" /></td><td><input type=radio onclick="i3GEOF.graficointerativo1.ativaTipo(this)" value="bar_cylinder_outline" name="tipoGrafico" style="border:0px solid white;cursor:pointer" > </td><td>barras cilindro com contorno</td></tr>' + | |
266 | - //' <tr><td> </td></tr>' + | |
267 | - //' <tr><td><img style=cursor:text; src="'+locaplic+'/imagens/oxygen/22x22/Actions-office-chart-bar-icon.png" /></td><td><input type=radio onclick="i3GEOF.graficointerativo1.ativaTipo(this)" value="bar_round_glass" name="tipoGrafico" style="border:0px solid white;cursor:pointer" > </td><td>barras cúpula</td></tr>' + | |
268 | - //' <tr><td> </td></tr>' + | |
269 | - //' <tr><td><img style=cursor:text; src="'+locaplic+'/imagens/oxygen/22x22/Actions-office-chart-bar-icon.png" /></td><td><input type=radio onclick="i3GEOF.graficointerativo1.ativaTipo(this)" value="bar_round" name="tipoGrafico" style="border:0px solid white;cursor:pointer" > </td><td>barras pílula</td></tr>' + | |
270 | - //' <tr><td> </td></tr>' + | |
271 | - //' <tr><td><img style=cursor:text; src="'+locaplic+'/imagens/oxygen/22x22/Actions-office-chart-bar-icon.png" /></td><td><input type=radio onclick="i3GEOF.graficointerativo1.ativaTipo(this)" value="hbar" name="tipoGrafico" style="border:0px solid white;cursor:pointer" > </td><td>barras horizontais</td></tr>' + | |
254 | + ' <tr><td> </td></tr>' + | |
255 | + ' <tr><td><img style=cursor:text; src="'+locaplic+'/imagens/oxygen/22x22/Actions-office-chart-bar-icon.png" /></td><td><input type=radio onclick="i3GEOF.graficointerativo1.ativaTipo(this)" value="bar_1" name="tipoGrafico" style="border:0px solid white;cursor:pointer" > </td><td>barras verticais</td></tr>' + | |
256 | + ' <tr><td> </td></tr>' + | |
257 | + ' <tr><td><img style=cursor:text; src="'+locaplic+'/imagens/oxygen/22x22/Actions-office-chart-bar-icon-h.png" /></td><td><input type=radio onclick="i3GEOF.graficointerativo1.ativaTipo(this)" value="bar_2" name="tipoGrafico" style="border:0px solid white;cursor:pointer" > </td><td>barras horizontais</td></tr>' + | |
272 | 258 | ' </table>' + |
273 | 259 | '</div> ' + |
274 | 260 | '<div class=guiaobj id="i3GEOgraficointerativo1guia2obj" style="left:1px;display:none;top:-5px">' + |
... | ... | @@ -761,145 +747,26 @@ i3GEOF.graficointerativo1 = { |
761 | 747 | switch(i3GEOF.graficointerativo1.tipo){ |
762 | 748 | case "bar_1": |
763 | 749 | legendaX = ""; |
764 | - i3GEOF.graficointerativo1.barras(dados,maior,cores,legendaY,legendaX,xInclinado); | |
750 | + i3GEOF.graficointerativo1.barras(dados,maior,cores,legendaY,legendaX,xInclinado,"vertical"); | |
751 | + break; | |
752 | + case "bar_2": | |
753 | + legendaX = ""; | |
754 | + i3GEOF.graficointerativo1.barras(dados,maior,cores,legendaY,legendaX,xInclinado,"horizontal"); | |
755 | + break; | |
756 | + case "linha_1": | |
757 | + legendaX = ""; | |
758 | + i3GEOF.graficointerativo1.linhas(dados,maior,cores,legendaY,legendaX,xInclinado); | |
759 | + break; | |
760 | + case "pizza_1": | |
761 | + legendaX = ""; | |
762 | + i3GEOF.graficointerativo1.pizzas(dados,maior,cores,legendaY,legendaX); | |
763 | + break; | |
764 | + case "ponto_1": | |
765 | + i3GEOF.graficointerativo1.pontos(dados,maior,cores,legendaY,legendaX); | |
765 | 766 | break; |
766 | 767 | default: |
767 | 768 | alert("Escolha um tipo de gráfico"); |
768 | 769 | } |
769 | - if(i3GEOF.graficointerativo1.tipo === "line" || i3GEOF.graficointerativo1.tipo === "scatter" || i3GEOF.graficointerativo1.tipo === "hbar" || i3GEOF.graficointerativo1.tipo === "area" || i3GEOF.graficointerativo1.tipo === "bar_round" || i3GEOF.graficointerativo1.tipo === "bar_round_glass" || i3GEOF.graficointerativo1.tipo === "bar_filled" || i3GEOF.graficointerativo1.tipo === "bar_glass" || i3GEOF.graficointerativo1.tipo === "bar_3d" || i3GEOF.graficointerativo1.tipo === "bar_sketch" || i3GEOF.graficointerativo1.tipo === "bar_cylinder" || i3GEOF.graficointerativo1.tipo === "bar_cylinder_outline"){ | |
770 | - temp = valores; | |
771 | - if(i3GEOF.graficointerativo1.tipo === "line" || i3GEOF.graficointerativo1.tipo === "scatter" || i3GEOF.graficointerativo1.tipo === "area") | |
772 | - {temp = parcor;} | |
773 | - parametros = { | |
774 | - "elements":[ | |
775 | - { | |
776 | - "type": i3GEOF.graficointerativo1.tipo, | |
777 | - "start-angle": 180, | |
778 | - "colour": corunica, | |
779 | - "outlinecolor": outlinecolor, | |
780 | - "alpha": alpha, | |
781 | - "stroke": stroke, | |
782 | - "animate": 1, | |
783 | - "values" : temp, | |
784 | - "tip": "#val#", | |
785 | - "gradient-fill": gradient, | |
786 | - "fill": fill, | |
787 | - "fill-alpha": alpha, | |
788 | - "dot-style": { "type": "solid-dot", "colour": "#9C0E57", "dot-size": pointSize } | |
789 | - } | |
790 | - ], | |
791 | - "x_axis": { | |
792 | - "colour": "#A2ACBA", | |
793 | - "grid-colour": corGrid, | |
794 | - "offset": true, | |
795 | - "steps": 1, | |
796 | - "labels": { | |
797 | - "steps": 1, | |
798 | - "rotate": rotacaoX, | |
799 | - "colour": "#000000", | |
800 | - "labels": nomes | |
801 | - } | |
802 | - }, | |
803 | - "y_axis": { | |
804 | - "min": menor, | |
805 | - "max": maior, | |
806 | - "steps": parseInt((parseInt(maior - menor,10) / divisoesY),10) | |
807 | - }, | |
808 | - "x_legend": { | |
809 | - "text": legendaX, | |
810 | - "style": "{font-size: 12px; color: #778877}" | |
811 | - }, | |
812 | - "y_legend": { | |
813 | - "text": legendaY, | |
814 | - "style": "{font-size: 12px; color: #778877}" | |
815 | - }, | |
816 | - "title":{ | |
817 | - "text": titulo, | |
818 | - "style": "{font-size: "+tituloSize+"; color:"+tituloCor+"; text-align: "+tituloAlinhamento+";}" | |
819 | - } | |
820 | - }; | |
821 | - if($i("i3GEOgraficointerativo1AdLinhas").checked){ | |
822 | - parametros.elements.push({ | |
823 | - "type": "line", | |
824 | - "colour": "#FFFFFF", | |
825 | - "start-angle": 180, | |
826 | - "alpha": 0, | |
827 | - "stroke": 0, | |
828 | - "width": 0, | |
829 | - "animate": 1, | |
830 | - "values" : parcor, | |
831 | - "dot-style": { "type": "solid-dot", "colour": "#9C0E57", "dot-size": pointSize } | |
832 | - }); | |
833 | - } | |
834 | - if(i3GEOF.graficointerativo1.tipo === "hbar"){ | |
835 | - n = valores.length; | |
836 | - temp = []; | |
837 | - for(i=0;i<n;i++){ | |
838 | - temp.push({"left":0,right:valores[i]}); | |
839 | - } | |
840 | - parametros.elements[0].values = temp; | |
841 | - | |
842 | - parametros.x_axis = { | |
843 | - "min": 0, | |
844 | - "max": maior, | |
845 | - "steps": parseInt((maior / divisoesY),10) | |
846 | - }; | |
847 | - parametros.y_axis = { | |
848 | - "offset": 1, | |
849 | - "labels": nomes | |
850 | - }; | |
851 | - parametros.x_legend.text = legendaY; | |
852 | - parametros.y_legend.text = legendaX; | |
853 | - } | |
854 | - if(i3GEOF.graficointerativo1.tipo === "scatter"){ | |
855 | - n = valores.length; | |
856 | - temp = []; | |
857 | - for(i=0;i<n;i++){ | |
858 | - temp.push({"x":nomes[i],"y":valores[i]}); | |
859 | - } | |
860 | - parametros.elements[0].values = temp; | |
861 | - parametros.x_axis = { | |
862 | - "min": menor, | |
863 | - "max": maior, | |
864 | - "steps": parseInt(((maior - menor) / divisoesY),10) | |
865 | - }; | |
866 | - parametros.x_axis = { | |
867 | - "min": menorNome, | |
868 | - "max": maiorNome, | |
869 | - "steps": parseInt(((maiorNome - menorNome) / divisoesY),10) | |
870 | - }; | |
871 | - parametros.elements[0].tip = "#x# - #y#"; | |
872 | - } | |
873 | - } | |
874 | - if(i3GEOF.graficointerativo1.tipo === "radar"){ | |
875 | - parametros = { | |
876 | - "elements": [{ | |
877 | - "type": "area", | |
878 | - "width": 1, | |
879 | - "dot-style": { "type": "anchor", "colour": "#9C0E57", "dot-size": pointSize }, | |
880 | - "colour": "#45909F", | |
881 | - "fill": "#45909F", | |
882 | - "fill-alpha": 0.4, | |
883 | - "loop": true, | |
884 | - "values": parcor | |
885 | - }], | |
886 | - "radar_axis": { | |
887 | - "max": maior, | |
888 | - "steps": parseInt(((maior - menor) / divisoesY),10), | |
889 | - "colour": "#EFD1EF", | |
890 | - "grid-colour": "#EFD1EF", | |
891 | - "spoke-labels": { | |
892 | - "labels": nomes, | |
893 | - "colour": "#9F819F" | |
894 | - } | |
895 | - }, | |
896 | - "title":{ | |
897 | - "text": titulo, | |
898 | - "style": "{font-size: "+tituloSize+"; color:"+tituloCor+"; text-align: "+tituloAlinhamento+";}" | |
899 | - }, | |
900 | - "bg_colour": "#DFFFEC" | |
901 | - }; | |
902 | - } | |
903 | 770 | }, |
904 | 771 | /* |
905 | 772 | Function: excluilinha |
... | ... | @@ -1002,26 +869,139 @@ i3GEOF.graficointerativo1 = { |
1002 | 869 | } |
1003 | 870 | } |
1004 | 871 | }, |
1005 | - barras: function(dados,maior,cores,legendaY,legendaX,xInclinado){ | |
872 | + configDefault: function(dados,maior,cores,legendaY,legendaX){ | |
873 | + var config = { | |
874 | + canvas : "i3GEOgraficointerativo1guia4objCanvas", | |
875 | + width : dados.resultset.length * $i("i3GEOgraficointerativo1FatorTamanho").value, | |
876 | + height : parseInt($i("i3GEOF.graficointerativo1_corpo").style.height,10) - 80, | |
877 | + orthoAxisTitle: legendaY, | |
878 | + orthoAxisFixedMax: maior, | |
879 | + valuesFont : 'normal 9px sans-serif ', | |
880 | + baseAxisTitle: legendaX, | |
881 | + baseAxisTitleAlign: 'left', | |
882 | + tooltipEnabled : true, | |
883 | + tooltipArrowVisible: true, | |
884 | + tooltipFade : false, | |
885 | + tooltipFollowMouse : false, | |
886 | + tooltipFormat : function(scene) { | |
887 | + var cat = this.scene.datum.atoms['category'].value, | |
888 | + val = this.scene.datum.atoms['value'].value; | |
889 | + return "<span style=color:yellow >"+cat+"</span><br>" + format( "#.###,", val); | |
890 | + }, | |
891 | + baseAxisTitleFont : '9px sans-serif', | |
892 | + yAxisTickFormatter: function(valor){ | |
893 | + valor = valor+""; | |
894 | + valor = format( "#.###,", valor); | |
895 | + return valor; | |
896 | + }, | |
897 | + valueFormat: function(valor){ | |
898 | + valor = valor+""; | |
899 | + valor = format( "#.###,", valor); | |
900 | + return valor; | |
901 | + }, | |
902 | + valuesAnchor : 'top', | |
903 | + valuesVisible: false, | |
904 | + orthoAxisOriginIsZero:false, | |
905 | + titleAlign : 'center', | |
906 | + orientation: 'vertical', | |
907 | + baseAxisTicks: true, | |
908 | + stacked : false, | |
909 | + animate : true, | |
910 | + hoverable: false, | |
911 | + axisGrid: true, | |
912 | + contentMargins :5, | |
913 | + axisOffset: 0.02, | |
914 | + panelSizeRatio : 0.8, | |
915 | + orthoAxisLabelSpacingMin : 2 , | |
916 | + selectable : false, | |
917 | + extensionPoints: { | |
918 | + continuousAxisTicks_strokeStyle: 'gray', | |
919 | + axisGrid_strokeStyle: 'lightgray', | |
920 | + xAxisLabel_textStyle: 'black', | |
921 | + label_textBaseline: "bottom", | |
922 | + xAxisLabel_font: 'normal 10px sans-serif' | |
923 | + } | |
924 | + }; | |
925 | + return config; | |
926 | + }, | |
927 | + barras: function(dados,maior,cores,legendaY,legendaX,xInclinado,tipo){ | |
928 | + config = i3GEOF.graficointerativo1.configDefault(dados,maior,cores,legendaY,legendaX); | |
929 | + config.extensionPoints.bar_fillStyle = function(d) { | |
930 | + return cores[this.index]; | |
931 | + } | |
932 | + if(tipo === "horizontal"){ | |
933 | + config.orientation = 'horizontal'; | |
934 | + } | |
935 | + if(xInclinado == true){ | |
936 | + config.extensionPoints.xAxisLabel_textAngle = -Math.PI/3; | |
937 | + config.extensionPoints.xAxisLabel_textBaseline = 'top'; | |
938 | + config.extensionPoints.xAxisLabel_textAlign = 'right'; | |
939 | + } | |
940 | + new pvc.BarChart( | |
941 | + config | |
942 | + ).setData(dados, { | |
943 | + crosstabMode : false | |
944 | + }).render(); | |
945 | + i3GEOF.graficointerativo1.aguarde.visibility = "hidden"; | |
946 | + }, | |
947 | + linhas: function(dados,maior,cores,legendaY,legendaX,xInclinado,tipo){ | |
948 | + config = i3GEOF.graficointerativo1.configDefault(dados,maior,cores,legendaY,legendaX); | |
949 | + if(xInclinado == true){ | |
950 | + config.extensionPoints.xAxisLabel_textAngle = -Math.PI/3; | |
951 | + config.extensionPoints.xAxisLabel_textBaseline = 'top'; | |
952 | + config.extensionPoints.xAxisLabel_textAlign = 'right'; | |
953 | + } | |
954 | + config.dotsVisible = true; | |
955 | + new pvc.LineChart( | |
956 | + config | |
957 | + ).setData(dados, { | |
958 | + crosstabMode : false | |
959 | + }).render(); | |
960 | + i3GEOF.graficointerativo1.aguarde.visibility = "hidden"; | |
961 | + }, | |
962 | + pizzas: function(dados,maior,cores,legendaY,legendaX,tipo){ | |
963 | + config = i3GEOF.graficointerativo1.configDefault(dados,maior,cores,legendaY,legendaX); | |
1006 | 964 | var config = { |
1007 | 965 | canvas : "i3GEOgraficointerativo1guia4objCanvas", |
1008 | 966 | width : dados.resultset.length * $i("i3GEOgraficointerativo1FatorTamanho").value, |
1009 | 967 | height : parseInt($i("i3GEOF.graficointerativo1_corpo").style.height,10) - 80, |
1010 | - orthoAxisTitle: legendaY, | |
1011 | - orthoAxisFixedMax: maior, | |
1012 | - valuesFont : 'normal 9px sans-serif ', | |
1013 | - baseAxisTitle: legendaX, | |
1014 | - baseAxisTitleAlign: 'left', | |
1015 | - tooltipEnabled : true, | |
1016 | - tooltipArrowVisible: true, | |
1017 | - tooltipFade : false, | |
1018 | - tooltipFollowMouse : false, | |
968 | + animate: true, | |
969 | + selectable: true, | |
970 | + hoverable: true, | |
971 | + valuesVisible: true, | |
972 | + valuesLabelStyle: 'inside', | |
973 | + valuesMask: "{category}", | |
974 | + colors: cores, | |
1019 | 975 | tooltipFormat : function(scene) { |
1020 | 976 | var cat = this.scene.datum.atoms['category'].value, |
1021 | 977 | val = this.scene.datum.atoms['value'].value; |
1022 | 978 | return "<span style=color:yellow >"+cat+"</span><br>" + format( "#.###,", val); |
1023 | 979 | }, |
1024 | - baseAxisTitleFont : '9px sans-serif', | |
980 | + extensionPoints: { | |
981 | + slice_strokeStyle: 'white' | |
982 | + } | |
983 | + }; | |
984 | + new pvc.PieChart( | |
985 | + config | |
986 | + ).setData(dados, { | |
987 | + crosstabMode : false | |
988 | + }).render(); | |
989 | + i3GEOF.graficointerativo1.aguarde.visibility = "hidden"; | |
990 | + }, | |
991 | + pontos: function(dados,maior,cores,legendaY,legendaX,tipo){ | |
992 | + config = i3GEOF.graficointerativo1.configDefault(dados,maior,cores,legendaY,legendaX); | |
993 | + var config = { | |
994 | + canvas : "i3GEOgraficointerativo1guia4objCanvas", | |
995 | + width : dados.resultset.length * $i("i3GEOgraficointerativo1FatorTamanho").value, | |
996 | + height : parseInt($i("i3GEOF.graficointerativo1_corpo").style.height,10) - 80, | |
997 | + animate: true, | |
998 | + selectable: true, | |
999 | + hoverable: true, | |
1000 | + valuesVisible: false, | |
1001 | + colors: cores, | |
1002 | + orthoAxisTitle: legendaY, | |
1003 | + valuesFont : 'normal 9px sans-serif ', | |
1004 | + baseAxisTitle: legendaX, | |
1025 | 1005 | yAxisTickFormatter: function(valor){ |
1026 | 1006 | valor = valor+""; |
1027 | 1007 | valor = format( "#.###,", valor); |
... | ... | @@ -1032,38 +1012,13 @@ i3GEOF.graficointerativo1 = { |
1032 | 1012 | valor = format( "#.###,", valor); |
1033 | 1013 | return valor; |
1034 | 1014 | }, |
1035 | - valuesAnchor : 'top', | |
1036 | - valuesVisible: false, | |
1037 | - orthoAxisOriginIsZero:false, | |
1038 | - titleAlign : 'center', | |
1039 | - orientation: 'vertical', | |
1040 | - baseAxisTicks: true, | |
1041 | - stacked : false, | |
1042 | - animate : true, | |
1043 | - hoverable: false, | |
1044 | - axisGrid: true, | |
1045 | - contentMargins :5, | |
1046 | - axisOffset: 0.02, | |
1047 | - panelSizeRatio : 0.8, | |
1048 | - orthoAxisLabelSpacingMin : 2 , | |
1049 | - selectable : false, | |
1050 | - extensionPoints: { | |
1051 | - continuousAxisTicks_strokeStyle: 'gray', | |
1052 | - axisGrid_strokeStyle: 'lightgray', | |
1053 | - xAxisLabel_textStyle: 'black', | |
1054 | - label_textBaseline: "bottom", | |
1055 | - xAxisLabel_font: 'normal 10px sans-serif', | |
1056 | - bar_fillStyle: function(d) { | |
1057 | - return cores[this.index]; | |
1058 | - } | |
1015 | + tooltipFormat : function(scene) { | |
1016 | + var cat = this.scene.datum.atoms['category'].value, | |
1017 | + val = this.scene.datum.atoms['value'].value; | |
1018 | + return "<span style=color:yellow >X: "+cat+"</span><br>Y: " + format( "#.###,", val); | |
1059 | 1019 | } |
1060 | 1020 | }; |
1061 | - if(xInclinado == true){ | |
1062 | - config.extensionPoints.xAxisLabel_textAngle = -Math.PI/3; | |
1063 | - config.extensionPoints.xAxisLabel_textBaseline = 'top'; | |
1064 | - config.extensionPoints.xAxisLabel_textAlign = 'right'; | |
1065 | - } | |
1066 | - new pvc.BarChart( | |
1021 | + new pvc.DotChart( | |
1067 | 1022 | config |
1068 | 1023 | ).setData(dados, { |
1069 | 1024 | crosstabMode : false | ... | ... |
859 Bytes