Custom Sparkline Charts

Version 1

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







    • 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



    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.



      <script type="text/javascript" src="">
      //path to jQuery plugin
      //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 type="text/javascript">
      //Borrowed from
      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 like \'%Glassfish WS2\' and c.componentname NOT LIKE \'EJB%\' and > AddMinute(-60, GETUTCDATE()) order by c.componentname, desc'});
      (function worker() {
      //Create the AJAX POST request  
      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
      //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':
      case 'SelfService1.0':
      case 'AuthN':
      case 'CMODWebService':
      //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
    <p id="p1">
    <div id="name1">
    </div><td>SelfServiceNS</td><td><span class="dynamicsparkline1">Loading..</span> </td>
    <p id="p2">
    <div id="name2">
    </div><td>SelfService1.0</td><td><span class="dynamicsparkline2">Loading..</span> </td>
    <p id="p3">
    <div id="name3">
    </div><td>AuthN</td><td><span class="dynamicsparkline3">Loading..</span> </td>
    <p id="p4">
    <div id="name4">
    </div><td>CMODWebService</td><td><span class="dynamicsparkline4">Loading..</span> </td>