Dashboard creation issue

Pragya6

I am using the below scripts but it's not fetching the correct data in solarwinds. Please help me out.

<!--#################################################
# This one is the breakdown with click to load data #
# Use this one to only show MachineType & Vendor. #
#####################################################-->
<script type="text/javascript" src="www.gstatic.com/.../script>
<div>
<script>

var swql="SELECT SUBSTRING(TOSTRING(DATETRUNC('Day',TimeStamp)),0,12) AS Day ,COUNT(*) AS Qty FROM Orion.AlertHistory WHERE TOLOCAL(TimeStamp) > GETDATE()-30 GROUP BY DATETRUNC('Day',TimeStamp) AND Timestamp > ADDMONTH(-3 GETUTCDATE ()) ORDER BY DATETRUNC('Day',TimeStamp) 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:["calendar"]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Changes' });

for(var i=0; i < response.d.Rows.length; i++){
var row = [new Date(response.d.Rows[i][0]),response.d.Rows[i][1]];
dataTable.addRow(row);
}

var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

var options = {
title: 'Total Alerts Triggered By Day',
calendar: { cellSize: 12 },
colorAxis: {colors:['#86ce76','#d61007']},
};

<!--Event listener starting code-->
function selectHandler() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var dateindex=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]
var longdate = dataTable.getValue(selectedItem.row, 0);
var splitdate=longdate.toString().split(" ");
var querymonth= dateindex.indexOf(splitdate[1])+1;
var querydate=splitdate[2];
console.log(querymonth);

<!--this is where i might have broke it--->

var swql="SELECT SUBSTRING(TOSTRING(DATETRUNC('Day',TimeStamp)),0,12) AS Day ,COUNT(*) AS Qty,ISNULL(AlertHistory.AlertObjects.Node.MachineType,'Unknown') AS MachineType FROM Orion.AlertHistory WHERE YEAR(TOLOCAL(TimeStamp)) = YEAR(GETDATE()) AND MONTH(TOLOCAL(TimeStamp)) = " +querymonth + " AND DAY(TOLOCAL(TimeStamp)) = " +querydate+" GROUP BY DATETRUNC('Day',TimeStamp),AlertHistory.AlertObjects.Node.MachineType ORDER BY DATETRUNC('Day',TimeStamp) DESC,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) {
console.log(response.d.Rows);

<!--begin category_pi2 chart code-->>
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Event Type' });
dataTable.addColumn({ type: 'number', id: 'Count' });

for(var i=0; i < response.d.Rows.length; i++){
var row = [response.d.Rows[i][2],response.d.Rows[i][1]];
dataTable.addRow(row);
}

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

var options = {
title: longdate.toString().slice(0,15) + ' Machine Type',
calendar: { cellSize: 12 },
colorAxis: {colors:['#86ce76','#d61007']},
};

chart.draw(dataTable, options);
}
<!--end category_pi2 chart code-->>
}
})

var swql="SELECT SUBSTRING(TOSTRING(DATETRUNC('Day',TimeStamp)),0,12) AS Day ,COUNT(*) AS Qty,ISNULL(AlertHistory.AlertObjects.Node.Vendor,'Unknown') AS Vendor FROM Orion.AlertHistory WHERE YEAR(TOLOCAL(TimeStamp)) = YEAR(GETDATE()) AND MONTH(TOLOCAL(TimeStamp)) = " + querymonth + " AND DAY(TOLOCAL(TimeStamp)) = " + querydate + " GROUP BY DATETRUNC('Day',TimeStamp),AlertHistory.AlertObjects.Node.Vendor ORDER BY DATETRUNC('Day',TimeStamp) DESC,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) {
console.log(response.d.Rows);

<!--begin category_pi3 chart code-->>
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Event Type' });
dataTable.addColumn({ type: 'number', id: 'Count' });

for(var i=0; i < response.d.Rows.length; i++){
var row = [response.d.Rows[i][2],response.d.Rows[i][1]];
dataTable.addRow(row);
}

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

var options = {
title: longdate.toString().slice(0,15) + ' Vendor',
calendar: { cellSize: 12 },
colorAxis: {colors:['#86ce76','#d61007']},
};

