Showing results for 
Search instead for 
Did you mean: 
Create Post

How-To: Insert Google Charts (Table Data) within Custom HTML

Here is another example of how to integrate Google Charts into your SolarWinds environment, using an HTML widget, and a SWQL query.



Please take this, adapt it to your environment, and share what you did back with THWACK.

If you follow the links throughout this post, as well as the links you will find on the previous posts, you will see each example came from someone before. Please consider posting back your results for others to see. I bet you we can build a nice little library of examples with all the feedback.



How-To Insert Google Charts Within Custom HTML: Table Data Edition


This is our endgame here:

GoogleChartExamples - TableCharts_20190522_0937.png

The widget in the screenshot above use a "Custom HTML" widget, and the HTML has a SWQL query within it. This is only intended to act as a simple example.





  1. Youngling(Easiest/Most Basic; no coding experience required, no config wizard required, no system restart required, no system downtime.)
  2. Padawan (Easy/Basic; no coding experience required, possible config wizard required, possible system/services restart required, limited/no downtime.)
  3. Jedi Knight (Moderately Difficult/Advanced; some coding experience required/recommended, config wizard required, possible system/services restart required, limited/short duration downtime.)
  4. Jedi Master (Most Difficult/Advanced; advanced coding experience required, config wizard required, system/services restarts required, 30+ minutes downtime/maintenance window recommended, and other things that I do not even know I would need to know, required...)




This mod was performed on the following SolarWinds environment/versions: (It may, or may not work on other versions)

Orion Platform 2018.4 HF3, SCM 1.1.0, NCM 7.9, NPM 12.4, DPAIM 11.1.1, VMAN 8.4.0, SAM 6.8.0, NetPath 1.1.4




  1. Access to manage views in your Orion environment
  2. The "Custom HTML" resource added to a view
  3. A working method to copy text from the attached file
  4. A working method to paste text, copied in #3 above, into a custom HTML resource, from #2 above.



Before we begin, (while the following is certainly a good practice, it actually doesn't apply to this customization, for once.)


PLEASE don't edit the system files/database without backing them up first.

If you see a friend or co-worker making changes without backing up first, please alert the authorities.

Friends don't let friends mod without backups.



"If it's not broke, then fix it until it is."

     -The smartest person ever




     -Download/Open the attached file.

     -Login to you Orion environment.

          -Navigate to the "Custom HTML" resource you want to display the calendar.

               -Click edit.

     -Copy the contents of the attached file.

     -Paste the contents of the attached file into the "Custom HTML" resource you have opened to edit.

     -Click to save the resource edit.

     -Enjoy you new calendar view.




The SWQL Query:


SELECT TOLOCAL(EventTime) AS EventTime\
FROM Orion.Events\
AND Events.EventTypeProperties.Name NOT IN ('Interface Changed','Interface Disappeared','Interface Reappeared')\
AND Message NOT LIKE 'Read or write latency on virtual %'\
AND Message NOT LIKE '%virtual%'\
GROUP BY EventTime, Events.EventTypeProperties.Name, Message\


Notice the \ character at the end of each line. This allows me to break the SWQL query down to multiple rows. If you choose to keep the query on a single line, then you will not need to use the \ character. Also note, if you copy this query into SWQL studio without removing the \ characters, it will not process correctly.






The very first line of the HTML should only exist 1 time per page.

<script type="text/javascript" src=""></script>

If you are adding multiple Google Charts on the same page, you will need to remove the line shown above from all except the first chart/widget.


Additionally, you will need to rename the div id on each additional chart.

var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, options);
    <div id="table_div"></div>


In the example above, you will see "table_div" is the name of the div, and it is referenced 2 times. Both occurrences should match each other for each chart. If you use the same div id on multiple charts, on the same page, you may only see 1 chart actually load.






Links To Other Goodness:


Here is a link to the first example, which dgsmith80​ shows the hover over values directly on the bar chart.

How-To: Insert Google Charts within Custom HTML


Here is a link to the first version of our Google Charts examples, which is a calendar with dynamic pie charts and table data.

Using Your Custom HTML Resource To Properly Display SWQL Query Results


Here is an example from jhaas​, showing how to track outages on a Calendar and dynamic Timeline chart.

Interactive Node Outage tracker


Here is an example of just the Timeline chart.

Using Your Custom HTML Resource To View Events On A Timeline


Here is an example from elevate​​, showing how to do a Google Pie chart.

(This post was actually done a while back, far before the post I'm making now. I must have missed it in my bookmarks, otherwise I would have skipped this example, as elevate​'s example is already great!)

Google Charts | Pie Charts


Here is another example of a Google Pie chart.

How-To: Insert Google Charts (Pie Chart) within Custom HTML




For more ways to customize your SolarWinds environment, make sure to check out this link, by CourtesyIT

How to do various customizations with your Solarwinds



Thank you,





Labels (2)

Hi wluther​,

Is there any way to have bar chart?


msarkar​ Yes, actually there is. Check out this post, by dgsmith80​, where he shows you how to do the bar chart version of this.
How-To: Insert Google Charts within Custom HTML


Let us know how it goes.

Thank you,


Version history
Revision #:
2 of 2
Last update:
‎06-15-2020 03:26 PM
Updated by: