Ember CLI NVD3

An EmberJS NVD3 wrapper

Installation

ember install ember-cli-nvd3

Looking for help?

If it is a bug please open an issue on GitHub.

NVD3 Documentation

Before using this addon, you might want to checkout the NVD3 Docs

Basic Usage

All you need to get started is to specify which type of chart you want and the data it should display

{{nvd3-chart type='lineChart' datum=datum}}

Options

Chart Options

All chart specific options can be specified via the options.chart property.

options: {
    chart: {
      height: 500,
      color: ["#FF0000","#00FF00","#0000FF"]
  }
}

{{nvd3-chart type='lineChart' datum=datum options=options}}

Other Options

All other option can be freely specified under the options object.

options: {
  bars1: {
    groupSpacing: 0.1
  },
  xAxis: {
    tickFormat(d) {
      return d3.time.format('%b %e')(new Date(d));
    }
  },
  yAxis1: {
    tickFormat: d3.format(',s'),
    showMaxMin: false
  },
  tooltip: {
    gravity: 'n',
    headerFormatter(d) { return d + ' monkeys' }
  },
  legend: {
    rightAlign: false,
    vers: 'furious'
  }
}

{{nvd3-chart type='lineChart' datum=datum options=options}}

Dispatch Events

All events you want to dispatch can be specified via the dispatchEvents property. All chart specific events should be defined under the chart property.

dispatchEvents: {
  chart: {
    stateChange(container, chart, e) {
      console.log('State Changed');
    }
  },
  lines: {
    elementClick(container, chart, e) {
      alert(`${e.series.key}: (${e.point.x}, ${e.point.y})`);
    }
  }
}

Initially, the context of each event is set to the chart's targetObject property. This is done so you can interact with your ember object when the event is fired. To override this, you can specify the eventContext manually.

{{nvd3-chart type='lineChart' datum=datum dispatchEvents=dispatchEvents eventContext=parent}}

Helper Actions

Currently there are two helper actions provided:

1. beforeSetup

This is called after the svg container is initially created and before any options is set on the chart.

beforeSetup(svgContainer, chart) {}

// Set the height of the svg container
beforeSetup(svgContainer /*, chart*/) {
  svgContainer.attr({
    height: 500
  });
}

{{nvd3-chart type='lineChart' datum=datum beforeSetup=beforeSetup}}

2. afterSetup

This is called after all chart options and data have been set, as well as after the chart has been created.

afterSetup(svgContainer, chart) {}

// Setup click event on all visible x-axis ticks
afterSetup(svgContainer /*, chart*/) {
  svgContainer.selectAll('g.nv-axis.nv-x text')
    .filter(function() {
          return $(this).css('opacity') === "1";
      })
      .style("pointer-events", "visiblePainted")
        .style("cursor", "pointer")
        .on("click", function(x) {
          alert(`X-Axis: ${x}`);
        });
  }

{{nvd3-chart type='lineChart' datum=datum afterSetup=afterSetup}}

Styling

This addon imports the nvd3 css into your application. To disable that, add the following to your ember-cli-build.js

var app = new EmberApp(defaults, {
  'ember-cli-nvd3': {
    includeCss: false
  }
});

Want to help?

Installation

• git clone this repository
• npm install
• bower install

Running

• ember server
• Visit your app at http://localhost:4200.

Running Tests

• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.