How to use chartjs code in a widget

davidwilhelm-in
Giga Contributor

‎10-30-2017 09:31 AM

The following code works in plunker. I am new to servicenow widget development and Angular js development. I feel I just need to get started.

Can someone show me how the below code should be converted to work in a ServiceNow widget please?

html:

<!DOCTYPE html>

<html>

  <head>

      <script>https://code.angularjs.org/1.4.8/angular.js"></script>

      <script>https://code.angularjs.org/1.4.8/angular-resource.js"></script>

      <script>https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>

      <script>https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/0.10.2/angular-chart.js"></script>

      <link rel="stylesheet" href="style.css" />

      <script></script>

  </head>

  <body ng-app="app">

      <h1>Charts</h1>

      <div ng-controller="DemoController">

          <canvas id="pie" class="chart chart-pie" chart-data="data" chart-labels="labels"></canvas>

      </div>

  </body>

</html>

Script:

(function(){

angular.module("app", ["chart.js"]);

angular.module("app").controller("DemoController", DemoController);

function DemoController ($scope) {

  $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];

  $scope.data = [300, 500, 100];

}  

})();

Thank you!

Labels:
0 Helpfuls
  • 5,094 Views
4 REPLIES 4

a_simaitis
Kilo Contributor

‎12-14-2017 06:02 AM

1. Create empty widget.


2. Open widget editor.


3. To html side copy:


        <canvas id="pie" class="chart chart-pie" chart-data="data" chart-labels="labels"></canvas>


4. Your client side code should look like this:



function($scope) {


  /* widget controller */


  var c = this;


  $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];


  $scope.data = [300, 500, 100];


}



5. Enable preview, and turn it on.



If you want to understand more, I recommend you to go through serviceNow tutorial named "Creating Custom widgets".



0 Helpfuls

LucileC
Tera Expert
In response to a_simaitis

‎05-27-2020 02:13 AM

Hello do you know how to add some options to it as stepsize for the YAxe ?

0 Helpfuls

lasse3
Mega Guru

‎08-10-2018 02:03 AM

Hi David,

Did you get this to work?

/Lasse

0 Helpfuls

Matt White
Kilo Explorer

‎08-19-2020 01:34 PM

Not sure if this has ever been answered, but make sure that if you are opening your widget in the Editor (3 panel page) that you also open the widget in the platform and go to the Dependencies related list at the bottom. Select edit and move chart.js over to the right side and save. Widgets by default don't have chart.js as a dependency.

0 Helpfuls