[Solved] ng2-nvd3 what is the correct way to include main component?

Ionic Framework ionic-v3
1

I am including the component main into my own file - list.html, for example. However, the element directive does not do anything.

What is the correct way to include the component and then use the ‘main’ directive?

I have converted the ngOnInit to a constructor and used [attr.options] and [attr.data] with the nvd3 directive. No chart is ever displayed.

2

The @Page that is including the ‘Main’ component needs to include the -

directives: [Main], in addition to the import {Main} from ‘…’

Also, I needed to pull in the d3 and nvd3 from the remote repositories as in the plunkr example. Local module reference is a task for another day.

3

hi, could you please provide some code with ionic2 and nvd3?
cause I have no chart display, importing nvd3 from typings is ok, but my chart remains unshowed / undefined…

4

@mchiba could you please provide me some code with ionic2 and nvd3 aswell?
Im in the same problem as ekoz

5

I was able to successfully implement ng2-nvD3 into my app. Most of the steps mentioned in ng2-nvd3 github site will work except some additional steps to required to get things working. You can look at original sample by the author at plunkr - http://plnkr.co/edit/T4i7Zh?p=preview. I have explained the steps I followed below.

  1. After you create a default ionic2 project (I am using RC0), go ahead and install ng2-nvd3 using npm.
  2. Add the the three script files in index .html - see the plunkr url and see how index.html is coded. What I noticed in my ionic2 project is, if i made these changes in the src folder - index.html, those changes were not copied to the index.html of build folder. I made changes in both the places just to be consistent. Changes to index.html of build folder is what is finally used.
  3. Include nvd3 in the app.modules.ts using import { nvD3 } from ‘…/…/node_modules/ng2-nvd3/lib/ng2-nvd3’;
  4. Add an entry for the nvD3 in the declarations section of the same file. Do not add any entry into imports section.
  5. Then add the regular code in the html template file where you want to show the chart.
  6. In the corresponding ts file add code as per the plunkr code. However, do not add the directive tag in the @Component decorator section.
  7. Now the most important step - you need to navigate to nvd3 source code folder under node-modules. Open ng2-nvd3.ts and change the code that looks like ngOnChanges(){
    this.updateWithOptions(this.options);
    }

to

ngOnChanges(…args: any[]){
this.updateWithOptions(this.options);
}

Observe that I added a parameter to ngOnChanges function.

Thats all, your code for the chart should work now! I have tried this with both line charts and donut charts on Android platforms.

6

hey @srinigk thanks for your describtion.
Unfortunally i end up with

image
Bildschirmfoto 2016-11-03 um 20.34.38.png1124×660 74.1 KB

I dont know why the include process isnt working
am i right that you change the function inside the nvd3 to

nvD3.prototype.ngOnChanges = function (...args: any[]) {
    this.updateWithOptions(this.options);
}

?

And also im adding

<div>
  <nvd3></nvd3>
</div>

to the page1.html inside the ion-content thanks for help
and by the way do you know how to import correctly the d3 and nvd3 js and css into the app ?

7

The error you get is because d3 is not available inside. However, tickFormat is being used for just formatting the output so a workaround is to use the basic javascript function like toFixed. I replaced d3.format(’.02f’) to ‘toFixed’ function. The overall function looks like:

tickFormat: function(d){
return d.toFixed(2);
}

and works as intended. However it is not a replacement function for the format function provided by d3. But I guess you can use some other formatter to get the effect you want. For example, if you returned just a plain string ‘hello’ instead of d.toFoxed(2), the graph would show ‘hello’ at each coordinate.

This is my ionic platform info:

Cordova CLI: 6.3.1
Gulp version: CLI version 3.9.0
Gulp local:
Ionic Framework Version: 2.0.0-rc.2
Ionic CLI Version: 2.1.1
Ionic App Lib Version: 2.1.1
OS: Windows 10 (x64)
Node Version: v6.7.0

Let me know if this helps you.

8

hi @srinigk thanks a lot i finally get an output of the graph.
There are some errors when “ionic serve” it.

image
Bildschirmfoto 2016-11-05 um 12.01.41.png1152×474 56.8 KB

But i think i will handle them. as well as i will finde some replacement for the toFixed method.

9

Hi,
By doing above changes also it is working for ionic serve.
But when i do ‘ionic build android’ it is throwing error:

[17:16:58] Error: Unexpected value ‘nvD3’ declared by the module ‘AppModule’
[17:16:58] ngc failed
[17:16:58] ionic-app-script task: “build”
[17:16:58] Error: Error

npm ERR! Windows_NT 6.1.7601
npm ERR! argv “C:\Program Files\nodejs\node.exe” “C:\Users\gayathri.b\AppD
ata\Roaming\npm\node_modules\npm\bin\npm-cli.js” “run” “ionic:build” "–"
npm ERR! node v6.9.1
npm ERR! npm v4.0.5
npm ERR! code ELIFECYCLE
npm ERR! ionic-hello-world@ ionic:build: ionic-app-scripts build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ionic-hello-world@ ionic:build script ‘ionic-app-scripts
build’.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ionic-hello-world pac
kage,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ionic-app-scripts build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs ionic-hello-world
npm ERR! Or if that isn’t available, you can get their info via:
npm ERR! npm owner ls ionic-hello-world
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! D:\Gayathri\workspace\MobileHtml\npm-debug.log

Please help me

10

This is because, nvd3 is not included in the index.html. It should be included just below the cordova.js include, as per the plunkr url, I mentioned in my post: http://plnkr.co/edit/T4i7Zh?p=preview

<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.4/nv.d3.min.js"></script>

Can you please check?

11

Hi,
I have included 3 files in my index.html.but still it is not building for android platform.

12

Did you check my point 2? I faced this problem too and given below is the workaround.

13

does anyone have a complete example for adding this to an Ionic 2/3 project?

Thanks