diff --git a/src/js/app.js b/src/js/app.js
index 64631ff..fafec86 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -1 +1,6 @@
-angular.module('focaEstadoCisternas', ['ngRoute', 'focaModal', 'ui.bootstrap', 'focaBotoneraLateral']);
+angular.module('focaEstadoCisternas', [
+    'ngRoute',
+    'focaModal',
+    'ui.bootstrap',
+    'focaBotoneraLateral'
+]);
diff --git a/src/js/controller.js b/src/js/controller.js
index 4e1113e..a3c65b1 100644
--- a/src/js/controller.js
+++ b/src/js/controller.js
@@ -1,25 +1,14 @@
 angular.module('focaEstadoCisternas')
     .controller('focaEstadoCisternasController', [
-        '$scope', 'focaEstadoCisternasService', '$location', 'focaModalService',
+        '$scope', 'focaEstadoCisternasService', 'focaModalService',
         '$uibModal', 'focaBotoneraLateralService', '$timeout',
-        function($scope, focaEstadoCisternasService, $location, focaModalService,
+        function($scope, focaEstadoCisternasService, focaModalService,
             $uibModal, focaBotoneraLateralService, $timeout) {
 
             $scope.now = new Date();
             $scope.fecha = new Date();
             $scope.cisternas = [];
-            $scope.botonera = [{
-                label: 'Transportista',
-                image: 'transportista.png'
-            },
-            {
-                label: 'Vehiculo',
-                image: 'vehiculos.png'
-            },
-            {
-                label: 'Fecha',
-                image: 'fechaDeReparto.png'
-            }];
+            $scope.botonera = focaEstadoCisternasService.getBotonera();
 
             //SETEO BOTONERA LATERAL
             focaBotoneraLateralService.showSalir(true);
@@ -94,6 +83,26 @@ angular.module('focaEstadoCisternas')
                 });
             };
 
+            $scope.seleccionarGrafico = function() {
+                if(!$scope.cisternas.length){
+                    focaModalService.alert('Primero seleccione un vehículo');
+                    return;
+                }
+                $uibModal.open(
+                    {
+                        ariaLabelledBy: 'Grafico de cisternas',
+                        templateUrl: 'modal-grafico-cisternas.html',
+                        controller: 'focaModalGraficoCisternasController',
+                        size: 'md',
+                        resolve:{
+                            filters: {
+                                cisternas: $scope.cisternas
+                            }
+                        }
+                    }
+                );
+            };
+
             function elegirTransportista(transportista) {
                 var codigo = ('00000' + transportista.COD).slice(-5);
                 $scope.idTransportista = transportista.COD;
diff --git a/src/js/service.js b/src/js/service.js
index b230262..db22c67 100644
--- a/src/js/service.js
+++ b/src/js/service.js
@@ -25,6 +25,26 @@ angular.module('focaEstadoCisternas')
             getEstadoCisterna: function(id, fecha) {
                 return $http.post(API_ENDPOINT.URL + '/cisterna/stock',
                     {idCisterna: id, fecha: fecha});
+            },
+            getBotonera: function() {
+                return [
+                    {
+                        label: 'Transportista',
+                        image: 'transportista.png'
+                    },
+                    {
+                        label: 'Vehiculo',
+                        image: 'vehiculos.png'
+                    },
+                    {
+                        label: 'Fecha',
+                        image: 'fechaDeReparto.png'
+                    },
+                    {
+                        label: 'Grafico',
+                        image: 'fechaDeReparto.png'
+                    }
+                ];
             }
         };
     }]);
diff --git a/src/views/foca-estado-cisterna.html b/src/views/foca-estado-cisterna.html
index 08eed7b..da29c53 100644
--- a/src/views/foca-estado-cisterna.html
+++ b/src/views/foca-estado-cisterna.html
@@ -9,7 +9,7 @@
     <div class="col-12 col-md-10 p-0 mt-4 border border-white rounded">
         <div class="row px-5 py-2 botonera-secundaria">
             <div class="col-12">
-                <foca-botonera-facturador botones="botonera" extra="3" class="row">
+                <foca-botonera-facturador botones="botonera" extra="2" class="row">
                 </foca-botonera-facturador>
             </div>
         </div>
@@ -19,6 +19,7 @@
                     <th>Código</th>
                     <th>Capacidad total</th>
                     <th>Carga</th>
+                    <th>Disponible</th>
                     <th>Producto</th>
                 </tr>
             </thead>
@@ -27,6 +28,7 @@
                     <td ng-bind="cisterna.codigo"></td>
                     <td ng-bind="cisterna.capacidad + ' ' + cisterna.unidadMedida.NOM"></td>
                     <td ng-bind="cisterna.estado.cantidad"></td>
+                    <td ng-bind="cisterna.capacidad - cisterna.estado.cantidad"></td>
                     <td ng-bind="(cisterna.estado.producto) ? cisterna.estado.producto.DetArt : '-'"></td>
                 </tr>
             </body>