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:
- Add a new Custom HTML Resource to your view
- Drop the code below into the HTML resource
- Edit the JSON string query to suit your needs. This should be a standard SWQL query statement.
- 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>
