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,15 +78,20 @@ Ext.onReady(function(){ | ||
78 | }); | 78 | }); |
79 | 79 | ||
80 | 80 | ||
81 | -// **** GRAFICO DE PIZZA **** | 81 | +// **** GRAFICO DE COLUNA **** |
82 | 82 | ||
83 | var store = Ext.create('Ext.data.JsonStore', { | 83 | var store = Ext.create('Ext.data.JsonStore', { |
84 | fields: ['name', 'data'], | 84 | fields: ['name', 'data'], |
85 | data: [ | 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 | var chart = Ext.create('Ext.chart.Chart', { | 97 | var chart = Ext.create('Ext.chart.Chart', { |
@@ -97,43 +102,55 @@ var chart = Ext.create('Ext.chart.Chart', { | @@ -97,43 +102,55 @@ var chart = Ext.create('Ext.chart.Chart', { | ||
97 | store: store, | 102 | store: store, |
98 | theme: 'Base:gradients', | 103 | theme: 'Base:gradients', |
99 | shadow: true, | 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 | widget = Ext.create('Ext.panel.Panel', { | 151 | widget = Ext.create('Ext.panel.Panel', { |
135 | layout: 'fit', | 152 | layout: 'fit', |
136 | - title: 'Widgets', | 153 | + title: 'Grafico de dados', |
137 | width: '75%', | 154 | width: '75%', |
138 | frame: true, | 155 | frame: true, |
139 | draggable: true, | 156 | draggable: true, |