chart.draw(dataTable, options);
}
<!--end category_pi3 chart code-->>
}
})
<!--this ends where i might have broke it--->
}
}

google.visualization.events.addListener(chart, 'select', selectHandler);
<!--End event listener-->

chart.draw(dataTable, options);
}
}
})
</script>
</div>
<!--Adding some divs here for layout management all divs will be sized relevant to the container-->
<div id="container" style width:800px; height:100%>
<div id="calendar_basic" style="width: 100%; height: 180px;"></div>
<div id="category_pi2" style="width: 50%; height 300px; float:left;"></div>
<div id="category_pi3" style="width: 50%; height 300px; float:right;"></div>
</div>

<!--###################################################
# This one is the breakdown with click to load data #
# Use this one to show MachineType & Vendor, #
# as well as NODE custom properties Area & Department.#
#######################################################-->
<script type="text/javascript" src="www.gstatic.com/.../script>
<div>
<script>

var swql="SELECT SUBSTRING(TOSTRING(DATETRUNC('Day',TimeStamp)),0,12) AS Day ,COUNT(*) AS Qty FROM Orion.AlertHistory WHERE TOLOCAL(TimeStamp) > GETDATE()-30 GROUP BY DATETRUNC('Day',TimeStamp)ORDER BY DATETRUNC('Day',TimeStamp) 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:["calendar"]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Changes' });

for(var i=0; i < response.d.Rows.length; i++){
var row = [new Date(response.d.Rows[i][0]),response.d.Rows[i][1]];
dataTable.addRow(row);
}

var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

var options = {
title: 'Total Alerts Triggered By Day',
calendar: { cellSize: 12 },
colorAxis: {colors:['#86ce76','#d61007']},
};

<!--Event listener starting code-->
function selectHandler() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var dateindex=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]
var longdate = dataTable.getValue(selectedItem.row, 0);
var splitdate=longdate.toString().split(" ");
var querymonth= dateindex.indexOf(splitdate[1])+1;
var querydate=splitdate[2];
console.log(querymonth);

<!--this is where i might have broke it--->
var swql="SELECT SUBSTRING(TOSTRING(DATETRUNC('Day',TimeStamp)),0,12) AS Day ,COUNT(*) AS Qty,ISNULL(AlertHistory.AlertObjects.Node.CustomProperties.Area,'Unknown') AS Area FROM Orion.AlertHistory WHERE YEAR(TOLOCAL(TimeStamp)) = YEAR(GETDATE()) AND MONTH(TOLOCAL(TimeStamp)) = "+querymonth+ " AND DAY(TOLOCAL(TimeStamp)) = "+querydate+" GROUP BY DATETRUNC('Day',TimeStamp),AlertHistory.AlertObjects.Node.CustomProperties.Area ORDER BY DATETRUNC('Day',TimeStamp) DESC,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) {
console.log(response.d.Rows);

<!--begin category_pi0 chart code-->>
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Event Type' });
dataTable.addColumn({ type: 'number', id: 'Count' });
for(var i=0; i < response.d.Rows.length; i++){
var row = [response.d.Rows[i][2],response.d.Rows[i][1]];
dataTable.addRow(row);
}

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

var options = {
title: longdate.toString().slice(0,15) +' Area',
calendar: { cellSize: 12 },
colorAxis: {colors:['#86ce76','#d61007']},
};

chart.draw(dataTable, options);
}

<!--end category_pi0 chart code-->>
}
})

var swql="SELECT SUBSTRING(TOSTRING(DATETRUNC('Day',TimeStamp)),0,12) AS Day ,COUNT(*) AS Qty,ISNULL(AlertHistory.AlertObjects.Node.CustomProperties.Department,'Unknown') AS Department FROM Orion.AlertHistory WHERE YEAR(TOLOCAL(TimeStamp)) = YEAR(GETDATE()) AND MONTH(TOLOCAL(TimeStamp)) = " + querymonth +" AND DAY(TOLOCAL(TimeStamp)) = " +querydate +" GROUP BY DATETRUNC('Day',TimeStamp),AlertHistory.AlertObjects.Node.CustomProperties.Department ORDER BY DATETRUNC('Day',TimeStamp) DESC,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) {
<!--begin category_pi1 chart code-->>
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Event Type' });
dataTable.addColumn({ type: 'number', id: 'Count' });

