CODEWITHSUNDEEP
javascriptjsond3.jsnvd3.js
Johnathan
Johnathan

Reputation: 1907

I am trying to reproduce an example with NVD3, but not working

I am new to D3 and NVD3. I am building a webservice in ASP.NET, and I am also trying to reproduce the following stackedArea example with NVD3.js: http://nvd3.org/examples/stackedArea.html

enter image description here

My goal is to make an ajax request with a stored procedure once I get the example working.

I have copied-and-pasted the example code within my code:

<!DOCTYPE html>
<html>
<head>

    <link href="css/nv.d3.css" rel="stylesheet" type="text/css">
    <script src="scripts/d3.min.js" charset="utf-8"></script>
    <script src="scripts/nv.d3.js"></script>

    <style>
        text {
            font: 12px sans-serif;
        }
        svg {
            display: block;
        }
        html, body, #chart, svg {
            margin: 0px;
            padding: 0px;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>

<div id="chart">
    <svg></svg>
</div>

<script>
    d3.json('scripts/stackedAreaData.json', function(data) {
        nv.addGraph(function () {
            var chart = nv.models.stackedAreaChart()
                          .x(function (d) { return d[0] })
                          .y(function (d) { return d[1] })
                          .clipEdge(true)
                          .useInteractiveGuideline(true)
            ;

            chart.xAxis
                .showMaxMin(false)
                .tickFormat(function (d) { return d3.time.format('%x')(new Date(d)) });

            chart.yAxis
                .tickFormat(d3.format(',.2f'));

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

            nv.utils.windowResize(chart.update);

            return chart;
        });
    })
</script>
</body>
</html>

I have also saved the sample json file: http://nvd3.org/examples/stackedAreaData.json (given in the example). However, I have been stuck for quite a while, and it doesn't work. I would greatly appreciate the community's feedback if I am making an obvious mistake. Thank you very much!

Upvotes: 0

Views: 533

Answers (1)

Ismail RBOUH
Ismail RBOUH

Reputation: 10450

First of all, make sure you have the right versions of libraries:

  • d3.v3
  • nv.d3#1.8.1

Secondly, change .datum(d3.read) to .datum(data). According to the D3 v3.x API refrence d3.read does not exist at all !

Here is a working demo: https://jsfiddle.net/w1snyrj4/

Upvotes: 1

Related Questions