I'm using ng2-nvd3, and I want to access external json data. Based on the below code snippet, how do I reference the .json file that would hold the same data as displayed in the this.data array below?
import {Component} from 'angular2/core';
declare let d3:any;
import {nvD3} from 'ng2-nvd3';
@Component({
selector: 'bar-chart',
directives: [nvD3],
template: `
<div>
<nvd3 [options]="options" [data]="data"></nvd3>
</div>
`
})
export class BarChartComponent {
options;
data;
ngOnInit() {
this.options = {
chart: {
type: 'discreteBarChart',
height: 450,
margin: {
top: 20,
right: 20,
bottom: 50,
left: 55
},
x: function (d) {
return d.label;
},
y: function (d) {
return d.value;
},
showValues: true,
valueFormat: function(d){
return d3.format(',.4f')(d);
},
duration: 500,
xAxis: {
axisLabel: 'X axis',
},
yAxis: {
axisLabel: 'Y axis',
axisLabelDistance: -10
}
}
}
//Want to replace this with an external json file.
this.data = [
{
key: "Cumulative Return",
values: [
{
"label": "A",
"value": -29.765957771107
},
{
"label": "B",
"value": 0
},
{
"label": "C",
"value": 32.807804682612
},
{
"label": "D",
"value": 196.45946739256
},
{
"label": "E",
"value": 0.19434030906893
},
{
"label": "F",
"value": -98.079782601442
},
{
"label": "G",
"value": -13.925743130903
},
{
"label": "H",
"value": -5.1387322875705
}
]
}
];
}
}
If you just want the data to be in a separate file.
create a new file:
your.data.service.ts
in there:
export class YourDataService{
public data: Array<any> = [
{
key: "Cumulative Return",
values: [
{
"label": "A",
"value": -29.765957771107
}]
}]
then import it in the component and reference it
import{YourDataService} from './your.data.service.ts'
public _data: Array<any>= YourDataService.data;