Ngx-charts: Need help with Combo Chart.

[khoavn]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[x] support request => Please do not submit support request here

Hi,

In Demo section there is Combo Chart but I can't find it in Documentation. Is there any sample code I can learn how to use it?

Thanks.

[sandangel]

combo chart is for showcase only, not a component. It means "biểu đồ tổng hợp" in vietnamese I guess. ^^

[khoavn]

Yes, I know it's not (yet) a component, what I need is the "showcase" code so I can learn from it, not its name in my language, then when I ask for more detail in my language, you thumbed it down instead showing me where I should dig in. Btw, I'm an C# developer with little knowledge of JS and just learned Angular about 1-2 weeks, so please never mind if I make stupid questions ng or about this project.
Thanks.

[sandangel]

sorry, I did not mean to hurt you but we should use english in public repos which not your own.
you can take a look at the source code of the demo, it just a base ngx-charts-chart component. You can build any chart you want using d3 for complex calculating and angular for rendering it.

https://github.com/swimlane/ngx-charts/blob/master/demo/combo-chart/combo-chart.component.ts

[anishgomez]

Please provide an example for implementing Combo Charts. You have a demo for this. But how to implement this is no where provided in any documentation. Please dont mislead the developers. If you cant provide any doc remove it from your demo.

[marjan-georgiev]

@anishgomez The complete source code of the combo chart is available in the repository. It's even linked right above your comment: https://github.com/swimlane/ngx-charts/tree/master/demo/combo-chart

Also, please stop posting the same comment on every issue. Once is enough.

[anishgomez]

Every issue related to the combo chart have been closed by you by providing the same link. Unfortunately with that link its unable to resolve the issue. I can see the link above my comment. But its not sufficient enough for most of the dev. Can you please provide a simple working example for the same?

[marjan-georgiev]

That is the working example. What are you stuck on?

[anishgomez]

https://swimlane.gitbooks.io/ngx-charts/content/charts/line-chart.html

See this documentation. Its well and clear for line chart. In your documentation i cant even find any implementation for combo chart. I expected an example like the above one.
What are the parameters to be given? How should we format the data?

[marjan-georgiev]

The combo chart is not distributed with the library. It is an example of a custom chart you can build using the components distributed with ngx-charts. Our documentation clearly states that: https://swimlane.gitbooks.io/ngx-charts/content/intro/custom-charts.html

and so do the issues you have been replying to. If you want to use that chart, you need to copy the whole component into your codebase. After you do that, you can use it in your component like this: https://github.com/swimlane/ngx-charts/blob/master/demo/app.component.html#L436

This is the data used in the demo: https://github.com/swimlane/ngx-charts/blob/master/demo/combo-chart-data.ts

If you have any further questions, please use the gitter chatroom.

[anishgomez]

will try this example. Thank you.

[anishgomez]

Hi Marjan.
Thank you. FInally i got it. Sorry for posting the same comment in all threads. But im still getting error on [animation] saying animation isnt a known property. But when i removed that, the error is gone.

[sofialunkes]

Hi @anishgomez , i need some help to build the combo chart too. Could you provide me an working example? If you have one haha. Thanks !

[anishgomez]

Hi @sofialunkes As marjan told, i have downloaded the files he mentioned and tried. Initially it wasn't working. I made some changes and it managed to work. Please download the original files from here.
https://github.com/swimlane/ngx-charts/tree/master/demo/combo-chart

If its showing any error, download the files in which i had made some changes and try it out. Dont know if it will work for you (check the attachment)
combo-chart.zip

In your component just import ComboChartComponent and ComboSeriesVerticalComponent

In your html file paste the 'combchartcomponent' html markup which you can find in this link
https://github.com/swimlane/ngx-charts/blob/master/demo/app.component.html#L436

replace the view, scheme, results, line charts etc with your data
Try it out and let me know if it works.
Sorry for bad english

[Buggyy]

Hi @anishgomez Thanks for pointing me out to the right direction, I got pretty far with your instructions. But right now I am stuck with this error in compuler.umd.js see here https://create-vbr1q1.stackblitz.io

Any Ideas on going further?

Editors preview can be found here: https://stackblitz.com/edit/create-vbr1q1?embed=1&file=app/app.component.ts&view=preview

[gabrielloye]

If anyone comes across this post while trying to find out how to use the custom charts, I've posted a short guide on how to use the bar/line combo chart from their demos here:
(https://gist.github.com/gabrielloye/67921cda6139ba1806920da2a7e2fcb2)
The link to the StackBlitz example:
https://stackblitz.com/edit/ngx-charts-combo-chart

[rsimpson2]

@gabrielloye your stackblitz example does not work. I am looking at it in Firefox and it starts to show then it goes to a flat line.

[AaronLavers]

If anyone comes across this post while trying to find out how to use the custom charts, I've posted a short guide on how to use the bar/line combo chart from their demos here:
(https://gist.github.com/gabrielloye/67921cda6139ba1806920da2a7e2fcb2)
The link to the StackBlitz example:
https://stackblitz.com/edit/ngx-charts-combo-chart

Anyone searching for how to use the combo charts, this is the solution you need. Took a couple of minutes to set up and get working, it should really be part of the ngx-charts documentation.

Thanks for that!!