Implemented

https://documentation.solarwinds.com/en/success_center/orionplatform/content/core-fusion-proportional-widgets.htm

Create Custom Pie Charts

We would like to be able to display custom pie charts. For example, show the status of all my servers with custom property of 'critical' in a pie chart with a standard red/yellow/green code. Or all equipment with custom property 'exchange', etc.

FormerIdeaCreator
Parents Comment Children
  • in reply to ioan_bucsa

    This looks nice. Please share how you did it..

  • in reply to abdhijasharma

    <!DOCTYPE html>

    <html>

    <head>

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

        <script type="text/javascript">

            function getValues() {

                var swql = "Select Count(n.status) AS Cnt,s.StatusName FROM Orion.Nodes n RIGHT Join Orion.StatusInfo s ON n.Status = s.StatusID WHERE s.StatusID IN (1,2,3,9) GROUP By n.Status,s.StatusName,s.StatusId ORDER By s.statusID ASC "

                var params = JSON.stringify({

                    query: swql,

                    parameters: {

                    }

                });

                $.ajax({

                    type: 'POST',

                    url: '/Orion/Services/Information.asmx/QueryWithParameters',

                    data: params,

                    contentType: "application/json; charset=utf-8",

                    dataType: "json",

                    success: function (response) {

                        console.log(response.d.Rows);

                        document.getElementById("upcnt").innerHTML = response.d.Rows[0][0];

                        document.getElementById("downcnt").innerHTML = response.d.Rows[1][0];

                        document.getElementById("unkcnt").innerHTML = response.d.Rows[2][0];

                        document.getElementById("unmcnt").innerHTML = response.d.Rows[3][0];

                    }

                });

            }

        </script>

        <style>

    * {

      box-sizing: border-box;

    }

    body {

      font-family: Open Sans, sans-serif;

    }

    h2

      {

      padding-left:0;

    }

    /* Float four columns side by side */

    .column {

      float: left;

      width: 25%;

      padding: 0 5px;

      text-align: center;

    }

    .row {margin: 0 -5px;}

    /* Clear floats after the columns */

    .row:after {

      content: "";

      display: table;

      clear: both;

    }

    /* Responsive columns */

    @media screen and (max-width: 600px) {

      .column {

        width: 100%;

        display: block;

        margin-bottom: 10px;

      }

    }

    /* Style the counter cards */

    .cardup {

      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

      padding: 16px;

      text-align: center;

      background-color: #83C368;

      color: white;

    }

    .carddown {

      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

      padding: 16px;

      text-align: center;

      background-color: #D4303C;

      color: white;

    }

    .cardunk {

      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

      padding: 16px;

      text-align: center;

      background-color: #FAC22A;

      color: white;

    }

    .cardunm {

      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

      padding: 16px;

      text-align: center;

      background-color: #D4D4D4;

      color: white;

    }

    .fa {font-size:60px;}

        </style>

    </head>

    <body onload="getValues();">

        <br>

        <div class="row">

          

    <div class="column">

                <div class="cardup">

                    <p><i class="fa fa-check"></i></p>

                    <h3 id="upcnt"></h3>

                    <h2>Up</h2>

                </div>

            </div>

            <div class="column">

            

                <div class="carddown">

                    <p><i class="fa fa-times"></i></p>

                    <h3 id="downcnt"></h3>

                    <h2>Down</h2>

                </div>

        

            </div>

            <div class="column">

             

                <div class="cardunk">

                    <p><i class="fa fa-exclamation"></i></p>

                    <h3 id="unkcnt"></h3>

                    <h2>Warning</h2>

                </div>

           

            </div>

            <div class="column">

               

                <div class="cardunm">

                    <p><i class="fa fa-pause"></i></p>

                    <h3 id="unmcnt"></h3>

                    <h2>Unmanaged</h2>

                </div>

       

            </div>

        </div>

    </body>

    </html>

  • in reply to ioan_bucsa

    The query is SWQL and can be whatever you want it to be.

  • in reply to ioan_bucsa

    Thanks a lot..! liked the old scoreboard, but this looks pretty cool as well..

  • in reply to ioan_bucsa

    Cool! Thank you. and how to make a filter, for example, in the field nodes.city I couldn’t get out of the error. E.g. Select Count (n.status) AS Cnt, s.StatusName FROM Orion.Nodes n RIGHT Join Orion.StatusInfo s ON n.Status = s.StatusID WHERE nodes.city = 'Namecity' or s.StatusID IN (1,2 , 3.9) GROUP By n.Status, s.StatusName, s.StatusId ORDER By s.statusID ASC

      Tell me how it will be more correct ? @ioan_bucsa

SolarWinds solutions are rooted in our deep connection to our user base in the THWACK® online community. More than 195,000 members are here to solve problems, share technology and best practices, and directly contribute to our product development process.

SolarWinds Customer Success Center Certification Media Vault Link Accounts
About THWACK Blogs For Government Edit Settings Free Tools & Trials
Legal Documents Terms of Use Privacy California Privacy Rights Security Information
©2024 SolarWinds Worldwide, LLC. All Rights Reserved.