Angular 5

[AtifJaved1]

Hi, your plugin looks wonderful. How can I use it with angular 5? Can you please show me a simple example?

this is the error I am facing

[AtifJaved1]

import {Component, ElementRef, OnInit, AfterViewInit} from '@angular/core';
import * as Chart from "chartjs-plugin-streaming";
import moment = require("moment");

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


export class StatsComponent implements AfterViewInit {


  canvas: any;
  ctx: any;


  constructor() {

  }

  ngAfterViewInit() {
    this.canvas = document.getElementById('myChart');
    this.ctx = this.canvas.getContext('2d');

    var chartColors = {
      red: 'rgb(255, 99, 132)',
      orange: 'rgb(255, 159, 64)',
      yellow: 'rgb(255, 205, 86)',
      green: 'rgb(75, 192, 192)',
      blue: 'rgb(54, 162, 235)',
      purple: 'rgb(153, 102, 255)',
      grey: 'rgb(201, 203, 207)'
    };

    function newDate(ms) {
      return moment().add(ms, 'ms');
    }

    function randomScalingFactor() {
      return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
    }

    // function onRefresh() {
    //   config.data.datasets.forEach(function (dataset) {
    //     dataset.data.push({
    //       x: moment(),
    //       y: randomScalingFactor()
    //     });
    //   });
    // }

    // var config = ;
    let myChart = new Chart(this.ctx, {
      type: 'line',
      data: {
        labels: [1500, 1600, 1700, 1750, 1800, 1850, 1900, 1950, 1999, 2050],
        datasets: [{
          data: [86, 114, 106, 106, 107, 111, 133, 221, 783, 2478],
          label: "Africa",
          borderColor: "#3e95cd",
          fill: false
        }, {
          data: [282, 350, 411, 502, 635, 809, 947, 1402, 3700, 5267],
          label: "Asia",
          borderColor: "#8e5ea2",
          fill: false
        }, {
          data: [168, 170, 178, 190, 203, 276, 408, 547, 675, 734],
          label: "Europe",
          borderColor: "#3cba9f",
          fill: false
        }, {
          data: [40, 20, 10, 16, 24, 38, 74, 167, 508, 784],
          label: "Latin America",
          borderColor: "#e8c3b9",
          fill: false
        }, {
          data: [6, 3, 2, 2, 7, 26, 82, 172, 312, 433],
          label: "North America",
          borderColor: "#c45850",
          fill: false
        }
        ]
      },
      options: {
        title: {
          display: true,
          text: 'World population per region (in millions)'
        },
        scales: {

          xAxes: [{
            type: 'realtime',
            display: true,
            scaleLabel: {
              display: true,
              labelString: 'Time'
            }
          }],
          yAxes: [{
            ticks: {
              beginAtZero: true
            },
            scaleLabel: {
              display: true,
              labelString: '° C'
            }
          }]
        },
        plugins: {
          streaming: {
            duration: 1600000,


            // Sending the request for new data loopup is set to 5 mintues
            refresh: 300000,

            delay: 16000,
          }
        }
      }
    });


  }


}

I have attached that code. The error shows is the images attached in the previous post.

[nagix]

Ok, it works with Angular 5. Import modules this way:

import {Component, ElementRef, OnInit, AfterViewInit} from '@angular/core';
import {Chart} from 'chart.js';
import 'chartjs-plugin-streaming';
import moment = require('moment');

[itshazlan]

@nagix could i just use ng2-charts instead of using chart.js ?

[nagix]

The Angular sample in this tutorial is using ng2-charts (which depends on Chart.js, though).