diff --git a/Frontend Angular 4/package.json b/Frontend Angular 4/package.json
index b11c5d38561a3c9c626ba7bbf8e0c6cd25a8dbe0..d660e698680606f3743eedf98411f27668d98924 100755
--- a/Frontend Angular 4/package.json	
+++ b/Frontend Angular 4/package.json	
@@ -24,7 +24,7 @@
     "core-js": "^2.4.1",
     "d3": "^4.12.2",
     "font-awesome": "^4.7.0",
-    "function-plot": "git://github.com/diego-rey/function-plot.git#feature/integration-domain-shape",
+    "function-plot": "git://github.com/diego-rey/function-plot.git#feature/mutigraf",
     "graph3D": "git://github.com/ifagian/graph3D#master",
     "ionicons": "^3.0.0",
     "jq-console": "^2.13.2",
diff --git a/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts b/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts
index ea1d6d4432aac3adccfd9043ce25ae784e076748..fa43e65123ce54e6e0128415d61a4a999daee62c 100755
--- a/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts	
+++ b/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts	
@@ -17,6 +17,14 @@ export class Graph2DComponent {
 
     private instance: null;
 
+    private funciones= [];
+
+    private boton = true;
+
+    private id = 0;
+
+    private conjunto= [];
+
     animation: Animation = {
         data: [],
         timer: null,
@@ -39,7 +47,7 @@ export class Graph2DComponent {
                         let fun = eval(this.generarFuncion(jsonCanvas));
                         var conjs = this.obtenerConjunto(jsonCanvas.funs[0]);
     
-                        var d = conjs + "}";
+                        var d = conjs + "}"; //Leo
     
                         var obj = JSON.parse(d);
                         //Para las funciones 
@@ -83,19 +91,60 @@ export class Graph2DComponent {
                         }else{
                             tipoGraf = 'polyline';
                         }
-                        this.instance = functionPlot({
-                            target: '#graph2D-container',
-                            width: 620,
-                            height: 450,
-                            conj:obj.conj,
-                            data: [{
+
+                        if(this.boton){
+                            if(this.conjunto.length == 1){
+                                this.id = 1;
+                                this.conjunto.unshift({radio: 2, dom:this.conjunto[0].baseDom, cod:this.conjunto[0].baseCod, baseCod:this.conjunto[0].baseCod, baseDom:this.conjunto[0].baseDom, sets:{fdom:this.conjunto[0].baseDom,fcod:this.conjunto[0].baseCod}});
+                                this.funciones[0].id = this.id;
+                                
+                            }
+                            if (this.conjunto.length != 0){ 
+                                if (obj.conj.baseDom == 'R'){
+                                    this.conjunto[0].baseDom = 'R';
+                                    this.conjunto[0].dom = 'R';
+                                    this.conjunto[0].sets.fdom = 'R';
+                                }
+                                if (obj.conj.baseCod == 'R'){
+                                    this.conjunto[0].baseCod = 'R';
+                                    this.conjunto[0].cod = 'R';
+                                    this.conjunto[0].sets.fcod = 'R';
+                                }
+                            }    
+                            this.conjunto.push(obj.conj);
+
+                            this.funciones.push({
+                                id: this.funciones.length + this.id,
                                 sampler: 'builtIn',
                                 fn: function(scope) {
                                   return fun(scope.x)
                                 },
                                 graphType: tipoGraf,
                                 color: color
-                            }],
+                            });
+
+                        }else{ 
+                            this.conjunto = [];
+                            this.conjunto.push(obj.conj);
+                            this.id = 0;
+                            this.funciones = [];
+                            this.funciones.push({
+                                id: this.funciones.length,
+                                sampler: 'builtIn',
+                                fn: function(scope) {
+                                  return fun(scope.x)
+                                },
+                                graphType: tipoGraf,
+                                color: color
+                            });
+                        }
+                        this.instance = functionPlot({
+                            target: '#graph2D-container',
+                            width: 620,
+                            height: 450,
+                            conj:this.conjunto,
+                            data: this.funciones,
+                            zoom:1000,
                             plugins: [
                                 functionPlot.plugins.zoomBox()
                             ]
@@ -272,6 +321,9 @@ export class Graph2DComponent {
         if (this.animation.playing) {
             this.stopAnimation();
         } else {
+            this.funciones = [];
+            this.conjunto = [];
+            this.id = 0;
             this.instance.removeAllGraphs();
         }
     }
@@ -677,8 +729,5 @@ export class Graph2DComponent {
 
         return funcionString;
     }
-
-
-
 }
 
diff --git a/Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.ts b/Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.ts
index 365500a061ff9d993b08059345ea9297fc0fb73a..dcf996208c6840fe9eeeee9bcaa251ed3bccb297 100644
--- a/Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.ts	
+++ b/Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.ts	
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, ElementRef, NgZone } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef, NgZone, AfterViewInit } from '@angular/core';
 import * as graph3DLib from 'graph3D';
 import { GHCIService } from '../../../shared/services/ghci.service';
 import { formatJSON, AnimationProps, Zoom3DType, GraphProps, Default_GraphProps, debounce } from './graph3D.helper';
@@ -11,7 +11,7 @@ import { formatJSON, AnimationProps, Zoom3DType, GraphProps, Default_GraphProps,
     '(window:resize)': 'onResize($event)'
   }
 })
-export class Graph3DComponent  {
+export class Graph3DComponent implements AfterViewInit {
 
   private ghciServiceSub: any;
 
@@ -55,7 +55,13 @@ export class Graph3DComponent  {
 
   ngAfterViewInit() {
   //  this.zone.runOutsideAngular(() => {
-      graph3DLib.initialize(this.graph3DRef.nativeElement);
+      graph3DLib.initialize(this.graph3DRef.nativeElement, true);
+
+      (function render() {
+        console.info("ngAfterViewInit: ####### FIRED");
+          //requestAnimationFrame(render);
+          graph3DLib.forceUpdateRenderer();
+      }());
     //})
   }