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?

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

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/