plotter.component.ts

import { Component } from '@angular/core';
import { GHCIService } from '../../shared/services/ghci.service'; 
import  functionPlot from 'function-plot';
 
@Component({
    moduleId: module.id,
    selector: 'plotter-component',
    templateUrl: './plotter.component.html',
    host: {
        
    }
})
export class PlotterComponent {
    public constructor(private ghciService: GHCIService) {
        ghciService.messages.subscribe(
            canvas=>{
                if (canvas.tipo == 'graph'){
                    var jsonCanvas = JSON.parse(canvas.resultado);
                    let fun = eval(this.generarFuncion(jsonCanvas));


                    functionPlot({
                        target: '#plotter-container',
                        width: 770,
                        height: 720,
                        tip: {
                          color: 'green'
                        },
                        xAxis: {
                          label: 'x - axis',
                          scale: 'linear',
                          domain: {
                            initial: [-4, 4],
                            type: 'discrete'
                          }
                        },
                        data: [{
                          graphType: 'scatter',
                          fn: function (scope) {
                            // scope.x = Number
                            return fun(scope.x)
                          }
                        }]
                      })

                    // functionPlot({
                    //     target: '#plotter-container',
                    //     width: 620,
                    //     height: 450,
                    //     data: [{
                    //         sampler: 'builtIn',
                    //         fn: function(scope) {
                    //           return fun(scope.x)
                    //         },
                    //         graphType: 'polyline'
                    //     }]
                    //   })
                }
        },
        error=>{
            
        })
    }


    
    generarFuncion = function(graph) {
            var funcionString = '';
            var grafica;
            for (var fun of graph.funs) {