NVD3.js: ReferenceError: nv is not defined

S

6

7

I am using NVD3.js library to generate graph. I tried adding line chart into it & getting the above error. How to resolve it?

I am trying this here

Symphonic answered 16/4, 2015 at 13:23 Comment(0)

R

3

Can you post a Plunker/Fiddle? Off the top of my head, it may just be where you're including the nv.d3.js. Did you also include D3.js?

Ripon answered 16/4, 2015 at 16:4 Comment(3)

yes. i think i need to add D3.V3.min.js also. i havent seen the home page of NVD3.js website directly went to graph examples where there is no reference for files to be included.....thanks – Symphonic 17/4, 2015 at 5:24

any solution for this? – Ravel 31/10, 2015 at 10:49

You need to make sure D3 is included before using NVD3. d3js.org/d3.v3.min.js – Ripon 1/11, 2015 at 0:23

S

4

Actually i found out, the problem was the folder structure. The examples that comes with the angular-nvd3 website gives path

bower_components/nvd3/nv.d3.js

, check in your bower_components file the actual path would be

bower_components/nvd3/build/nv.d3.js

Similarly the nv.d3.css path is NOT

bower_components/nvd3/nv.d3.css

it is,

bower_components/nvd3/build/nv.d3.css

Also, DON'T forget to add

<meta charset="utf-8">

as the first line inside your head tag..

Sashenka answered 20/1, 2016 at 20:41 Comment(0)

R

3

Can you post a Plunker/Fiddle? Off the top of my head, it may just be where you're including the nv.d3.js. Did you also include D3.js?

Ripon answered 16/4, 2015 at 16:4 Comment(3)

yes. i think i need to add D3.V3.min.js also. i havent seen the home page of NVD3.js website directly went to graph examples where there is no reference for files to be included.....thanks – Symphonic 17/4, 2015 at 5:24

any solution for this? – Ravel 31/10, 2015 at 10:49

You need to make sure D3 is included before using NVD3. d3js.org/d3.v3.min.js – Ripon 1/11, 2015 at 0:23

S

2

I had the similar problem working with ionic2 (based on Angular2).

Although all the necessary libraries were included in the index.html. The problem finaly was that the scripts has to be included before the ionic app is loaded!!!

<!-- These scripts are copied from node_modules-->
  <script src="build/d3.min.js" charset="utf-8"></script>
  <script src="build/nv.d3.min.js"></script>

<!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

Six answered 2/12, 2016 at 10:9 Comment(0)

M

1

Did u include nv.d3.js & d3.js as the sequence of these will also cause issues Try adding d3.js first

Mercola answered 9/11, 2016 at 19:3 Comment(0)

B

1

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.min.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.js"></script>

Add these files in your index.html

Barton answered 28/12, 2017 at 11:50 Comment(2)

Also need to add dependencies in package.json if you have forgotten – Barton 28/12, 2017 at 11:52

While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Computer 28/12, 2017 at 13:55

E

0

If you are using angular 2 or higher version, then

"../node_modules/ng2-nvd3/node_modules/d3/d3.min.js",
"../node_modules/ng2-nvd3/node_modules/nvd3/build/nv.d3.min.js"

Just add above lines under scripts array in .angular-cli.json.

Engine answered 13/3, 2018 at 9:55 Comment(1)

Thanks for giving a easy understanding solution – Latonia 26/12, 2018 at 3:49

Recommended topics

Hot tags