Why are the panels in my Grafana dashboard overlapping? - grafana

Question

I am attempting to create a Grafana Scripted Dashboard consisting of panels that indicate whether a server is UP or not. The reason for this is that we constantly have a list of agents being added and making a new panel every time is becoming repetitive.
Currently, I have this as my script (Note my JavaScript/JQuery skills are abysmal..):
'use strict';
// accessible variables in this scope
var window, document, ARGS, $, jQuery, moment, kbn;
return function(callback) {
// Setup some variables
var dashboard;
// Initialize a skeleton with nothing but a rows array and service object
dashboard = {
annotations: {
list: [
{
builtIn: 1,
datasource: "-- Grafana --",
enable: true,
hide: false,
iconColor: "rgba(0, 211, 255, 1)",
name: "Annotations & Alerts",
type: "dashboard"
}
]
},
editable: true,
gnetId: null,
graphTooltip: 0,
id: 15,
links: [],
panels : [],
refresh: false,
schemaVersion: 16,
style: "dark",
tags: [],
templating: {
list: []
},
time: {
from: "now-5m",
to: "now"
},
timepicker: {
refresh_intervals: [
"5s",
"10s",
"30s",
"1m",
"5m",
"15m",
"30m",
"1h",
"2h",
"1d"
],
time_options: [
"5m",
"15m",
"1h",
"6h",
"12h",
"24h",
"2d",
"7d",
"30d"
]
},
timezone: "",
title: "My Agents",
//uid: "000000019",
version: 2
};
// Set a title
dashboard.title = 'Scripted dash';
// Set default time
// time can be overridden in the url using from/to parameters, but this is
// handled automatically in grafana core during dashboard initialization
dashboard.time = {
from: "now-6h",
to: "now"
};
var rows = 1;
var seriesName = 'argName';
if(!_.isUndefined(ARGS.rows)) {
rows = parseInt(ARGS.rows, 10);
}
if(!_.isUndefined(ARGS.name)) {
seriesName = ARGS.name;
}
$.ajax({
method: 'GET',
url: 'http://my_server/api/my_rest_call_to_get_agents'
})
.done(function(result) {
//console.log(JSON.stringify(result));
var x = 0;
var y = 0;
var id = 0;
$.each(result.data.result, function(index, value) {
//console.log(value.metric.instance);
var panel = {
clusterName: "My Agent",
colorMode: "Panel",
colors: {
crit: "rgba(245, 54, 54, 0.9)",
disable: "rgba(128, 128, 128, 0.9)",
ok: "rgba(50, 128, 45, 0.9)",
warn: "rgba(237, 129, 40, 0.9)"
},
cornerRadius: 0,
//datasource: "Prometheus",
displayName: "Agent_Name",
flipCard: true,
flipTime: "2",
fontFormat: "Bold",
gridPos: {
h: 3,
w: 2,
x: x,
y: y
},
id: id,
isGrayOnNoData: true,
isHideAlertsOnDisable: false,
isIgnoreOKColors: false,
links: [],
targets: [
{
aggregation: "Last",
alias: value.metric.instance,
crit: 0,
decimals: 2,
displayAliasType: "Warning / Critical",
displayType: "Regular",
displayValueWithAlias: "Never",
expr: 'expression_to_query_service',
format: "time_series",
instant: true,
intervalFactor: 1,
legendFormat: value.metric.instance,
refId: "A",
units: "short",
valueHandler: "Number Threshold"
}
],
title: value.metric.instance,
transparent: true,
type: "vonage-status-panel"
}
dashboard.panels.push(panel);
x += 2;
});
callback(dashboard);
});
}
The strangest part about all of the panels being overlapping is that every panel has different coordinates if I look at each panel's JSON.
Any help with this would be appreciated!