cancel
Showing results for 
Search instead for 
Did you mean: 
davidcmp
Level 7

Swql Donut Chart with caption on Total Nodes

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!

ApplicationFrameHost_2020-01-17_08-57-21.jpg

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

0 Kudos
1 Reply
mesverrum
Level 20

Re: Swql Donut Chart with caption on Total Nodes

I expect you would need to add a separate query just getting the count with none of the machinetypes listed, and then look over the google pie chart documentation to see what they say about additing that total section.  The might not support it inside the chart in which case you might just add it to the html as another element, but im trash at javascript unfortunately so thats just my napkin math guess.

Yeah I just took a look at the documentation, https://developers.google.com/chart/interactive/docs/gallery/piechart#donut

There's no built in provisions for adding a label like that there so it would have to be a new element added in.  You could maybe hijack the title and populate it with a count variable in addition to you string but you can't control where it displays, it's hard coded to be above the chart.