load external json data file in to chartjs in the angular component

Question

i am beginner in angular and chartjs. I want to load same data file in different chart. so i create a json file. and i want to load it my chart.

My code is like below

external_data.json

[{
    "data": "[13, 22, 30, 40, 50]",
    "label": "Africa",
    "borderColor": "#3e95cd",
    "fill": "false"
}, {
    "data": "[47, 14, 37, 67, 80]",
    "label": "Asia",
    "borderColor": "#8e5ea2",
    "fill": "false"
}]

line-chart.component.ts

       var ctx = document.getElementById("line-chart");

    new Chart(ctx, {


        type: 'line',
        data: {
            labels: [1850, 1900, 1950, 2000, 2050],

           datasets:  // i want get json here

        }

    });

this is folder structure

Sajeetharan · Accepted Answer · 2018-01-04 06:56:31Z

1

Juse mention the path as follows,

loaddata() {
   this.Items = this.http.get("../data/external_data.json")
                 .map(res => res.json());
 }

and assign this.Items to your array

answered Jan 4, 2018 at 6:56

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jayantha Over a year ago

get some error like that [ts] Property 'map' does not exist on type 'Observable<Response>'

Sajeetharan Over a year ago

you need to import import 'rxjs/add/operator/map'

Jayantha Over a year ago

its ok.. but now get this ERROR TypeError: Cannot read property 'get' of undefined

Sajeetharan Over a year ago

import http inside your constructor

Collectives™ on Stack Overflow

load external json data file in to chartjs in the angular component

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related