CODEWITHSUNDEEP
javascriptd3.js
Tufan Ugurel
Tufan Ugurel

Reputation: 13

D3 chart implementation error

I'm having a problem with a D3 chart. The data won't load, and the console gives an error

"(index):54 Uncaught TypeError: nv.addGraph is not a function(…)".

<!DOCTYPE html>


<meta charset="utf-8">
<title>Doodsoorzaak door huidkanker </title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>

<!--  <link href="css/d3.min.css" rel="stylesheet" type="text/css"> -->
<link rel="stylesheet" href="css/colors.css" />
<link rel="stylesheet" href="css/height.css" />
<link rel="stylesheet" href="css/cssstyles.css" />

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

</head>

<body>
    <container>
    </ul>
        <header>
            <nav class="col-xs-12 h300" class="navbar navbar-default navbar-inverse" role="navigation">
                <div class="container-fluid">
                    <center><img id="logo" src="img/Logo.png" width="auto" height="auto" /></center>            
                        <ul id="menu">
                        <center> <h4> De laatste jaren is het aantal sterfte gevallen door huidkanker toegenomen. Vooral 60-plussers sterven het vaakst door huidkanker.</h4> </center>
                        </ul>

                </div>
            </nav>
        </header>
        <body>

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

            <script type="text/javascript">
nv.addGraph(function() {
  var chart = nv.models.discreteBarChart()
      .x(function(d) { return d.label })    //Specify the data accessors.
      .y(function(d) { return d.value })
      .staggerLabels(true)    //Too many bars and not enough room? Try staggering labels.
      .tooltips(false)        //Don't show tooltips
      .showValues(true)       //...instead, show the bar value right on top of each bar.
      .transitionDuration(350)
      ;

  d3.select('#chart svg')
      .datum(exampleData())
      .call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
});

//Each bar represents a single discrete quantity.
function exampleData() {
 return  [ 
    {
      key: "Cumulative Return",
      values: [
        { 
          "label" : "Infectieuze en parasitaire ziekten" ,
          "value" : 3104
        } , 
        { 
          "label" : "Ziekten van hart en vaatstelsel" , 
          "value" : 37862
        } , 
        { 
          "label" : "Uitwendige oorzaken v. ziekte en sterfte" , 
          "value" : 6813
        } 
      ]
    }
  ]

}



        </script>


        </body>         

        <footer>
            <section class="col-xs-12 h100">
                <center>
                    <p>
                        <br><br>
                            Copyright Tufan Ugurel
                    </p>
                </center>
            </section>
        <footer>
    </container>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

    <script href="js/d3.min.js"></script>

This is the demo where I got the code from: http://nvd3.org/examples/discreteBar.html

I hope it's not a stupid thing! Thanks for helping

Upvotes: 1

Views: 75

Answers (1)

shreman
shreman

Reputation: 26

It seems your referencing NVD3 but only declaring D3. You need to include both on top if you're using NVD3, which is a package on top of D3.

Upvotes: 1

Related Questions