Reference .json file for external dataset in ng2-nvd3

Question

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

}

Do you want to load the file at runtime with HTTP, or is it always static and you just want to move it to another file to keep this component small? — James Stewart, May 10 '16 at 05:04
@James Stewart, how can one handle the load file at runtime with http. That is what I want . — kplus, Nov 20 '16 at 08:09

KB_ · Accepted Answer · 2016-05-10T06:18:44.390

0

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;

edited May 10 '16 at 06:18

answered May 09 '16 at 21:09

KB_

2,113
2
26
28

please can you help answer this question : http://stackoverflow.com/questions/40709470/how-to-use-dynamic-csv-data-for-visualisation-with-nvd3-and-angular2 – kplus Nov 21 '16 at 08:47

Reference .json file for external dataset in ng2-nvd3

1 Answers1