Commit c47e24dc77b51018c07fb3075643201e45c9e957
1 parent
45f19b1d
Exists in
master
Tela relatorios
Showing
1 changed file
with
53 additions
and
36 deletions
Show diff stats
wscacicneo/static/relatorio.js
... | ... | @@ -78,15 +78,20 @@ Ext.onReady(function(){ |
78 | 78 | }); |
79 | 79 | |
80 | 80 | |
81 | -// **** GRAFICO DE PIZZA **** | |
81 | +// **** GRAFICO DE COLUNA **** | |
82 | 82 | |
83 | 83 | var store = Ext.create('Ext.data.JsonStore', { |
84 | 84 | fields: ['name', 'data'], |
85 | 85 | data: [ |
86 | - { 'name': 'dado1', 'data': 2 }, | |
87 | - { 'name': 'dado2', 'data': 2 }, | |
88 | - { 'name': 'dado3', 'data': 4 }, | |
89 | - { 'name': 'dado4', 'data': 10 } | |
86 | + { 'name': 'dado1', 'data': 200 }, | |
87 | + { 'name': 'dado2', 'data': 20 }, | |
88 | + { 'name': 'dado3', 'data': 500 }, | |
89 | + { 'name': 'dado4', 'data': 600 }, | |
90 | + { 'name': 'dado5', 'data': 700 }, | |
91 | + { 'name': 'dado6', 'data': 1000 }, | |
92 | + { 'name': 'dado7', 'data': 50 }, | |
93 | + { 'name': 'dado8', 'data': 200 }, | |
94 | + { 'name': 'dado9', 'data': 400 }, | |
90 | 95 | ]}); |
91 | 96 | |
92 | 97 | var chart = Ext.create('Ext.chart.Chart', { |
... | ... | @@ -97,43 +102,55 @@ var chart = Ext.create('Ext.chart.Chart', { |
97 | 102 | store: store, |
98 | 103 | theme: 'Base:gradients', |
99 | 104 | shadow: true, |
100 | - legend: { | |
101 | - position: 'right' | |
102 | - }, | |
103 | - series: [{ | |
104 | - type: 'pie', | |
105 | - angleField: 'data', | |
106 | - showInLegend: true, | |
107 | - tips: { | |
108 | - trackMouse: true, | |
109 | - width: 140, | |
110 | - height: 28, | |
111 | - renderer: function(storeItem, item) { | |
112 | - // calculate and display percentage on hover | |
113 | - var total = 0; | |
114 | - store.each(function(rec) { | |
115 | - total += rec.get('data'); | |
116 | - }); | |
117 | - this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%'); | |
118 | - } | |
119 | - }, | |
120 | - highlight: { | |
121 | - segment: { | |
122 | - margin: 20 | |
123 | - } | |
105 | + axes: [ | |
106 | + { | |
107 | + type: 'Numeric', | |
108 | + position: 'left', | |
109 | + fields: ['data'], | |
110 | + label: { | |
111 | + renderer: Ext.util.Format.numberRenderer('0,0') | |
112 | + }, | |
113 | + title: 'Eixo X', | |
114 | + grid: true, | |
115 | + minimum: 0 | |
124 | 116 | }, |
125 | - label: { | |
126 | - field: 'name', | |
127 | - display: 'rotate', | |
128 | - contrast: true, | |
129 | - font: '18px Arial' | |
117 | + { | |
118 | + type: 'Category', | |
119 | + position: 'bottom', | |
120 | + fields: ['name'], | |
121 | + title: 'Eixo Y' | |
130 | 122 | } |
131 | - }] | |
123 | + ], | |
124 | + series: [ | |
125 | + { | |
126 | + type: 'column', | |
127 | + axis: 'left', | |
128 | + highlight: true, | |
129 | + tips: { | |
130 | + trackMouse: true, | |
131 | + width: 140, | |
132 | + height: 28, | |
133 | + renderer: function(storeItem, item) { | |
134 | + this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data')); | |
135 | + } | |
136 | + }, | |
137 | + label: { | |
138 | + display: 'insideEnd', | |
139 | + 'text-anchor': 'middle', | |
140 | + field: 'data', | |
141 | + renderer: Ext.util.Format.numberRenderer('0'), | |
142 | + orientation: 'vertical', | |
143 | + color: '#333' | |
144 | + }, | |
145 | + xField: 'name', | |
146 | + yField: 'data' | |
147 | + } | |
148 | + ] | |
132 | 149 | }); |
133 | 150 | |
134 | 151 | widget = Ext.create('Ext.panel.Panel', { |
135 | 152 | layout: 'fit', |
136 | - title: 'Widgets', | |
153 | + title: 'Grafico de dados', | |
137 | 154 | width: '75%', |
138 | 155 | frame: true, |
139 | 156 | draggable: true, | ... | ... |