Using Your Custom HTML Resource To View Events On A Timeline

Well, here we are, again, with another example of how we can view the same old boring data via a SWQL query and a little bit of JavaScript.

Previously, I posted an example of how to build an events calendar, which would populate some pie charts once you clicked a date on the calendar. Using Your Custom HTML Resource To Properly Display SWQL Query Results

Then, there was the post showing how to rebuild the manage views page, making it easier to navigate and manage your various viewgroups. Using Your Custom HTML Resource To Build A Better Way To Navigate Your Custom Views

Now, if all goes well, this post should show you an example of how you can view your events across a timeline. While this will work for any event with a start and end time, I am going to specifically use the NCM Scheduled Jobs for the example data.

More information on the timeline being used in this example can be found here: Charts   |  Google Developers

Just the same as previous versions of similar tools, mblackburn​​ has done most of the legwork to get a fairly decent template built out, allowing me to "plug and play" this code to display our data in different ways.



  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.2 HF6, SCM 1.0, NCM 7.8, NPM 12.3, DPAIM 11.1.0, VMAN 8.3.0, SAM 6.7.0, NetPath 1.1.3 Copyright 1999-2018 SolarWinds Worldwide, LLC. All Rights Reserved.


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

Basically, you should only need to open the attached file (JS_Timeline-003.txt) in a text editor, copy the contents, and paste them into the "Custom HTML Resource" on one of your views within your SolarWinds environment.

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

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

In The Beginning:

As with most things, we need to start somewhere. That somewhere is the default NCM "Jobs List" page. (/Orion/NCM/Resources/Jobs/JobsList.aspx)

Here is what our example data looks like in its default form. Pretty simple.


While there are many things I would like to see on this page (better/static filtering, independent "Last Date Start", "Current Duration", "Min Duration", "Max Duration", and "Avg Duration" columns, as well as a handful of other basic/standard data to assist with the overall system management), this post is really only going to focus on the basic DAILY view.

I say DAILY as this method is fairly simplistic, and is NOT very good at accommodating for anything out of the ordinary. In other words, if you are manually starting/stopping your NCM jobs, then you might see some odd looking data on the timeline. As far as I can tell, there is not an easy way to pull the basic data. For instance, I would consider the start time, end time, and next start time to exist for easy consumption. In reality, however, we only have easy access to end time, which is actually labeled as "LastDateRun", and the next start time, which is labeled as "NextDateRunUtc". Unfortunately, all of the job schedule data is stored in an XML formatted column of the Cirrus.NCM_NCMJobsView table, which I do not know how to easily access and parse within the scope of this example.

Having said that, we should still be able to get the previous start time, by manipulating the next start time and previous end time with a few date thingies, a couple of number thingies, and a pinch of "I hope nothing changes"... Needless to say, I think this should work for the most part, but just know there may be issues with displaying some data, depending on some wonky date calculations.

Okay, let's get back on track here...

The SWQL Query: (Without the JavaScript)

Before we get into the JavaScript, let's make sure we are able to see the data we want/expect to see. We already know what the default jobs list page shows us, so we are going to build this query to show us the important data, and get rid of everything else.

The full SWQL Query can be found at the following link: (SWQL Query To Display Basic NCM Scheduled Job Stats (Job Start, End, Duration, Next Start))

Here is what the results of our SWQL query would look like:

Nothing fancy, but we can clearly see all of the enabled jobs (and none of the jobs which are disabled), when each job started (or so we think... this is where the magic calculations begin), when each job ended, how long each job ran to complete, and a brief summary of when each job will again. Being that the query depends on the difference between the next run date and last end date, manually running the job would alter that time frame, which would produce incorrect data. (A problem to solve at another time?)

The JavaScript:

Now that we are able to see the data we need, we can dump it into some JavaScript stuff, and hopefully produce a decent looking timeline.

Again, this timeline is NOT perfect... at all... but it should provide a decent way to visualize which jobs are taking long, or which are overlapping with other jobs.


A few things to note:

  • The 2 jobs on the far left of the screenshot only run once per week. (Just a heads up as to why they were not invited to join the party with the rest of the data)
  • The timeline on the bottom repeats 12AM/6/12PM/6/etc. because, again, the 2 jobs on the far left only run once per week, which happens to be 3 days ago. (When the jobs run closer together, the timeline will automatically become more granular.)
  • The timeline does not display full datetimes in the hover over pop-up box.
  • The "Duration" value, within the timeline pop-up, comes from the way the chart processes the start and end dates. (The SWQL query inside the JavaScript is a slightly modified version of the query mentioned above. The query above calculates and formats the value for duration differently).

**I have updated the attached file to include a temporary workaround for displaying jobs which were manually started. Manually starting a job will cause the new start time to appear as a date/time in the future, which will break the chart. If/when the new time is set as a future date, later than the end time, this workaround will simply use the last end time as both the start and end time. This will allow the job to be added to the chart at the time it completed running. The next time the job runs at its normal schedule, it should show up with its normal start and end times... Hopefully**

Well, there you go. It's not rocket surgery, or anything fancy. But, when the planets are aligned, and your luck is full, it just might work well enough for you to use once or twice.

What's in your widget? Please post below and let us know.

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,


  • Here is an example of an error when viewing the timeline after manually starting a job, or when the manually started job has just completed. (As you can see, the method to calculate the new start time ends up with a value that is further in the future than the end date/time.)

    This happens because we are counting on everything working as it should, without manual intervention. Since we do not have an actual start value to use, we have to make it ourselves. This is done by taking the difference between the next scheduled start, and the last run times, then creating a new value for last start from there. (again, it all depends on a regular schedule.)


    I'm still working on a fix, but just in case you come across this, it is definitely a timing issue. (We can probably just throw the value into a case statement, for now, to get it to at least show something...)

  • I have updated the attached file above to include a temporary workaround for displaying jobs which were manually started. (JS_Timeline-005.txt)

    Manually starting a job will cause the new start time to appear as a date/time in the future, which will break the chart. If/when the new time is set as a future date (later than the last end time), this workaround will simply use the last end time as both the start and end time. This will allow the job to be added to the chart at the time it completed running. The next time the job runs at its normal schedule, it should show up with its normal start and end times...


  • Great idea to show the amount of time each job takes in a visual manner, as it is easy to miss the fact that an NCM job takes too long and needs to be reviewed.

  • nickzourdos​ had ran into an issue when using this in his environment, where the page would build the box, but would not populate the box with anything. After looking through the console logs of his browser, and trying a few adjustments to the query, we finally got it working. Basically, the query was returning a null value for one of the datetimes used to calculate the start date, which breaks the entire timeline.

    I have updated the attachment above to include more criteria in the where filter part of the query. Now, it should not return any results with null end or next start times.

    If anyone else here comes across any issues, or knows how to make this work even better, please post and let us know.

    Thank you,


  • Just figured I would post a screenshot showing how I use this. On top, I have a custom SWQL query, showing additional details of the same data. And below that, I have the timeline showing me all the overlapping jobs.


    This allows me to easily see how long each job takes, as well as which jobs overlap. As time goes on, and when necessary, I will use this to more evenly spread out the various jobs. Additionally, with a few more tweaks, I'll add in the status of each job.

    Thank you,