gitter-badger / nvd3 Goto Github PK

This repository is extended from novus/nvd3. Before moving ahead, we highly recommend to go through README.md of novus/nvd3 for usage and learning NVD3.

It has one additional functionality addEvents for showing events by adding a vertical line, which on hover event displays a popup showing event's description on graph. You can read more about why we built this function on our blog.

• d3.js (NVD3 is dependent on d3.js)
• jQuery (addEvents feature requires jQuery)

    nv.utils.addEvents(divId, eventsList, chart);

var events = {
    "x1": "event details for x1",
    "x2": "event details for x2",
    "x3": "event details for x3",
    "x4": "event details for x4"
};

nv.addGraph(function() {
    var chart = nv.models.lineChart()
        .useInteractiveGuideline(true);

    chart.xAxis
        .axisLabel('Time (ms)')
        .tickFormat(d3.format(',r'));

    chart.yAxis
        .axisLabel('Voltage (v)')
        .tickFormat(d3.format('.02f'));

    d3.select('#chart svg')
        .datum(data())
        .transition().duration(500)
        .call(chart);

    nv.utils.windowResize(chart.update);

    // Add events by providing list of events
    nv.utils.addEvents('#chart', events, chart);
    return chart;
});

Checkout the examples/lineChart.html for complete code.

• Remove the jQuery dependency, such that the only library required is d3.js.
• options to change look and feel of vertical line and popups

• How to learn NVD3?

  Checkout NVD3 examples for coding your first chart.

• Why did you not send a PR for extended feature to novus/nvd3?

  Robin Hu (Frontend Software Engineer at Novus Partners) commented on issue #1063 (titled "Extending charts?") that the officially recommended way to extend NVD3 is by forking the NVD3 repo and just adding the functionality we need into the code directly.