examples/lineChart.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link href="../build/nv.d3.css" rel="stylesheet" type="text/css">
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
    <script src="../build/nv.d3.js"></script>
    <style>
    text {
        font: 12px sans-serif;
    }
    
    svg {
        display: block;
    }
    
    html,
    body,
    #chart1,
    svg {
        margin: 0px;
        padding: 0px;
        height: 100%;
        width: 100%;
    }
    
    .dashed {
        stroke-dasharray: 5, 5;
    }
    </style>
</head>

<body class='with-3d-shadow with-transitions'>
    <div id="chart1">
    </div>
    <script>
    // Wrapping in nv.addGraph allows for '0 timeout render', stores rendered charts in nv.graphs, and may do more in the future... it's NOT required
    var chart;
    var data;
    var legendPosition = "top",
        events = {
            11: "Event 1: some loream ipsum description",
            40: "Event 2: some other loream ipsum description",
            75: "Event 3: some more event loream ipsum description"
        };

    nv.addGraph(function() {
        chart = nv.models.lineChart()
            .options({
                duration: 300,
                useInteractiveGuideline: true
            });

        // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
        chart.xAxis
            .axisLabel("Time (s)")
            .tickFormat(d3.format(',.1f'))
            .staggerLabels(true);

        chart.yAxis
            .axisLabel('Voltage (v)')
            .tickFormat(function(d) {
                if (d == null) {
                    return 'N/A';
                }
                return d3.format(',.2f')(d);
            });

        data = sinAndCos();

        d3.select('#chart1').append('svg')
            .datum(data)
            .call(chart);

        nv.utils.windowResize(chart.update);
        // addEvents feature added
        nv.utils.addEvents('#chart1', events, chart);

        return chart;
    });

    function sinAndCos() {
        var sin = [],
            sin2 = [],
            cos = [];

        for (var i = 0; i < 100; i++) {
            sin.push({
                x: i,
                y: i % 10 == 5 ? null : Math.sin(i / 10)
            }); //the nulls are to show how defined works
            sin2.push({
                x: i,
                y: Math.sin(i / 5) * 0.4 - 0.25
            });
            cos.push({
                x: i,
                y: .5 * Math.cos(i / 10)
            });
        }

        return [{
            area: true,
            values: sin,
            key: "Sine Wave",
            color: "#ff7f0e",
            strokeWidth: 4,
            classed: 'dashed'
        }, {
            values: cos,
            key: "Cosine Wave",
            color: "#2ca02c"
        }, {
            area: true,
            values: sin2,
            key: "Fill opacity",
            color: "#EF9CFB",
            fillOpacity: .1
        }];
    }
    </script>
</body>

</html>