How to use the smoothie.SmoothieChart function in smoothie

let start_rendering_line_chart = function () {

        if (!scope.color)
          scope.color = '0, 255, 0'

        let series, w, h, canvas

        angular.element($window).bind('resize', function() {
          canvas.width = w
          canvas.height = h
        })

        // smoothieJS - Create new chart
        let chart = new smoothie.SmoothieChart({
          borderVisible: false,
          sharpLines: true,
          grid: {
            fillStyle: '#ffffff',
            strokeStyle: 'rgba(232,230,230,0.93)',
            sharpLines: true,
            millisPerLine: 3000,
            borderVisible: false
          },
          labels: {
            fontSize: 11,
            precision: 0,
            fillStyle: '#0f0e0e'
          },
          maxValue: parseInt(scope.maxValue),
          minValue: parseInt(scope.minValue),

millisPerPixel: 25,
    grid: {
      verticalSections: 0,
      strokeStyle: 'transparent',
      fillStyle: 'transparent',
    },
    labels: {
      disabled: true,
    },
    maxValue: 200,
    minValue: 0,
    // scaleSmoothing:.7,
    limitFPS: 0,
  };

  chart.slotChart = new SmoothieChart(chartOptions);

  if (micboard.MIC_MODELS.indexOf(data.type) > -1) {
    chart.audioSeries = new TimeSeries();
    chart.rfSeries = new TimeSeries();
    chart.slotChart.addTimeSeries(chart.audioSeries, {
      strokeStyle: '#69B578',
      fillStyle: '',
      lineWidth: 2,
    });

    chart.slotChart.addTimeSeries(chart.rfSeries, {
      strokeStyle: '#DC493A',
      fillStyle: '',
      lineWidth: 2,
    });
  } else if (micboard.IEM_MODELS.indexOf(data.type) > -1) {

link: function(scope, element) {

      let w, h, canvas

      angular.element($window).bind('resize', function() {
        canvas.width = w
        canvas.height = h
      })

      // smoothieJS - Create new chart
      let chart = new smoothie.SmoothieChart({
        borderVisible: false,
        sharpLines: true,
        grid: {
          fillStyle: '#ffffff',
          strokeStyle: 'rgba(232,230,230,0.93)',
          sharpLines: true,
          borderVisible: false
        },
        labels: {
          fontSize: 12,
          precision: 0,
          fillStyle: '#0f0e0e'
        },
        maxValue: 100,
        minValue: 0,
        horizontalLines: [{

mounted () {
    // Random data
    var line1 = new TimeSeries()
    // Add random data points at irregular intervals
    var maxYValue = 10000
    var addValueLoop = function () {
      setTimeout(function () {
        // Generate a random value, centered around zero, raised to the power of 5
        // so that larger values occur less frequently
        var value = Math.pow(Math.random() * 2 - 1, 5) * maxYValue
        line1.append(new Date().getTime(), value)
        addValueLoop()
      }, Math.random() * 500)
    }
    addValueLoop()
    var smoothie = new SmoothieChart({
      grid: {
        strokeStyle: 'transparent',
        borderVisible: false
      },
      tooltip: true,
      labels: { disabled: true }
    })
    smoothie.addTimeSeries(line1, {
      strokeStyle: 'rgb(0, 255, 0)',
      fillStyle: 'rgba(0, 255, 0, 0.4)',
      lineWidth: 2
    })
    smoothie.streamTo(document.getElementById('smoothie-chart'), 100)
  }
}

  readonly canvases = Array(this.channels).fill(0).map(() => new SmoothieChart(this.options));

startCPUChart () {

		this.cpuChart = new SmoothieChart({
			millisPerPixel: 100,
			interpolation: 'linear',
			grid: {
				strokeStyle: 'rgba(0,0,0,0.05)',
				verticalSections: 5,
				fillStyle: 'transparent',
				borderVisible: false,
				millisPerLine: 10000,
			},
			maxValue: 100,
			minValue: 0,
			yMinFormatter: function (min, precision) {
				return parseFloat(min).toFixed(precision) + '%';
			},
			yMaxFormatter: function (max, precision) {
				return parseFloat(max).toFixed(precision) + '%';

initChart(data) {
    const chart = {};

    chart.slotChart = new SmoothieChart(chartOptions);

    if (MIC_MODELS.indexOf(data.type) > -1) {
      chart.audioSeries = new TimeSeries();
      chart.rfSeries = new TimeSeries();
      chart.slotChart.addTimeSeries(chart.audioSeries, {
        strokeStyle: '#69B578',
        fillStyle: '',
        lineWidth: 2,
      });

      chart.slotChart.addTimeSeries(chart.rfSeries, {
        strokeStyle: '#DC493A',
        fillStyle: '',
        lineWidth: 2,
      });
    } else if (IEM_MODELS.indexOf(data.type) > -1) {

function render () {
  if (smoothie) smoothie.stop();
  $('chart').width = document.body.clientWidth;
  smoothie = new SmoothieChart();
  smoothie.streamTo($('chart'), 1000);
  time = new TimeSeries();
  smoothie.addTimeSeries(time, {
    strokeStyle: 'rgb(255, 0, 0)',
    fillStyle: 'rgba(255, 0, 0, 0.4)',
    lineWidth: 2
  });
}

startMemoryChart () {

		this.memoryChart = new SmoothieChart({
			millisPerPixel: 100,
			interpolation: 'linear',
			grid: {
				strokeStyle: 'rgba(0,0,0,0.05)',
				verticalSections: 5,
				fillStyle: 'transparent',
				borderVisible: false,
				millisPerLine: 10000,
			},
			yMinFormatter: function (min, precision) {
				return parseFloat(min).toFixed(precision) + ' MiB';
			},
			yMaxFormatter: function (max, precision) {
				return parseFloat(max).toFixed(precision) + ' MiB';
			},
			labels: {