Adding Google Chart Library In JHipster Angular Application

Question

I am using google charts in my JHipster angular 7 application.

Added below script tags in index.html to load google chart visualization libraries

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', { packages: ['corechart'] });
</script>

Charts are working fine but my application getting slow through the time.

If I move mouse in browser, browsers CPU usage hitting high(100%), this was causing browser hanging, slow respose and etc.,.

If I comment charts div there is no such kind of issue.

Is there any other solution for this like loading scripts via webpack?

Aileenailene

google chart is vanila JS. It has no dependency to Jhipster or Angular. Would you provided what is your code and data like? – Matrona

Answer 1

you can use google charts CDN directly:

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>

The above link is for Bar Charts, you can select your own.

The Data Should be like this:

function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Here is The jsfiddle.

Find More about google charts from this link

Doherty

My problem is not presenting charts, after presenting charts browser getting slow in performance – Aileenailene

do you have a large data that should be represented on charts? – Doherty

No, my data size not morethan 10 records – Aileenailene

Answer 2

I would recommend you not use a loader if possible. Loaders can be slow and costly on builds/bundles.

Instead, see if you can get away with a CDN approach instead:

• https://www.npmjs.com/package/webpack-cdn-inject

• https://unpkg.com/browse/[email protected]/dist/

Soult

Above URLs helping me to load CDNs, but my actual problem application getting slow through the time still there. If I comment charts div there is no such kind of issue – Aileenailene

Answer 3

It isn't a good practise to:

• inject lib directly into index.html
• use libraries that are not adjusted to Angular application. It seems that the library in this form doesn't cooperate well with your Angular application.

Try instead use one of Angular chart package, like: https://github.com/FERNman/angular-google-charts

It has been rewritten to Angular components, so it should work fine with Angular application. Sample use:

<google-chart [data]="myData"></google-chart>

Maybe if you use library based on Angular components then you won't experience performance issues.

Acidimetry