Custom Sparkline Charts

Version 1

    Summary:This configuration will allow you to display Orion data in custom sparkline charts.

     

    Credit:

     

    Sample:

     

    Requirements:

    • jQuery version 1.4.3 or higher ( jQuery Sparklines ) - Orion already runs jQuery so I did not have to specify this in the code.
    • jQuery Sparkline plug-in ( jQuery Sparklines ) - Read up on this to see how to customize the charts.
    • Custom HTML Resource in your view.
    • Time

     

    Configuration:

    1. Add a new Custom HTML Resource to your view
    2. Drop the code below into the HTML resource
    3. Edit the JSON string query to suit your needs.  This should be a standard SWQL query statement.
    4. Edit the arrays (a,b,c,d), switch statement, sparkline function, and table to suit your needs.

     

     

    <html>
    <head>
    
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.js">
      //path to jQuery plugin
      //http://omnipotent.net/jquery.sparkline/#s-about
      //Should be able to drop this locally into the Orion website folders but it was easier for me to just point it to a CDN path I found.
      </script>
    
      <script type="text/javascript">
      </script>
    </head>
    <div>
    
    <script>
      //Borrowed from https://thwack.solarwinds.com/message/168134#168134
      var scr = document.getElementsByTagName('script');
      var mydiv = $(scr[scr.length - 1].parentNode); // hack, gets surrounding DIV
      
      //Query component data 
      var params = JSON.stringify({query:'select c.componentname,rt.responsetime from orion.apm.responsetime rt inner join orion.apm.component C on rt.componentid=c.ComponentID inner join Orion.APM.Application A on c.applicationid=a.ApplicationID where a.name like \'%Glassfish WS2\' and c.componentname NOT LIKE \'EJB%\' and rt.date > AddMinute(-60, GETUTCDATE()) order by c.componentname,rt.date desc'});
    
    
      (function worker() {
      //Create the AJAX POST request  
      $.ajax({
      type: 'POST',
      url: '/Orion/Services/Information.asmx/Query',
      data: params,
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function (response) {
      //On a successfull request, parse the data.
      //Uncommnet the statement below if you want to see the response
      //document.write(JSON.stringify(response));
    
      //Create some arrays to hold the data.  -- The response data appears to be oddly formatted compared to other JSON examples, but I'm no expert.
      var a =[];
      var b = [];
      var c = [];
      var d = [];
    
      for(var i in response.d.Rows) {
      //Iterate through response data and separate the data.  I'm positive there is a better and more dynamic way to do this. 
    
    
      switch (response.d.Rows[i][0]) {
      //Based on component name in result, append value to array we created earlier.
      case 'SelfServiceNS':
      a.push(response.d.Rows[i][1]);
      break;
      case 'SelfService1.0':
      b.push(response.d.Rows[i][1]);
      break;
      case 'AuthN':
      c.push(response.d.Rows[i][1]);
      break;
      case 'CMODWebService':
      d.push(response.d.Rows[i][1]);
      break;
      }
      };
      //This is where the magic happens.  Pass the array's to the sparkline plug-in and let it do it's thing.
      $('.dynamicsparkline1').sparkline(a,{type: 'line',width: '150px',height: '50px',normalRangeMin: 0, normalRangeMax: 100,normalRangeColor: '#00bf00'});
      $('.dynamicsparkline2').sparkline(b,{type: 'line',width: '150px',height: '50px',normalRangeMin: 0, normalRangeMax: 100,normalRangeColor: '#00bf00'});
      $('.dynamicsparkline3').sparkline(c,{type: 'line',width: '150px',height: '50px',normalRangeMin: 0, normalRangeMax: 100,normalRangeColor: '#00bf00'});
      $('.dynamicsparkline4').sparkline(d,{type: 'line',width: '150px',height: '50px',normalRangeMin: 0, normalRangeMax: 100,normalRangeColor: '#00bf00'});
    
      //Uncomment this if you want to log data to the browser development tools console.
      //console.log(a.constructor === Array);
      },
      complete: function() {
      // Schedule the next request when the current one's complete.  Not positive this works yet.
      setTimeout(worker, 60000);
      },
      error: function(err) {
      // Tell me if something is broke
      document.write("broke");
      }
      });
      })();
    
    </script>
    
    </div>
    <table>
    <tr>
    <p id="p1">
    <div id="name1">
    </div><td>SelfServiceNS</td><td><span class="dynamicsparkline1">Loading..</span> </td>
    </p>
    </tr>
    <tr>
    <p id="p2">
    <div id="name2">
    </div><td>SelfService1.0</td><td><span class="dynamicsparkline2">Loading..</span> </td>
    </p>
    </tr>
    <tr>
    <p id="p3">
    <div id="name3">
    </div><td>AuthN</td><td><span class="dynamicsparkline3">Loading..</span> </td>
    </p>
    </tr>
    <tr>
    <p id="p4">
    <div id="name4">
    </div><td>CMODWebService</td><td><span class="dynamicsparkline4">Loading..</span> </td>
    </p>
    </tr>
    </table>