<html>
<head>
<script type="text/javascript" src="/JS"></script>
<script type="text/javascript">
ml.onload(function () {
//create ml.query()
var q = ml.query();
q.select('Amount', 'State').from('maplarge/Donors');
q.run(function (data, query) {
//Show the data as an html table
displayTable(document.getElementById("dataDiv"),data);
});
});
//Helper Function to Layout the Data
function displayTable(dataDiv, data){
var rows = ml.data.query.Query.transposeQueryData(data.data);
console.log(rows);
var head = [];
ml.each(rows[0], function(k,v) {
head.push(k);
});
rows.unshift(head);
data=rows;
var table = ml.$("<table/>").addClass('CSSTableGenerator');
ml.$.each(data, function(rowIndex, r) {
var row = ml.$("<tr/>");
ml.$.each(r, function(colIndex, c) {
var content = "<p>"+c+"</p>";
row.append(ml.$("<t"+(rowIndex == 0 ? "h" : "d")+"/>").html(content));
});
table.append(row);
});
ml.$(dataDiv).html(table);
}
</script>
<style>
table tr:nth-child(even) {
background-color: #eee;
}
table tr:nth-child(odd) {
background-color:#fff;
}
table th {
background-color: black;
color: white;
padding: 4px;
}
table td {
padding: 4px;
}
</style>
</head>
<body>
<div id="dataDiv"></div>
</body>
</html>