HighChart in the Segment


#1

hi,
I use HighChart library in the Segment, my segment have 2 tab DASHBOARD and NEW, my Chart in the DASHBOARD tab. First run: My Chart run, but i click to New tab and come back DASHBOARD tab => My chart not run ?
[sorry, i’m not good english]
– My code html:

 <div class="segment-chart">
        <ion-segment [(ngModel)]="pet">
            <ion-segment-button value="dashboard" (ionSelect)="selectedFriends()">
                DASHBOARD
            </ion-segment-button>
            <ion-segment-button value="new">
                NEW
            </ion-segment-button>
        </ion-segment>
    </div>

    <div [ngSwitch]="pet">
        <div class="chart" *ngSwitchCase="'dashboard'">
            <!--View Chart-->
            <div #chart>
                <chart type="StockChart" [options]="options"></chart>
            </div>
        </div>
        <ul *ngSwitchCase="'new'" style="list-style-type:none" class="div-new-body">
            <li class="div-new-li" *ngFor="let new of lsNews">
                <div class="div-new-detail">
                    <div class="div-new-title">
                        {{new.date}}
                    </div>
                    <div class="div-new-content">
                        {{new.title}}
                    </div>
                </div>
                <div class="div-new-nav">></div>
            </li>
        </ul>
    </div>

My code file ts:

export class ChartPage implements AfterViewInit, OnDestroy {
    private _chart: any;
    lastData: any
    lstData: any = []
    pet : any
    lsNews : any = []
    opts : any;
    @ViewChild('chart') public chartEl: ElementRef;
    //chartOption: any

    // Destroy Chart
    ngOnDestroy(): void {
        // throw new Error("Method not implemented.");
        console.log("OnDestroy run")
        var chart = this._chart
        chart.destroy();
    }

    // option Chart
    ngAfterViewInit() {    			       
        if (this.chartEl && this.chartEl.nativeElement) {
            this.opts.chart = {
                // type: 'area',
                renderTo: this.chartEl.nativeElement,	
				  backgroundColor: {
            linearGradient: [0, 0, 500, 500],
            stops: [
                [0, '#3d4d64'],
                [1, '#3d4d64']
            ]         
        },
         height: '90%',
          spacingBottom: 15,
        spacingTop: 10,
        spacingLeft: 10,
        spacingRight: 10,	

            };
            console.log('chart create ss')
            this._chart = new Highcharts.StockChart(this.opts);			
        }
    }

    constructor(public navCtrl: NavController, public navParams: NavParams, public service: Service) {
    
        const me = this;
     
        this.pet= 'dashboard';
        setInterval(function () {
            if (me._chart) {
				
                me._chart['series'][0].addPoint([
                    (new Date()).getTime(), // gia tri truc x
                    //5// gia tri truc y
                    me.getData()
                ],
                    true,
                    true);
            }
        }, 3000);

          this.opts = {           
			credits: {
     			   enabled: false
 			     },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150,				
            labels: {
                style: {
                    color: '#705f43' // color time
                }
            },
            lineColor: '#705f43' // 2 line cuoi mau trang                      
		},
		
			  yAxis: {
            gridLineColor: '#705f43', //line gach ngang
            labels: {
                style: {
                    color: '#fff'
                }
            },
            lineColor: '#ff0000',
            minorGridLineColor: '#ff0000',
            tickColor: '#fff',
            tickWidth: 1,
            title: {
                style: {
                    color: '#ff0000'
                }
            }
        },
			navigator: {
        			enabled: false
    			},			
            rangeSelector: {
	
                buttons: [{
                    count: 1,
                    type: 'minute',
                    text: '1M'
                }, {
                    count: 5,
                    type: 'minute',
                    text: '5M'
                }, {
                    type: 'all',
                    text: 'All'
                }],
		inputEnabled: false,
                selected: 0,
               
            },
   
            series: [{				
                name: 'Random data',
                data: (function () {
                    // generate an array of random data
                    var data = [],
                        time = (new Date()).getTime(),
                        i;

                    for (i = -50; i <= 0; i += 1) {
                        data.push([
                            time + i * 1000,
                            Math.round(Math.random() * 100)
                        ]);
                    }
                    return data;
                }()),
				 zones: [{
      				color: '#f8ad40'
        }]
            }]
        };     
        //end contructor
    }