CODEWITHSUNDEEP
angularcharts
c0micrage
c0micrage

Reputation: 1180

Angular Charts.js Rending a blank canvas

I have having issues with getting angular charts.js to work on my dialog. At first, I followed the steps provided in this link, https://coursetro.com/posts/code/126/Let's-build-an-Angular-5-Chart.js-App---Tutorial, which is made for Angular 5. I just copied the test data over to my angular class array. When I run the application, my dialog is blank. I found another link about charts.js, which is https://dev.to/wiaio/implementing-a-chartjs-line-chart-in-your-angular-application-19d7. The changes I made was

HTML 

<div *ngIf="chart">
        <canvas id="canvas">{{chart}}</canvas>
    </div> 
to 
<canvas #dataChart>{{ chart }}</canvas>

In my ts code

I added the following

export class ChartComponent implements OnInit {

 @ViewChild('dataChart') private chartRef
  chart: any;
ngOnInit() {

  var temp_max = [279.946, 282.597, 280.15];
  var temp_min = [279.946, 282.597, 278.15];
  var alldates = [1485717216, 1485745061, 1485768552];

  let weatherDates = []

  let jsdate1 = new Date(1485717216 * 1000);
  weatherDates.push(jsdate1.toLocaleTimeString('en', { year: 'numeric', month: 'short', day: 'numeric' }));
  let jsdate2 = new Date(1485745061 * 1000);
  weatherDates.push(jsdate2.toLocaleTimeString('en', { year: 'numeric', month: 'short', day: 'numeric' }));
  let jsdate3 = new Date(1485768552 * 1000);
  weatherDates.push(jsdate3.toLocaleTimeString('en', { year: 'numeric', month: 'short', day: 'numeric' }));

    this.chart = new Chart(this.chartRef.nativeElement, {
      type: 'line',
      data: {
        labels: weatherDates,
        datasets: [
          { 
            data: temp_max,
            borderColor: "#3cba9f",
            fill: false
          },
          { 
            data: temp_min,
            borderColor: "#ffcc00",
            fill: false
          },
        ]
      },
      options: {
        legend: {
          display: false
        },
        scales: {
          xAxes: [{
            display: true
          }],
          yAxes: [{ 
            display: true
          }],
        }
      }
    });
  }

I placed a break point just before leaving and checked the this.chart and the content is the following when I hover over the this.chart. I changed the code a few times. I even change the chart declaration to chart: Chart but it is not working. The online example looks straight forward but I can trace to the bug that is causing a blank dialog.

Any help for gurus is appreciated. Thanks.

_bufferedRender:false _listeners:Object {mousemove: , mouseout: , click: , …} $plugins:Object {descriptors: Array(3), id: 3} animating:true aspectRatio:2 boxes:Array(4) [ChartElement, ChartElement, ChartElement, …] canvas:canvas.chartjs-render-monitor {$chartjs: Object, __zone_symbol__mousemovefalse: Array(1), __zone_symbol__mouseoutfalse: Array(1), …} chart:Chart {id: 1, ctx: CanvasRenderingContext2D, canvas: canvas.chartjs-render-monitor, …} chartArea:Object {left: 71.7158203125, top: 6, right: -71.7158203125, …} config:Object {type: "line", data: Object, options: Object} controller:Chart {id: 1, ctx: CanvasRenderingContext2D, canvas: canvas.chartjs-render-monitor, …} ctx:CanvasRenderingContext2D {canvas: canvas.chartjs-render-monitor, globalAlpha: 1, globalCompositeOperation: "source-over", …} currentDevicePixelRatio:1 data:Object height:0 id:1 lastActive:Array(0) [] legend:ChartElement {ctx: CanvasRenderingContext2D, options: Object, chart: Chart, …}

Upvotes: 0

Views: 1026

Answers (1)

wFitz
wFitz

Reputation: 1286

the problem you have is chartRef is undefined. You can use 

<canvas id=chart> in your html

and use chart in your Chart constructor, or use a setter : 

chartRef;
@ViewChild('dataChart') set ref(ref: ElementRef) {
    this.chartRef = ref;
}

I made a working example in stackblitz, # 14, the component is chart-example

Hope it helps

Upvotes: 1

Related Questions