How-To: Insert Google Charts within Custom HTML

So a member of my team was working on a customer request where they wanted the default 'Network Wide Availability Chart' to show the values plotted on the chart so that when it was exported to PDF for management presentations they could see the actual numbers. Now, this isn't something SolarWinds is able to do out of the box. So we had to think "outside the box". After a quick chat with a fellow MVP wluther​ we came to the conclusion we could use Google Charts to accomplish this.

The end result should look something like this:

Multiple Charts Per Widget:

Multiple Widgets Per Page

If you too would like to be able to have something similar to this then I have some good news for you, adding this to your own platform is pretty simple. Here is how:

This mod was performed on Orion Platform 2018.4 HF3, NPM12.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 one of the attached files
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.

     STEPS:

     -Download/Open the attached file.

     -Log in to your 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 your new Availability dashboard.

** If you decide to use the 2 individual widget charts and you want them on the same page, you need to remove Line 3 (Below) from any additional widgets after the first one (You only need it once per page).

<SCRIPT TYPE="text/javascript" src="">www.gstatic.com/.../SCRIPT>

This is in essence, just a simple Vertical Bar Chart using an SWQL Source to populate the data. If you want to present different data then just go ahead and update the query, and the chart should reflect it too. The query I used was situational, and could easily be updated to add filters or provide additional or totally different data. The two queries I used are as follows:

SELECT
 SUBSTRING(TOSTRING(DATETRUNC('Day',DATETIME)),0,8) AS [Day]
,ROUND(AVG(Availability),2) AS [Average]
,TOSTRING(ROUND(AVG(Availability),0)) AS [Label]
,CASE WHEN AVG(Availability) <= 85 THEN 'Red' WHEN AVG(Availability) < 90 THEN 'Yellow' ELSE 'Green' END AS [State]
    FROM Orion.ResponseTime WHERE (MONTHDIFF(DATETIME,(GETUTCDATE()))=1)
    GROUP BY DATETRUNC('DAY',DATETIME) ORDER BY [Day]

AND

SELECT
 CONCAT(SUBSTRING(TOSTRING(DATETRUNC('MONTH',DATETIME)),1,4),SUBSTRING(TOSTRING(DATETRUNC('MONTH',DATETIME)),8,4)) AS [Month]
,ROUND(AVG(Availability),2) AS [Average], TOSTRING(ROUND(AVG(Availability),2)) AS [Label]
,CASE WHEN AVG(Availability) <= 85 THEN 'Red' WHEN AVG(Availability) < 90 THEN 'Yellow' ELSE 'Green' END AS [State]
    FROM Orion.ResponseTime WHERE (YEARDIFF(DATETIME,(GETUTCDATE()))=0)
    GROUP BY DATETRUNC('MONTH',DATETIME) ORDER BY DATETRUNC('MONTH',DATETIME) ASC

SELECT

Again I would like to say a massive thank you to wluther​ for working on this for me, and also KMSigma​ for dropping a small bombshell on us both to help with a small change that can make a large improvement - This was how to enable multiple widgets to load on a single view. Not to mention of course the entire MVP Crew for supporting a new MVP like me

LINKS TO OTHER GOODNESS:

Here are a few links to other related posts that contain similar work which will hopefully help inspire you as they did me:

Here are various examples from wluther​

The very first version of 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 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​

Here is an example of a Google Pie chart. How-To: Insert Google Charts (Pie Chart) within Custom HTML

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 from elevate, showing how to do a Google Pie chart. 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

-David