Scripted dashboard overwrites gridpos

Hello, I am using scripted dashboard to create the same dashboard for different databases depending on an input. And it works great.
However, there is one issue I don’t seem to be able to fix. The values I assign to the gridpos variables seems to be totally ignored when generating the page, everything else works

This is the file I am using

/* global _ */
'use strict';

// accessible variables in this scope
var window, document, ARGS, $, jQuery, moment, kbn;

// Setup some variables
var dashboard;

// All url parameters are available via the ARGS object
var ARGS;

dashboard = {
  rows : [],
};

dashboard.title = ARGS.ip + ' Dashboard';

dashboard.time = { 
  from: "now-1h",
  to: "now"
};

dashboard.editable = true; //Should only be true while working on scripted dashboard.
dashboard.refresh = "10s"; // updates all panels every 10 seconds 


var mac = 'DefaultMac';

if(!_.isUndefined(ARGS.mac)) {
  mac = ARGS.mac;
}


dashboard.rows.push({
    title: 'Chart',
    panels: [
        {
				steppedLine: true,
            type: 'graph',
            datasource: 'TestProtocolDB',
            title: "Load Average",
            span: "12",
            "nullPointMode": "connected",
            fill: 1,
            linewidth: 2,
				gridPos: {
					"h": 8,
					"w": 12,
					"x": 0,
					"y": 0
				},
				id: 1,
				legend: {
					"avg": true,
					"current": true,
					"max": true,
					"min": true,
					"show": true,
					"total": false,
					"values": true
				},
				
            targets: [
                {
                    "measurement": ("AvgLo-" + mac),
                    "refId": "A",
						"orderByTime": "ASC",
						"policy": "default",
						"resultFormat": "time_series",
						"alias": "Load Average",
                },
            ],
            tooltip: {
                shared: true
            }
        },
			{
				steppedLine: true,
				type: 'graph',
				datasource: 'TestProtocolDB',
				title: "Memory",
				span: "12",
				"nullPointMode": "connected",
				fill: 1,
				linewidth: 2,
				gridPos: {
					"h": 8,
					"w": 12,
					"x": 12,
					"y": 0
				},
				id: 2,
				legend: {
					"alignAsTable": true,
					"avg": true,
					"current": false,
					"max": true,
					"min": true,
					"show": true,
					"total": false,
					"rightSide": true,
					"values": true
				},
				targets: [
					{
						"measurement": ("MemTo-" + mac),
						"refId": "Memory Total",
						"orderByTime": "ASC",
						"policy": "default",
						"resultFormat": "time_series",
						"alias": "Memory Total",
					},
					{
						"measurement": ("MemFr-" + mac),
						"refId": "Memory Free",
						"orderByTime": "ASC",
						"policy": "default",
						"resultFormat": "time_series",
						"alias": "Memory Free",
					},
					{
						"measurement": ("Cache-" + mac),
						"refId": "Cache",
						"orderByTime": "ASC",
						"policy": "default",
						"resultFormat": "time_series",
						"alias": "Cache",
					}
				],
				tooltip: {
					shared: true
				}
			}        
		],
});
return dashboard;

However when looking at the JSON model of the dashboard, the first gridpos is always:

    "h": 7,
    "w": 24,
    "x": 0,
    "y": 0

And the second is always:

    "h": 7,
    "w": 24,
    "x": 0,
    "y": 7

Despite me setting it to something else. Scripted dashboards works exactly fitting the task at hand and this isn’t a huge issue, its just kinda annoying aesthetically. So if there is a fix i would like to know it.