I was recently talking with dgsmith80​ in regards to showing the hover over values directly on the bar chart. He was able to get it working, however, as the conversation continued, and more folks joined in, we came to the conclusion we need more SolarWinds specific examples of these charts. As dgsmith80​, KMSigma​, and myself discussed, 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: Pie Chart Edition

This is our endgame here:

Both widgets in the screenshot above use the same HTML and SWQL query, however, I simply did a top 10 for the left one, and top 5 for the right one. This is only intended to act as a simple example.

ESTIMATED TIME TO INSTALL/PERFORM MODIFICATION: <5 Minutes

DIFFICULTY LEVEL: 1-Youngling

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

WHAT DO YOU NEED?

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

STEPS:

     -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 TOP 10\
Events.EventTypeProperties.Name\
,COUNT(*) AS Qty\
,TOSTRING(COUNT(*)) AS Label\
FROM Orion.Events\
WHERE YEAR(TOLOCAL(EventTime)) = YEAR(GETDATE())\
AND MONTH(TOLOCAL(EventTime)) = MONTH(GETDATE())\
AND DAY(TOLOCAL(EventTime)) = DAY(GETDATE())\
GROUP BY Events.EventTypeProperties.Name\
ORDER BY Qty DESC\

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

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

<script type="text/javascript" src="">www.gstatic.com/.../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 chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
}
})
    </script>
<div id="piechart" style="width: 900px; height: 500px;"></div>

In the example above, you will see "piechart" 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 of showing simple table data.

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

And 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

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,

-Will