<html>
<head>
<title>USGS Earthquake Feed</title>
<meta http-equiv="Cache-Control" content="no-store" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<script src="https://connectors.tableau.com/libs/tableauwdc-2.3.latest.js" type="text/javascript"></script>
<script>
(function () {
// Create the connector object
var myConnector = tableau.makeConnector();
myConnector.getSchema = function (schemaCallback) {
var cols = [{
id: "MONTH",
dataType: tableau.dataTypeEnum.string
}, {
id: "METRICKEY",
alias: "METRICKEY",
dataType: tableau.dataTypeEnum.string
}, {
id: "NUMERATOR",
alias: "NUMERATOR",
dataType: tableau.dataTypeEnum.float
}, {
id: "DENOMINATOR",
dataType: tableau.dataTypeEnum.float
}];
var tableSchema = {
id: "feed",
alias: "Feed",
columns: cols
};
schemaCallback([tableSchema]);
};
myConnector.getData = function (table, doneCallback) {
var filters = tableau.filters;
console.log("filters");
console.log(tableau.filters);
var projections = tableau.projections;
var apicallUrl = 'test/?name=nb&filters=' + filters + '&projections=' + projections;
console.log(apicallUrl);
$.getJSON(apicallUrl, function (resp) {
var feat = resp.DATA,
tableData = [];
// Iterate over the JSON object
for (var i = 0, len = feat.length; i < len; i++) {
tableData.push({
"MONTH": feat[i].MONTH,
"METRICKEY": feat[i].METRICKEY,
"NUMERATOR": feat[i].NUMERATOR,
"DENOMINATOR": feat[i].DENOMINATOR
});
}
table.appendRows(tableData);
doneCallback();
});
};
tableau.registerConnector(myConnector);
$(document).ready(function () {
$("#submitButton").click(function () {
var filters = $('#filters').val().trim();
var projections = $('#projections').val().trim();
tableau.filters = JSON.stringify(filters);
tableau.projections = projections;
tableau.submit();
});
});
})();
</script>
</head>
<body>
<div class="container container-table">
<div class="row vertical-center-row">
<div class="text-center col-md-4 col-md-offset-4">
<h2>Get Earthquake Data for a Time Range</h2>
<form>
<div class="form-inline">
<label for="start-date-one" class="text-center">filters</label>
<span>—</span>
<label for="end-date-one">projections</label>
</div>
<div class="form-inline">
<input type="text" class="form-control" id="filters" value="">
<input type="text" class="form-control" id="projections" value="">
</div>
</form>
<button type="button" id="submitButton" class="btn btn-success" style="margin: 10px;">Get Earthquake Data!</button>
<div id="errorMsg"></div>
</div>
</div>
</div>
</body>
</html>
Back