How to add a pie chart to a widget?

JDX7913 · ‎07-31-2018

I need help on how to add a pie chart to one of my widget. I am look for something similar to this one on Google's dev site.

This is the code that Google has:

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

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

The problem that I am running into is that how do I take the above and convert it so that it will fit ServiceNow's Server script/ HTML Template?

Upender Kumar · ‎08-02-2018

Hi,

https://community.servicenow.com/community?id=community_article&sys_id=1244d99cdb4d1bc05322f4621f9619ba

This example contains column chart. You can change to "pie"

Hope this will help you.

View solution in original post

SanjivMeher · ‎07-31-2018

You can just copy the whole HTML code to the HTML section of the widget. And then you may need to add some Angular Providers to use the google functions

Please mark this response as correct or helpful if it assisted you with your question.

JDX7913 · ‎08-02-2018

How would I included "https://www.gstatic.com/charts/loader.js" in my JavaScript?

Upender Kumar · ‎08-02-2018

Hi,

https://community.servicenow.com/community?id=community_article&sys_id=1244d99cdb4d1bc05322f4621f9619ba

This example contains column chart. You can change to "pie"

Hope this will help you.