HighChart in the Segment

@manhlh231 wrote:

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
}

`

Posts: 1

Participants: 1

Read full topic