for(var i=0; i < response.d.Rows.length; i++){
var row = [response.d.Rows[i][2],response.d.Rows[i][1]];
dataTable.addRow(row);
}

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

var options = {
title: longdate.toString().slice(0,15) + ' Department',
calendar: { cellSize: 12 },
colorAxis: {colors:['#86ce76','#d61007']},
};

chart.draw(dataTable, options);
}
<!--end category_pi1 chart code-->>
}
})

var swql="SELECT SUBSTRING(TOSTRING(DATETRUNC('Day',TimeStamp)),0,12) AS Day ,COUNT(*) AS Qty,ISNULL(AlertHistory.AlertObjects.Node.MachineType,'Unknown') AS MachineType FROM Orion.AlertHistory WHERE YEAR(TOLOCAL(TimeStamp)) = YEAR(GETDATE()) AND MONTH(TOLOCAL(TimeStamp)) = " +querymonth + " AND DAY(TOLOCAL(TimeStamp)) = " +querydate+" GROUP BY DATETRUNC('Day',TimeStamp),AlertHistory.AlertObjects.Node.MachineType ORDER BY DATETRUNC('Day',TimeStamp) DESC,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) {
console.log(response.d.Rows);

<!--begin category_pi2 chart code-->>
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Event Type' });
dataTable.addColumn({ type: 'number', id: 'Count' });

for(var i=0; i < response.d.Rows.length; i++){
var row = [response.d.Rows[i][2],response.d.Rows[i][1]];
dataTable.addRow(row);
}

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

var options = {
title: longdate.toString().slice(0,15) + ' Machine Type',
calendar: { cellSize: 12 },
colorAxis: {colors:['#86ce76','#d61007']},
};

chart.draw(dataTable, options);
}
<!--end category_pi2 chart code-->>
}
})

var swql="SELECT SUBSTRING(TOSTRING(DATETRUNC('Day',TimeStamp)),0,12) AS Day ,COUNT(*) AS Qty,ISNULL(AlertHistory.AlertObjects.Node.Vendor,'Unknown') AS Vendor FROM Orion.AlertHistory WHERE YEAR(TOLOCAL(TimeStamp)) = YEAR(GETDATE()) AND MONTH(TOLOCAL(TimeStamp)) = " + querymonth + " AND DAY(TOLOCAL(TimeStamp)) = " + querydate + " GROUP BY DATETRUNC('Day',TimeStamp),AlertHistory.AlertObjects.Node.Vendor ORDER BY DATETRUNC('Day',TimeStamp) DESC,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) {
console.log(response.d.Rows);
console.log(dataTable);

<!--begin category_pi3 chart code-->>
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Event Type' });
dataTable.addColumn({ type: 'number', id: 'Count' });

for(var i=0; i < response.d.Rows.length; i++){
var row = [response.d.Rows[i][2],response.d.Rows[i][1]];
dataTable.addRow(row);
}

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

var options = {
title: longdate.toString().slice(0,15) + ' Vendor',
calendar: { cellSize: 12 },
colorAxis: {colors:['#86ce76','#d61007']},
};

chart.draw(dataTable, options);
}
<!--end category_pi3 chart code-->>
}
})
<!--this ends where i might have broke it--->
}
}

google.visualization.events.addListener(chart, 'select', selectHandler);
<!--End event listener-->

chart.draw(dataTable, options);
}
}
})
</script>
</div>
<!--Adding some divs here for layout management all divs will be sized relevant to the container-->
<div id="container" style width:800px; height:100%>
<div id="calendar_basic" style="width: 100%; height: 180px;"></div>
<div id="category_pi0" style="width: 50%; height 300px; float:left;"></div>
<div id="category_pi1" style="width: 50%; height 300px; float:right;"></div>
<div id="category_pi2" style="width: 50%; height 300px; float:left;"></div>
<div id="category_pi3" style="width: 50%; height 300px; float:right;"></div>
</div>