How-To: Insert Google Charts (Pie Chart) within Custom HTML
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
Youngling(Easiest/Most Basic; no coding experience required, no config wizard required, no system restart required, no system downtime.)
Padawan (Easy/Basic; no coding experience required, possible config wizard required, possible system/services restart required, limited/no downtime.)
Jedi Knight (Moderately Difficult/Advanced; some coding experience required/recommended, config wizard required, possible system/services restart required, limited/short duration downtime.)
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)
A working method to copy text from the attached file
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.
-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 very first line of the HTML should only exist 1 time per page.
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.
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!)
SolarWinds solutions are rooted in our deep connection to our user base in the THWACK® online community.
More than 150,000 members are here to solve problems, share technology and best practices, and directly
contribute to our product development process.
Learn more today by joining now.