Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Any way to obtain the Chart object without importing Chart.js? #36

Closed
bcl-lcb opened this issue Jul 19, 2018 · 2 comments
Closed

Any way to obtain the Chart object without importing Chart.js? #36

bcl-lcb opened this issue Jul 19, 2018 · 2 comments
Assignees
Labels

Comments

@bcl-lcb
Copy link

bcl-lcb commented Jul 19, 2018

Here is my code:

import { Component, OnInit } from '@angular/core';
import 'chartjs-plugin-streaming';
import { ActivatedRoute } from '../../../node_modules/@angular/router';

@Component({
  selector: 'app-resource-monitor',
  templateUrl: './resource-monitor.component.html',
  styleUrls: ['./resource-monitor.component.css']
})
export class ResourceMonitorComponent implements OnInit {

  datasets: any[] = [{
    data: [],
    label: 'line1'
  }, {
    data: [],
    label: 'line2'
  }];
  options: any = {
    scales: {
      xAxes: [{
        type: 'realtime'
      }]
    },
    plugins: {
      streaming: {
        onRefresh: function (chart: any) {
          chart.data.datasets.forEach(function (dataset: any) {
            dataset.data.push({
              x: Date.now(),
              y: Math.random()
            });
          });
        },
        duration: 20000,    // data in the past 20000 ms will be displayed
        refresh: 1000,      // onRefresh callback will be called every 1000 ms
        delay: 1000,        // delay of 1000 ms, so upcoming values are known before plotting a line
        frameRate: 30,      // chart is drawn 30 times every second
        pause: false,       // chart is not paused
      }
    },
    animation: {
      duration: 0                    // general animation time
    },
    hover: {
      animationDuration: 0           // duration of animations when hovering an item
    },
  };

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.route.params.subscribe(params => {
      const id = params['id'];
    });
  }

  pause() {
    this.options.plugins.streaming.pause = !this.options.plugins.streaming.pause;
  }
}

I want to start/pause the chart.
It seems like I need to update the chart after setting this.options.plugins.streaming.pause as true.
So I wonder if there is any way to obtain the chart object and call chart.update().

Thanks a lot!!!

@bcl-lcb bcl-lcb closed this as completed Jul 20, 2018
@nagix
Copy link
Owner

nagix commented Jul 23, 2018

@nagix nagix self-assigned this Jul 23, 2018
@nagix nagix added the question label Jul 23, 2018
@bcl-lcb
Copy link
Author

bcl-lcb commented Jul 23, 2018

Yes, that's what I did. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants