Community
- Command Central
- MVP Program
- Monthly Mission
- Blogs
- Groups
- Events
- Media Vault
Products
- Observability
- Network Management
- Application Management
- IT Security
- IT Service Management
- System Management
- Database Management
Content Exchange
- SolarWinds Platform
- Server & Application Monitor
- Database Performance Analyzer
- Server Configuration Monitor
- Network Performance Monitor
- Network Configuration Manager
- SQL Sentry
- Web Help Desk
Free Tools & Trials
Store

How to modify size of interface utilization charts?

I have been using Cacti for a while to display basic interface utilization charts.

I would like to start using Orion NPM to do that for me, but when I create the charts, the overall size of the NPM charts are too big.

I am trying to put 15 charts on a single web page that is displayed on a large screen TV, but they wont fit.

NPM displays information that I would like to remove or modify, and I would like to be able to adjust the height as well as the width of each chart.

I have attached an img of two charts, one is the Orion NPM version, the other is the Cacti version.

Is there a way to shrink the height of the chart, and remove some of the header information?

For example, on the X axis, instead of saying "14.3 Mbps", it would be helpful to just have "14 M"

Also, remove the top header that says the interface and time period.

On the bottom instead of saying "Avg Rx bps for XXXX- GigabitEthernet 1/2 - Circuit123" and the same thing below it for Avg Tx, just have it show "Avg Rx" and "Avg Tx" so I will know which color is for which value. Then they could be put side by side saving the extra white space below it.

Is this possible?

Thank you...

attachments.zip

Find more posts tagged with

Accepted answers

All comments

mesverrum

Not with anything native to Solarwinds, many of the default resources in Orion are painfully inefficient with white space. I've seen people whip up custom dashboarding integrations with javascript or SQL Reporting Services to get around it but its a lot of work.

Here is a clunky example a friend of mine helped me to do of using js sparklines for graphing responsetimes from a SAM component based on a thread here Custom Sparkline Charts

I know if I was any good at javascript stuff I could really expand on this to get more compact graphing into orion but only so many hours in the day and all that.

<!doctype html>

<html>

<head>

<title>Sparkline js test</title>

$.noConflict();

jQuery(function(){

jQuery.getScript('https://cdn.jsdelivr.net/jquery.menu-aim/0.1/jquery.menu-aim.min.js', function(){

jQuery.getScript('https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.js', function(){

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 rt.date > AddMinute(-60, GETUTCDATE()) and rt.responsetime is not null and rt.responsetime > 0 order by c.componentname,rt.date desc'});

jQuery.ajax({

type: 'POST', url: '/Orion/Services/Information.asmx/Query', data: params, contentType: "application/json; charset=utf-8", dataType: "json", success: function (response) {

console.log(response);

var a =[];

var b = [];

var c = [];

var d = [];

for(var i in response.d.Rows) {

switch (response.d.Rows[i][0]) {

case 'HTTP-MSN':

a.push(response.d.Rows[i][1])

break;

case 'HTTPS-Google':

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;

}

jQuery('.dynamicsparkline1').sparkline(a,{type: 'line',width: '200px',height: '40px',fillColor: 'False',chartRangeMin: 100,chartRangeMax: 750,normalRangeMin: 100, normalRangeMax: 750,normalRangeColor: '#00bf00'})

jQuery('.dynamicsparkline2').sparkline(b,{type: 'line',width: '200px',height: '40px',normalRangeMin: 0, normalRangeMax: 500,normalRangeColor: '#00bf00'})

jQuery('.dynamicsparkline3').sparkline(c,{type: 'line',width: '200px',height: '40px',normalRangeMin: 0, normalRangeMax: 500,normalRangeColor: '#00bf00'})

jQuery('.dynamicsparkline4').sparkline(d,{type: 'line',width: '200px',height: '40px',normalRangeMin: 0, normalRangeMax: 500,normalRangeColor: '#00bf00'})

}, complete: function(response) {

console.log(response)

}, error: function(err) {

console.log('broke');

}

});

</script>

<body>

<table>

<tr>

<td><span class="dynamicsparkline1">Loading..</span></td>

</p>

</tr>

<tr>

<td>HTTPS-Google'</td>

<td><span class="dynamicsparkline2">Loading..</span></td>

</p>

</tr>

<tr>

<td><span class="dynamicsparkline3">Loading..</span>

</td>

</p>

</tr>

<tr>

<td><span class="dynamicsparkline4">Loading..</span>

</td>

</p>

</tr>

</table>

</body>

</html>

-Marc Netterfield

Loop1 Systems: SolarWinds Training and Professional Services

LinkedIN: Loop1 Systems
Facebook: Loop1 Systems
Twitter: @Loop1Systems

brian.trotter

Unfortunately this is what I was afraid of. I will most likely have to keep Cacti around for a while so I can have better graphs.

Thank you.