jsond3.jsangularng2-nvd3

Reference .json file for external dataset in ng2-nvd3


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
          }
        ]
      }
    ];
  }

}

Solution

  • 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;