What is the recommended way to display simple line and bar graphs in a self made widget?

[xstaffelbach]

I am making a widget that will display some pie & bar graphs concerning some very simple data that I send to serviceNOW via the server side script in the widget.

I want my client side script to take the data, like:

{

• Operating Systems: {}
  • aix: 45,
  • ios: 4,
  • linux: 57,
  • solaris: 15,
  • unix: 52,
  • windows: 140

}

And make a simple pie chart. I already have serviceNOW receiving this data and the client side script can access it.

I see that I can make a simple HTML JS pie chart like here: https://stackoverflow.com/questions/6995797/html5-canvas-pie-chart  

But I am hoping that there is a better built in way of doing this. I have seen that ServiceNOW has reporting, but adding this to a widget and having it work with personalized Jsons as opposed to glider objects is not a functionality that I have seen.

END GOAL FOR CONTEXT: I am going to have the widget pull about 10 differing small Json's from my server. Then the widget will have a drop down menu with a list of all the titles of the Jsons like "Operating Systems". When the user clicks on a title the space below the dropdown will fill with the respective chart.

[larstange · Accepted solution]

Hi

I would recommend using angular-chart.js - beautiful, reactive, responsive charts for Angular.JS using Chart.js

Import it as a Portal Dependency library and add it to your widget. Then you can generate graphs with almost no code

[davidwilhelm-in]

Hi Lars,

I can't get the chartjs code to work for me. The only thing I did different was not import the library but use the CDN. Any idea why the graph won't display for me?

HTML template:

<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>

<div>

  Test

  <canvas id="bar" class="chart chart-bar"

                  chart-data="data" chart-labels="c.labels" chart-series="c.series">

  </canvas>

</div

Client Script:

function($scope) {

var c = this;

c.lables = ['2006','2007','2008','2009','2010','2011','2012'];

c.series = ['Series A', 'Series B'];

c.data = [

[65, 59,80,81,56,55,40],

[28, 48,40,19,86,27,90]

];

}

[larstange]

Use the service portals dependency functionality instead - that will work every time. I'm not sure your approach is supported.

[davidwilhelm-in]

I tried adding these dependencies and the bar chart still does not display.

I went to the link you provided and took the guts out of the two .js files and put them in script includes. I then added those as js dependencies. No luck.

I then tried two url dependencies using the below url's. No luck again. It looks like the bar is there since test is not at the top of the display, yet no bars or graph of any kind.

https://cdnjs.cloudflare.com/ajax/libs/angular-charts/0.2.7/angular-charts.js

https://cdnjs.cloudflare.com/ajax/libs/angular-charts/0.2.7/angular-charts.min.js