11

I'm new to angular and typescript, so this is probably really basic.

I'm trying to make an angular2 component with a chart (using Chart.js) in the template.

I realize there is a chart directive being developed, that specifically uses Chart.JS, but I would like to understand how to do this, as it will undoubtedly come up in an instance where a directive isn't available.

So far I've tried to do this simple thing in the template:

<canvas id="chart"></canvas>
<script> 
$(function () {
//instantiate chart on $("#chart")
});
</script>

But this javascript doesn't even run when the template has been loaded by angular2.

How would I go about this?

Sangwin Gawande
  • 7,658
  • 8
  • 48
  • 66
Dynde
  • 2,592
  • 4
  • 33
  • 56
  • What are you trying to do ? And what has this got to do with typescript ? Your question and code shows nothing about typescript.. – Pogrindis Jan 07 '16 at 10:41
  • Simply that I'm coding my angular2 in typescript. I thought it was relevant, since I can't write the chart.js javascript in my typescript file (as a sort of hack/workaround) – Dynde Jan 07 '16 at 10:43
  • if you are writing typescript then you have to compile down to the javascript of the browser because browsers only understand javascript not typescript. – Jai Jan 07 '16 at 10:43
  • 1
    You need to write interfaces in typescript for the `chart.js` library, but there is probably some already made, how far have you gotten though ? – Pogrindis Jan 07 '16 at 10:44
  • the typescript compiles fine into javascript, everything is setup fine, I don't have an issue with the angular2 app as such - it compiles and works in the browser. But I can't figure out how to use third party JS libs to manipulate the angular2 view – Dynde Jan 07 '16 at 10:46
  • @Pogrindis okay - so it's not possible to simply use/run javascript straight out of the box anywhere, so it just manipulates the angular2 view template? I have to write specific typescript interfaces? Wouldn't that mean I have to basically write an interface for the entire library? Or could I just do a really simple interface, using just the two or three lines of javascript code I need from the lib? – Dynde Jan 07 '16 at 10:49
  • 2
    No @Dynde, the `.ts` file will need to be strongly typed, and `js` libs are just not, so you use an interface : This might be useful for you: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/chartjs/chart.d.ts on another note, there are 'hacks' like saying `chartLib: any` so the any will circumvent the strong typing but that defeats the purpose really. – Pogrindis Jan 07 '16 at 10:49
  • 1
    Okay - thanks. I'll try and read some more about typescript interfaces. I guess I just don't really understand how that interface knows the source of chart.js - I only just started typescript – Dynde Jan 07 '16 at 10:53
  • 2
    @Dynde an interface doesn't know! That's why you define the interface, and ensure you got it right! :) That library I sent you have a lot of 3rd party definitions for `TS` ! – Pogrindis Jan 07 '16 at 10:54
  • Chart components of PrimeNG can help. http://www.primefaces.org/primeng/#/piechart – Cagatay Civici Feb 10 '16 at 16:55

1 Answers1

11

Okay - with the help of @Pogrindis I think I found a usable, not too complex solution.

By simply adding the typing definition for chart.js from here and referencing it in a custom directive I finally have this:

chart.directive.ts

/// <reference path="../../typings/chartjs/chart.d.ts" />

import {Directive, ElementRef, Renderer, Input} from 'angular2/core';
@Directive({
    selector: '[chart]'
})
export class ChartDirective {
    constructor(el: ElementRef, renderer: Renderer) {
        //el.nativeElement.style.backgroundColor = 'yellow';
        var data = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [
                {
                    label: "My First dataset",
                    fillColor: "rgba(220,220,220,0.2)",
                    strokeColor: "rgba(220,220,220,1)",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: [65, 59, 80, 81, 56, 55, 40]
                },
                {
                    label: "My Second dataset",
                    fillColor: "rgba(151,187,205,0.2)",
                    strokeColor: "rgba(151,187,205,1)",
                    pointColor: "rgba(151,187,205,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(151,187,205,1)",
                    data: [28, 48, 40, 19, 86, 27, 90]
                }
            ]
        };
        var ctx: any = el.nativeElement.getContext("2d");
        var lineChart = new Chart(ctx);
        ////var lineChartOptions = areaChartOptions;
        ////lineChartOptions.datasetFill = false;
        lineChart.Line(data);
    }
}

app.component.ts

import {Component} from 'angular2/core';
import {ChartDirective} from './chart.directive';

@Component({
    directives: [ChartDirective],
    selector: 'chart-graph', 
    templateUrl: '/js/app/template.html'
})

export class AppComponent { }

and template.html:

<canvas id="myChart" chart width="400" height="400"></canvas>
Dynde
  • 2,592
  • 4
  • 33
  • 56
  • Thanks for you question, this was exactly what I was looking for. I have a general idea why you need DefinitelyTyped, however I'm slightly confused how to implement it. 1. git clone DefinitelyTyped, 2. then referenced it `` in the index.html? could elaborate just a little more on your answer. Everything else I understand, even for the Angular2! – Chad Jan 07 '16 at 22:17
  • 2
    Okay this was the trick /// I didn't know that was a command or line in Angular2, I thought it was a comment out line for some reason. Regardless, make sure that is working this answer will get you up an running on Chart.js and Angular2! Thanks @dynde – Chad Jan 08 '16 at 04:18
  • @Dynde Which version of charts.js did you use with the typings you have mentioned in your answer? – Anmol Gupta Jul 15 '16 at 17:21
  • @Anmol Oh, darn, it's been so long, I honestly don't know, and the project has been abandoned, so I can't dig it up - sorry. – Dynde Jul 16 '16 at 18:49
  • 1
    @Dynde No worries. I figured it out. The typings referred here are valid for 1x versions. These are not valid for 2x versions. Typings for 2x version are still awaited. The issue is open on Github. https://github.com/chartjs/Chart.js/issues/1572 – Anmol Gupta Jul 16 '16 at 18:53