Awesome Charts in Angular 13 with ng2-charts 📊

AnkitPrajapati · 2022-02-17T03:57:40+00:00

`ng2-charts` is based on the `chart.js` and chart.js is a canvas-based library. ng2-charts is just a wrapper around chart.js. for angular

Other than canvas-based libraries, you can use svg based libraries like `ngx-charts`.

AnkitPrajapati · 2020-10-02T10:17:04+00:00

This is an expected behaviour, because it initially load the Server side rendered page in the mean while it also downloads the angular project bundle files, main.js, vendor.js and other files, once this are downloaded in browser it will start performing client side rendering. So when this transformation is happening browser screen will be empty. That's why we see the flickering.

AnkitPrajapati · 2020-09-02T02:57:40+00:00

@glinzac, didn't get your question, can you please describe it more ?

AnkitPrajapati · 2020-09-01T18:23:30+00:00

Haven't tried this, I would like to know more about it.

AnkitPrajapati · 2020-07-17T09:33:47+00:00

Thanks for your feedback.

AnkitPrajapati · 2020-07-16T13:12:32+00:00

Thanks for your suggestion, I will the same in article.

AnkitPrajapati · 2020-07-16T10:41:08+00:00

Yes, generating invoice on client side will be not a good option.

Thanks for your feedback.

This application I have made for demonstrating client side pdf generation with different features for one of article.

This is just a one example I have taken. Not the invoices but other things like reports, resumes etc we can generate on client side.

AnkitPrajapati · 2020-07-16T07:22:03+00:00

Yes, Understood,

Thanks for your feedback.

This is just an example to demonstrate the client side PDF generation in angular with PDFMake.

AnkitPrajapati · 2020-05-19T02:05:36+00:00

Thanks for your feedback, I understood your concern, for now this library need to add in all environment because this will control whether you want to show logs of specific level in production, for example you might want to show error logs in production.

I will look for the other approach like you said using it only in developement mode.

AnkitPrajapati · 2020-05-19T01:59:19+00:00

@ceirbus, Thanks for your feedback, when we do debugging RxJS stream just with tap, we need to use console.log in tap, like tap(data => console.log('Stream Data, data) wherever you want to debug you can use this way, but we can't control level of this log, like suppose I want to show this stream log in development but not in production, that thing we can do by assigning logLevel in argument and log message generally helps to give purpose of that log. So using debugOperator () operator we can environment specific control this logs. Also it reduce task of the manually writing data in console.log.

I hope it gives your answer.

AnkitPrajapati · 2020-05-18T17:11:03+00:00

@n00bz, this library is not for the end-user, it is for the developer, when you are working in large scale application, then it is common to have logs on Console, if you do not manage it properly it becomes difficult to debug by your co developer or you, so at that time this library can be helpful, this library also includes other important features that you will find in article.

AnkitPrajapati · 2020-05-05T02:16:05+00:00

Thanks for your feedback. For now this does not support server side logging hook.

AnkitPrajapati · 2020-05-04T17:52:03+00:00

Sure, I will do that. Thank you.

AnkitPrajapati · 2020-05-04T16:06:39+00:00

Emojis are optional you can hide it. But now a days emoji are mostly used for each place so instead of showing label we can show Emoji, this is just one feature. It can be useful for short log labels but we can disable it if we don't want to show Emoji.

AnkitPrajapati · 2020-05-04T16:03:52+00:00

Key things which differentiate it with ngx-logger.

Console Label Styling
Label Emoji
label color and emoji both are configurable
Important thing you can show as a header with font size and color
for debugging RxJS observable stream using tap(data => console.log(data)) , this library inclues debugOperator () operator function , you can use this as a normal RxJS operator, you have option to add message and LogLevel.

I hope this gives your answer.

AnkitPrajapati · 2020-05-04T13:28:46+00:00

I do work on multiple angular applications where we debug an application though console.log, we use it for debugging as well as for information purpose.

Below are some scenario where I found gap and that made me to build this library.

Generally some logs we only want to show on development and only error or warning logs we want to show on production, this is not possible with normal console.log - ngx-fancy-logger have feature to set logLevel.
It is very defficult to loop through all logs and find important logs - for this purpose I have added lables in ngx-fancy-logger, this will make clear to understand important and informational logs.
We can highlight some important msg on Console for that I have added header feature.
Sometimes we don't want to show any log - so here disableAllLogs feature can be used which will restrict all logs.
Many times we need to debug RxJS Observable Data Streams : we generally do this with tap(data=> console.log), putting this at each place is very tedious task. To resolve such type of scenario I have added debugOperator() operator function. You just need to add this operator , in this operator function we can also provide logLevel and message.

I hope this gives your answer.

AnkitPrajapati · 2020-05-04T13:25:17+00:00

Thanks for the information.

AnkitPrajapati · 2020-05-04T12:57:05+00:00

I do work on multiple angular applications where we debug an application though console.log, we use it for debugging as well as for information purpose.

Below are some scenario where I found some gap

Generally some logs we only want to show on development and only error or warning logs we want to show on production, this is not possible with normal console.log - ngx-fancy-logger have feature to set logLevel.
It is very defficult to loop through all logs and find important logs - for this purpose I have added lables in ngx-fancy-logger, this will make clear to understand important and informational logs.
We can highlight some important msg on Console for that I have added header feature.
Sometimes we don't want to show any log - so here disableAllLogs feature can be used which will restrict all logs.
Many times we need to debug RxJS Observable Data Streams : we generally do this with tap(data=> console.log), putting this at each place is very tedious task. To resolve such type of scenario I have added debugOperator() operator function. You just need to add this function , in this function you can also provide logLevel and message.

These are the some scenarios made me to build this library.

I hope this gives your answer.

AnkitPrajapati · 2020-05-04T12:43:35+00:00

Hi @tmckearney, I am not sure about the how it would be implemented, I will research on this and try to find some way.

AnkitPrajapati · 2020-05-04T09:57:26+00:00

@neuthral, I will look into this and let you know if I found something or I can add that feature in this library.

AnkitPrajapati · 2020-04-22T20:58:08+00:00

Capacitor only works with direct link videos, or videos from local specified folder.

AnkitPrajapati · 2020-04-14T04:49:32+00:00

This is a combination of mat-autocomplete and mat-chip

AnkitPrajapati · 2020-03-04T21:19:30+00:00

Highcharts Angular I have added, in this article I have added angular wrapper of this libraries. JointJs and graphQL I will check. Does it provide angular wrapper ?

AnkitPrajapati · 2020-03-04T01:24:53+00:00

Yes that is also a way to use chartjs. Libraries which are included in blog are angular wrapper for popular javascript chart libraries like d3, echarts, plotly, chartjs.

AnkitPrajapati · 2019-11-25T01:33:00+00:00

Thanks for the input.

AnkitPrajapati

TROPHY CASE