The Now Platform® Washington DC release is live. Watch now!

Help
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 

using chartjs or highcharts in widget

Go to solution
yundlu316
Kilo Guru

‎04-13-2017 03:21 PM

Hi Experts, I am building a widget and would like to include a donut chart in it.   I know that there is a chartjs widget in ServiceNow share that I could use and embed within my widget, but I need more flexibility than the reports that SN provides.   I am attempting to either use chartjs or highcharts to produce my chart, but am unable to get anything to work.   Has anyone coded a custom chart in a widget before?   I've included all the necessary CDN libraries in <head>, but can't seem to get any of the sample codes I copied/pasted from the sites to render.  

Any thoughts?

0 Helpfuls
  • 2,805 Views
1 ACCEPTED SOLUTION

Go to solution
tltoulson
Tera Guru
Tera Guru
In response to yundlu316

‎04-13-2017 04:12 PM

I aim for one article a week and I have one other one I'm trying to get out before I tackle the HighChart series... so it might be a while .   I'll tell you what, though, I have some experimental code in my dev instance on this.   If you send me your email (feel free to use the forms on my blog if you don't want to publicly post) I will try to package up this widget I've got so far and send it to you with some of the notes I've compiled for the blog articles.   That way you can get started!


View solution in original post

5 REPLIES 5

Go to solution
ashwinkumar_pat
Giga Expert

‎04-13-2017 03:23 PM

Hi David,



Is highcharts an external javascript library?


0 Helpfuls

Go to solution
tltoulson
Tera Guru
Tera Guru

‎04-13-2017 03:28 PM

Hi David,



I actually have a 4 part series on a HighCharts Service Portal Widget coming up on my blog.   Sadly, not out yet but here's the gist:



- ServiceNow's native HighCharts library collides with Service Portal's jQuery... it works but there are some issues


- You need to create a Dependency record for the Widget and attach the library of your choice into the JS Dependencies


- You can only put the HighCharts initialization in the Client Script if you are using a static ID


- If you are using ng-attr-id or other DOM selection method, you need to put the HighCharts initialization in the Link function



Other than these caveats, I found HighCharts very easy to enable in Service Portal.


Go to solution
yundlu316
Kilo Guru
In response to tltoulson

‎04-13-2017 03:56 PM

Thanks Travis!   When do you think those posts will be available?


0 Helpfuls

Go to solution
tltoulson
Tera Guru
Tera Guru
In response to yundlu316

‎04-13-2017 04:12 PM

I aim for one article a week and I have one other one I'm trying to get out before I tackle the HighChart series... so it might be a while .   I'll tell you what, though, I have some experimental code in my dev instance on this.   If you send me your email (feel free to use the forms on my blog if you don't want to publicly post) I will try to package up this widget I've got so far and send it to you with some of the notes I've compiled for the blog articles.   That way you can get started!