0

What I want to do is creating an array using setRsi() function, then plotting it using doOutput() function that opens a new dialog for showing the result using ngg-charts component.

This is flow.component.ts file and setRsi() method is a click-event trigger function:

export class FlowComponent implements AfterViewInit {

  setRsi(selectedValue){
    console.log('The RSI period is:' , selectedValue);
    periodd = selectedValue;
    this.label2 = ' نام اندیکاتور:  RSI';
    this.label3 = ' دوره زمانی: ' + periodd + 'روزه';
    rsi_result = rsi({period: periodd, values: pricess});
    console.log('The RSI result is:' ,  rsi_result);
  }

  doOutput(){
    this.dialog.open(NgxChartsComponent ) ; 

  }
}

export const RSI_RESULT = rsi_result;
export const MACD_RESULT = macd_result;

doOutput() is also another click-event function that causes the error message.

I can see rsi_result or macd_result in my console when I click on related buttons. And the following is the content of ngx-chart component that I want to show the plotted charts as a dialog using this component.

ngx-charts.component.ts:

import { Component, OnInit } from '@angular/core';
import {MatDialog, MatDialogRef} from '@angular/material';

import {MACD_RESULT , RSI_RESULT} from '../flow/flow.component';
import {Mellat, Khodro, Shepna} from '../shared/stock_inf';
import { NewsComponent } from '../news/news.component';


console.log(rsi_result);


@Component({
  selector: 'app-ngx-charts',
  templateUrl: './ngx-charts.component.html',
  styleUrls: ['./ngx-charts.component.scss']
})



export class NgxChartsComponent implements OnInit {

 mellat = Mellat;
 khodro = Khodro;
 shepna = Shepna;

 macd_result = MACD_RESULT;
 rsi_result = RSI_RESULT; 
 constructor(public dialogRef: MatDialogRef<NgxChartsComponent>) { }



  // data goes here
public single = [
  {
    "name": " درصد سود",
    "value": 69
  },
  {
    "name": " درصد زیان",
    "value": 31
  },

];



// LENGTH = RSI_RESULT.length;
 newArray = rsi_result.map((e, i) => ({
  "name": (i + 1).toString(),
  "value": e,
}));

newArray2 = mellat.map((e, i) => ({
  "name": (i + 1).toString(),
  "value": e,
}));


public multi = [
  {
    "name": "RSI",
    "series": this.newArray
  },

  {
    "name": "Mellat",
    "series": this.newArray2
  },

];

//{name: (i + 1).toString(), value: e.toString()}



  view: any[] = [700, 400];

  // options for the chart
  showXAxis = true;
  showYAxis = true;
  gradient = false;
  showLegend = true;
  showXAxisLabel = true;
  xAxisLabel = 'زمان';
  showYAxisLabel = true;
  yAxisLabel = 'قیمت';
  timeline = true;

  colorScheme = {
    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
  };

  // line, area
  autoScale = true;

  //pie
  showLabels = true;
  explodeSlices = false;
  doughnut = false;

  ngOnInit() {

  }
}

And this is the error message I get:

ERROR TypeError: Cannot read property 'map' of undefined
    at new NgxChartsComponent (ngx-charts.component.ts:45)
    at createClass (core.js:27865)
    at createDirectiveInstance (core.js:27685)
    at createViewNodes (core.js:38315)
    at createRootView (core.js:38187)
    at callWithDebugContext (core.js:39716)
    at Object.debugCreateRootView [as createRootView] (core.js:38953)
    at ComponentFactory_.create (core.js:26827)
    at ComponentFactoryBoundToModule.create (core.js:22791)
    at ViewContainerRef_.createComponent (core.js:26983)
View_NgxChartsComponent_Host_0 @ NgxChartsComponent_Host.ngfactory.js? [sm]:1
proxyClass @ compiler.js:19436
logError @ core.js:39651
handleError @ core.js:9162
dispatchEvent @ core.js:25822
(anonymous) @ core.js:37030
(anonymous) @ platform-browser.js:1789
invokeTask @ zone-evergreen.js:391
onInvokeTask @ core.js:34182
invokeTask @ zone-evergreen.js:390
runTask @ zone-evergreen.js:168
invokeTask @ zone-evergreen.js:465
invokeTask @ zone-evergreen.js:1603
globalZoneAwareCallback @ zone-evergreen.js:1629
NgxChartsComponent_Host.ngfactory.js? [sm]:1 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 1, nodeDef: {…}, elDef: {…}, elView: {…}}
Hasani
  • 3,543
  • 14
  • 65
  • 125
  • can you check by console.log(rsi_result); in init method NgxChartsComponent ? – Sats Jan 19 '20 at 06:58
  • @SatishPai: `console.log(rsi_result);` doesn't work but `console.log(this.rsi_result);` works, though I get the error message that I put in my question before I can see the log message! – Hasani Jan 19 '20 at 07:08
  • From the above given code what I see is, the map method is not found in the assigned result set. Try to provide rsi_result?.map instead of rsi_result.map. Check whether it works with click as well. – Sats Jan 19 '20 at 07:11
  • @SatishPai: My program doesn't work if I add a question mark after `rsi_result`. – Hasani Jan 19 '20 at 07:14
  • That means rsi_result has null value in it therefore it didn't go ahead for map. You need change the flow by to calling the setRsi method first by providing a dummy value. Check it once. – Sats Jan 19 '20 at 07:20
  • @SatishPai: As I am a bigginer I don't know how exactly should I pass variables from one component to the other. I think I should use services? Anyway it would be greate if you help me by puting more details in an answer. – Hasani Jan 19 '20 at 07:25
  • Yes, sure could you share your working code/ sample in stackblitz, It will be helpful. – Sats Jan 19 '20 at 07:42
  • @SatishPai: Thank you very much for your help, unfortunately I don't know how to work with stackblizer but I added my github repo link to my question that you can find the full code of the project. – Hasani Jan 19 '20 at 09:21
  • 1
    give me sometime to understand it – Sats Jan 19 '20 at 09:36
  • If you run the code, then go to the `ساخت استراتژی` tab, then choose the blue circle to add into the flow, then choose `وبملت` from the select menu, then press the green button `اعمال` below the form to set it's value(it will call the `setInput()` function inside the `flow.component.ts`. – Hasani Jan 19 '20 at 10:16
  • Then you must choose the `RSI` rectangle and add it to flow and choose one of the oprions in it's form like `6` then click the green buttun`اعمال` to call `setRsi()` function in `flow.component.ts` file. Finally choose the red circle and just click it's green `اعمال` button and it tries to execure `doOutput()` function inside the `flow.compoent()` and the error will happening. – Hasani Jan 19 '20 at 10:18
  • @SatishPai: Please read my last two comments that I tried to explain how to see the error. – Hasani Jan 19 '20 at 10:22

0 Answers0