title: Why are the panels in my Grafana dashboard overlapping?
body: <p>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.</p>
  
  <p>Currently, I have this as my script (Note my JavaScript/JQuery skills are abysmal..):</p>
  
  <pre><code>'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 &amp; 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);
    });
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>Any help with this would be appreciated!</p>