Quantcast
Channel: THWACK: All Content - Orion SDK
Viewing all articles
Browse latest Browse all 2677

Swql Donut Chart with caption on Total Nodes

$
0
0

Hi, was trying out on the sqwl with donut chart, successfully create the chart but having problem to display the total nodes on the same custom html. Below is the swql code used, appreciate anyone can help to advise. Thanks!

 

Donut Chart

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div>

<script>

 

var swql="SELECT n.MachineType, count(n.caption) as Qty from  Orion.Nodes as n where n.MachineType like 'OmniSwitch%' OR n.MachineType like  '%Unknown%' OR n.MachineType like 'PA%' OR n.MachineType like 'Forti%' OR n.MachineType like 'MAG%' OR n.MachineType like 'Cisco%' OR n.MachineType like 'Pulse%' OR n.MachineType like 'HUAWEI%' OR n.MachineType like 'ForeScout%' OR n.MachineType like 'net-snmp%' GROUP BY n.MachineType order BY Qty DESC"

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) {

 

var i;

 

google.charts.load("current", {packages:["corechart"]});

google.charts.setOnLoadCallback(drawChart);

 

function drawChart() {

var dataTable = new google.visualization.DataTable();

dataTable.addColumn({ type: 'string', id: 'MachineType'});

dataTable.addColumn({ type: 'number', id: 'Count' });

 

for(var i=0; i < response.d.Rows.length; i++){

var row = [response.d.Rows[i][0],response.d.Rows[i][1]];

dataTable.addRow(row);

}

 

var chart = new google.visualization.PieChart(document.getElementById('Network_Devices'));

 

var options = {

            title: 'Network Devices',

    pieHole: 0.4,

            colorAxis: {colors:['#86ce76','#d61007']},

                            legend: {position: 'right'},

                            tooltip: {trigger: 'selection'},

                            chartArea:{left:2,top:2,width:500,height:500},

            };

 

chart.draw(dataTable, options);

}

 

}

})

 

</script>

</div>

<div id="container" style="width: 500px; height: 215px;">

<div id="Network_Devices" style="width: 500px; height 215px;"></div>

</div>


Viewing all articles
Browse latest Browse all 2677

Trending Articles