I am trying to fetch data into Tableau using Web Data Connector. The API I am pulling the data from has Basic Auth.
The code runs perfectly fine in WDC Simulator but fails when I run from Tableau Desktop. It throws this error -
"missing password"
But I have integrated the password. (It works fine in simulator as well). Any help is appreciated
HTML Code
<html>
<head>
<title>API Fetch</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">
<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" ></script>
<script src="https://connectors.tableau.com/libs/tableauwdc-2.0.latest.js" type="text/javascript"></script>
<script src="my_js_above.js" type="text/javascript"></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">
<button type = "button" id = "submitButton" class = "btn btn-success" style = "margin: 10px;">Get Storage Data!</button>
</div>
</div>
</div>
</body>
</html>
JS code
(function() {
// Create the connector object
var myConnector = tableau.makeConnector();
//Setting up the Basic Authorization Header
$.ajaxSetup({
headers: {'Authorization': "Basic " + btoa("my_username" + ":" + "my_password")}
})
myConnector.init = function(initCallback) {
tableau.authType = tableau.authTypeEnum.basic;
initCallback();
};
// Define the schema
myConnector.getSchema = function(schemaCallback) {
var cols = [{
id: "Name",
alias: "Name",
dataType: tableau.dataTypeEnum.string
}, {
id: "Size",
alias: "Size",
dataType: tableau.dataTypeEnum.string
}, {
id: "timeStamp",
alias: "Timestamp",
dataType: tableau.dataTypeEnum.datetime
}];
var tableSchema = {
id: "Storage",
alias: "Fetches data storage",
columns: cols
};
schemaCallback([tableSchema]);
};
// Download the data
myConnector.getData = function(table, doneCallback) {
$.getJSON("https://my_API_URL", function(resp) {
var feat = resp.content,
tableData = [];
// Iterate over the JSON object
for (var i = 0, len = feat.length; i < len; i++) {
tableData.push({
"Name": feat[i].Name,
"Size": feat[i].Size,
"timeStamp": feat[i].timeStamp
});
}
table.appendRows(tableData);
doneCallback();
});
};
tableau.registerConnector(myConnector);
// Create event listeners for when the user submits the form
$(document).ready(function() {
$("#submitButton").click(function() {
tableau.connectionName = "Storage"; // This will be the data source name in Tableau
tableau.submit(); // This sends the connector object to Tableau
});
});
})();
Related
The code works perfectly fine for the first 4 variables but after that i am getting an invalid page response which i created for any invalid entry. but since my entry of url of every variable is there, still it not responding. Can anyone help me with this code. I have also made every html page mentioned in the variable url.
// Define routing:
var validValues = [{
value: '425769540588',
url: './something.html'
}, {
value: '264719964726',
url: './stud26471.html'
},
{
value: '327774003000',
url: './stud32777.html'
},
{
value: '345102833684',
url: './stud34510.html'
},
{
value: '359221005742',
url: './stud35922100.html'
},
{
value: '423570687069',
url: './stud42357.html'
},
{
value: '439624197820',
url: './stud43962.html'
},
{
value: '440176316459',
url: './stud44017.html'
},
{
value: '681042208435',
url: './stud68104.html'
},
{
value: '729172701174',
url: './stud72917.html'
},
{
value: '898871777413',
url: './stud89887.html'
},
{
value: '913625248899',
url: './stud91362.html'
}
];
var $myInput = $('#my-input');
$('#my-button').click(function(ev) {
ev.preventDefault(); // Prevent submitting the form already
// Look for a valid value
var url = './invalid.html';
$.each(validValues, function(i, validValue) {
if ($myInput.val() === validValue.value) {
url = validValue.url;
return false;
}
});
// Submit the form
$('#my-form').prop('action', url).submit();
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title></title>
</head>
<body>
<h1 id="title">Hello</h1>
<form class="form-inline" id="my-form">
<div class="form-group">
<input type="text" id="my-input">
<button type="submit" id="my-button">Go</button>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
{
value: '359221005742',
url: './stud35922100.html'
}
I would point out that the fourth one (which I have pasted here) breaks your URL convention, which includes only the first 5 digits of the value. Should it possibly be ./stud35922.html instead?
I'm trying to make a feed from a json link into separate divs in an html document, but nothing I try works. I've got a json link from three newspapers and I've tried different things with the different sources, but nothing I do works.
Hope someone can help me.
Here's everything from the four files I'm using. I have not included the css file.
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="sunnmoer.js"></script>
<script src="adressa.js"></script>
<script src="romsdal.js"></script>
<title>Kultur</title>
</head>
<body>
<div id="header">
<h1>Kultur</h1>
</div>
<div id="container">
<div id="div-side">
</div>
<div id="div-mid">
<div id="div-romsdal"></div>
<div id="div-adressa"></div>
<div id="div-sunnmoer"></div>
</div>
<div id="div-side">
</div>
</div>
<script type="text/javascript">
sunnmoerFunction();
</script>
<script type="text/javascript">
adressaFunction();
</script>
<script type="text/javascript">
romsdalFunction();
</script>
</body>
</html>
adressa.js (wrote some of the data from the json in the document and tried to get it to the html document as divs)
const items = [
{
id: 17501980,
url: "https://www.adressa.no/nyheter/innenriks/2018/09/12/L%C3%B8nnsutbetaling-til- offentlige-ansatte-forsinket-av-IT-tr%C3%B8bbel-17501980.ece",
title: "Lønnsutbetaling til offentlige ansatte forsinket av IT- trøbbel",
content_text: "En feil hos bankenes IT-leverandør gjorde at lønnen til offentlig ansatte her i landet ikke kom inn på konto før sent onsdag ettermiddag.",
date_published: "2018-09-12T22:47:24",
date_modified: "2018-09-12T22:47:24",
_polaris_extra: {
breakingtitle: "",
kicker: "",
title_prefix: "",
paywall: "false",
section: "innenriks",
pub_name: "adressa",
pub_id: 167
}
},
{
id: 17498454,
url: "https://www.adressa.no/nyheter/innenriks/2018/09/12/L%C3%B8nnsutbetaling-til- offentlige-ansatte-forsinket-av-IT-tr%C3%B8bbel-17498454.ece",
title: "Lønnsutbetaling til offentlige ansatte forsinket av IT- trøbbel",
content_text: "En feil hos bankenes IT-leverandør gjorde at lønnen til offentlig ansatte her i landet ikke kom inn på konto før sent onsdag ettermiddag.",
date_published: "2018-09-12T22:13:21",
date_modified: "2018-09-12T22:13:21",
_polaris_extra: {
breakingtitle: "",
kicker: "",
title_prefix: "",
paywall: "false",
section: "innenriks",
pub_name: "adressa",
pub_id: 167
}
}
];
function itemBoxDiv(items) {
return `
<a href="$(items.url)">
<div class=itemBox>
<h1>${items.title}</h1>
</div>
</a>
`
};
function adressaFunction() {
document.getElementById("div-adressa").innerHTML = `
<h1>Adresseavisen</h1>
${.map(function(itemBoxDiv).join('')}
`
romsdal.js (Tried two different things here, but I think I might have messed things up a bit)
function setup() {
loadJSON("https://www.rbnett.no/?service=jsonfeed", toArray, 'jsonp');
}
function toArray() {
var romsdalItems = [];
for (var key in json) {
if (json.hasOwnProperty(key)) {
var item = json[key];
romsdalItems.push({
url: item.url,
title: item.title,
content_text: item.content_text
});
}
}
};
function itemBoxDiv(items) {
return `
<a href="$(items.url)">
<div class=itemBox>
<h1>${items.title}</h1>
</div>
</a>
`
};
function romsdalFunction(){
document.getElementById("div-romsdal").innerHTML = `
<h1>Romsdals Budstikke</h1>
${romsdalItems.map(function(itemBoxDiv).join('')}
`
}
sunnmoer.js (here I tried to make it as simple as I could by writing my own data, but can't get that to work either, so I ended up just trying to get something into the html file, but that doesn't work either)
const petsData = [
{
name: "Tim",
dyr: "Katt",
alder: "2 år"
},
{
name: "Ponnikloppen",
dyr: "Hest",
alder: "6 år"
},
{
name: "Ola",
dyr: "Hund",
alder: "3 år"
}
];
function sunnmoerFunction() {
document.getElementById("div-sunnmoer").innerHTML = <h1>Hello</h1>
}
edit: Copied one file twice. Fixed it
Try this and let me know if you have any errors
<script type="text/javascript" src="adressa.js"></script>
<script type="text/javascript" >
let div-romsdal = document.getElementById("div-romsdal");
function load() {
var mydata = JSON.parse(items);
alert(mydata.length);
var div = document.getElementById('data');
for(var i = 0;i < mydata.length; i++)
{
div-romsdal.innerHTML = div-romsdal.innerHTML + "<p class='inner' id="+i+">"+ mydata[i].id +"</p>" + "<br>";
}
}
</script>
Or you could also use Promises
I am getting a problem when trying to use DayPilot Calendar in angularjs.
https://code.daypilot.org/63034/angularjs-event-calendar-open-source
When I downloaded sources and use it it was not working and throwing error
angular.js:9563 TypeError: Cannot read property 'getTime' of undefined
at loadEvents (daypilot-all.min.js:11)
at update (daypilot-all.min.js:11)
at Object.fn (daypilot-all.min.js:11)
at h.$digest (angular.js:12031)
at h.$apply (angular.js:12279)
at g (angular.js:7991)
at C (angular.js:8196)
at XMLHttpRequest.y.onreadystatechange (angular.js:8137)
Source code of the downloaded code is
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DayPilot: AngularJS Event Calendar</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="js/daypilot/daypilot-all.min.js" type="text/javascript"></script>
<!-- helper libraries -->
<script src="js/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- daypilot libraries -->
<script src="js/daypilot/daypilot-all.min.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="media/layout.css" />
</head>
<body>
<div id="header">
<div class="bg-help">
<div class="inBox">
<hr class="hidden" />
</div>
</div>
</div>
<div class="shadow"></div>
<div class="hideSkipLink">
</div>
<div class="main">
<div ng-app="main" ng-controller="DemoCtrl" >
<div style="float:left; width: 160px">
<daypilot-navigator id="navi" daypilot-config="navigatorConfig" ></daypilot-navigator>
</div>
<div style="margin-left: 160px">
<div class="space">
<button ng-click="showDay()">Day</button>
<button ng-click="showWeek()">Week</button>
</div>
<daypilot-calendar id="day" daypilot-config="dayConfig" daypilot-events="events" ></daypilot-calendar>
<daypilot-calendar id="week" daypilot-config="weekConfig" daypilot-events="events" ></daypilot-calendar>
</div>
</div>
<script>
var app = angular.module('main', ['daypilot']).controller('DemoCtrl', function($scope, $timeout, $http) {
$scope.events = [];
$scope.navigatorConfig = {
selectMode: "day",
showMonths: 3,
skipMonths: 3,
onTimeRangeSelected: function(args) {
$scope.weekConfig.startDate = args.day;
$scope.dayConfig.startDate = args.day;
loadEvents();
}
};
$scope.dayConfig = {
viewType: "Day",
onTimeRangeSelected: function(args) {
var params = {
start: args.start.toString(),
end: args.end.toString(),
text: "New event"
};
$http.post("backend_create.php", params).success(function(data) {
$scope.events.push({
start: args.start,
end: args.end,
text: "New event",
id: data.id
});
});
},
onEventMove: function(args) {
var params = {
id: args.e.id(),
newStart: args.newStart.toString(),
newEnd: args.newEnd.toString()
};
$http.post("backend_move.php", params);
},
onEventResize: function(args) {
var params = {
id: args.e.id(),
newStart: args.newStart.toString(),
newEnd: args.newEnd.toString()
};
$http.post("backend_move.php", params);
},
onEventClick: function(args) {
var modal = new DayPilot.Modal({
onClosed: function(args) {
if (args.result) { // args.result is empty when modal is closed without submitting
loadEvents();
}
}
});
modal.showUrl("edit.php?id=" + args.e.id());
}
};
$scope.weekConfig = {
visible: false,
viewType: "Week",
onTimeRangeSelected: function(args) {
var params = {
start: args.start.toString(),
end: args.end.toString(),
text: "New event"
};
$http.post("backend_create.php", params).success(function(data) {
$scope.events.push({
start: args.start,
end: args.end,
text: "New event",
id: data.id
});
});
},
onEventMove: function(args) {
var params = {
id: args.e.id(),
newStart: args.newStart.toString(),
newEnd: args.newEnd.toString()
};
$http.post("backend_move.php", params);
},
onEventResize: function(args) {
var params = {
id: args.e.id(),
newStart: args.newStart.toString(),
newEnd: args.newEnd.toString()
};
$http.post("backend_move.php", params);
},
onEventClick: function(args) {
var modal = new DayPilot.Modal({
onClosed: function(args) {
if (args.result) { // args.result is empty when modal is closed without submitting
loadEvents();
}
}
});
modal.showUrl("edit.php?id=" + args.e.id());
}
};
$scope.showDay = function() {
$scope.dayConfig.visible = true;
$scope.weekConfig.visible = false;
$scope.navigatorConfig.selectMode = "day";
};
$scope.showWeek = function() {
$scope.dayConfig.visible = false;
$scope.weekConfig.visible = true;
$scope.navigatorConfig.selectMode = "week";
};
loadEvents();
function loadEvents() {
// using $timeout to make sure all changes are applied before reading visibleStart() and visibleEnd()
$timeout(function() {
var params = {
start: $scope.week.visibleStart().toString(),
end: $scope.week.visibleEnd().toString()
}
$http.post("backend_events.php", params).success(function(data) {
$scope.events = data;
});
});
}
});
</script>
</div>
<div class="clear">
</div>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
i am still confused why this problem is occurring again and again
You should check the response returned by "backend_events.php". DayPilot expects an array of events in JSON format. If there is any server-side error in the script the response will return an error message instead.
Most likely, there is a problem with permissions on the server side - the PHP script needs read/write permissions for daypilot.sqlite file which is in the application root.
I am making a table
HTML tag
<table id="example" class="display" onload="callData()"></table>
javascript
function dataIsSet(){
var dataSet=[];
syncAjaxCall("POST","getGridData" ,"", "application/json")
.done(
function(data) {
if(data.response.Status==1){
for(i=0;i<data.response.Result.length; i++){
dataSet.push([])
}
for(i=0;i<data.response.Result.length; i++){
dataSet[i].push(data.response.Result[i].interestsName);
dataSet[i].push(data.response.Result[i].subscriberCount);
dataSet[i].push(data.response.Result[i].messageCount);
}
}
else
showMessage("green", data.response.Description, "");
});
if (dataSet[0].length==3)
return dataSet;
}
function callData() {
debugger;
$('#example').DataTable( {
data: dataIsSet(),
columns: [
{ title: "Interest Name" },
{ title: "No of Subscribers" },
{ title: "No of Messages" }
] ,
} );
}
My javascript file
<script src="interests/js/jquery-1.12.0.min.js" type="text/javascript"> </script>
<script src="interests/js/jquery.dataTables.min.js" type="text/javascript"></script>
My css file
<link rel="stylesheet" type="text/css" href="interests/css/jquery.dataTables.min.css"/>
Now I want to make no. of messages column a link where it will take value from interest name.
Just insert them inside of PutItHeretag buddy.
So here's a great example from https://developer.forecast.io/docs/v2
What I want to do and trying is this:
I have a simply webpage whereby I want to display the current forecast and extended forecast.
Here's my Index.html
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html lang="en" class="no-js" ng-app="myApp">
<head>
<title>Weather Forecaster</title>
<meta charset="UTF-8">
<!-- favicon -->
<link rel="shortcut icon" href="images/Oxygen-Icons.org-Oxygen-Status-weather-clear.ico" />
<!-- END favicon -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<link href="css/jquery.jdigiclock.css" rel="stylesheet" type="text/css" />
<link href="css/wx-custom.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery-1.12.2.js"></script>
</head>
<body ng-controller="wxController as ctrlWx">
<div class="container">
<div class="row">
<div class="col-10">
<div id="my-div" ng-model="myiFrame">
<iframe src="http://www.latlong.net/convert-address-to-lat-long.html" id="my-iframe" scrolling="no"></iframe>
</div>
<div id="plugin_container" class="forecast-panel">
<h1>Here's Today's Weather</h1>
<div class="fc forecast-panel1">
<p class="dayTitle">Day 1</p>
</div>
<div class="spacer"></div>
<div class="fc forecast-panel2">
<p class="dayTitle">Day 2</p>
</div>
<div class="spacer"></div>
<div class="fc forecast-panel3">
<p class="dayTitle">Day 3</p>
</div>
<div class="spacer"></div>
<div class="fc forecast-panel4">
<p class="dayTitle">Day 4</p>
</div>
<div class="spacer"></div>
<div class="fc forecast-panel5">
<p class="dayTitle">Day 5</p>
</div>
</div>
</div>
</div>
</div>
<script src="js/angular/angular.min.js" type="text/javascript"></script>
<script src="js/angular/app.js" type="text/javascript"></script>
<script src="js/angular/controller.js" type="text/javascript"></script>
<script src="js/angular/services.js" type="text/javascript"></script>
<script src="js/angular/ang-custom.js" type="text/javascript"></script>
</body>
</html>
Notice the "IFRAME".... the src is this: http://www.latlong.net/convert-address-to-lat-long.html
Now, if you go there, which is pretty cool, you can put ANY address to get the LAT LON for that address:
Here's a screen shot with an example LAT LON from DC... the Whitehouse.
OK, now, my code uses Angular with a simple controller and service...
Here:
APP:
/* global angular */
// Code goes here
var myApp;
myApp = angular.module("myApp", []);
myApp.config(function ($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist(['self', '**']);
});
console.log("Host name is: " + document.location.hostname);
//if (document.location.hostname === "localhost") {
// myApp.constant('URL', '/WeatherForecaster/js/json/');
//} else if (document.location.hostname === "omnimanger.co/wx" || "www.omnimanager.co/wx") {
// myApp.constant('URL', '/js/json/');
//} else {
// myApp.constant('URL', '/wx/js/json/');
//}
myApp.constant("URL", {
//Default LAT/LON for CONCRETE
apiKey: "3bb0f0fe93c92922f0b42f9eabda48d0/",
lat: "48.530031",
lon: ",-121.879460",
country: "us",
uri: "https://api.forecast.io/forecast/"
}).config(function($httpProvider){
delete $httpProvider.defaults.headers.common['X-Requested-With'];
});;
myApp.constant("wx", {
data: {
latitude: 0,
longitude: 0,
currently: {},
minutely: {
summary: "",
icon: "",
data: []
},
hourly: {
summary: "",
icon: "",
data: []
},
daily: {
summary: "",
icon: "",
data: []
},
flags: {
sources: [],
"lamp-stations": [],
"isd-stations": [],
"madis-stations": [],
units: ""
}
}
});
CONTROLLER:
'use strict';
myApp.controller('wxController', function (wxDataService) {
var ctrlWx = this;
//Listen for the Submit (FIND) button on the iFrame
ctrlWx.content = {};
console.log("LAT/LON: ", ctrlWx.latlon);
ctrlWx.fetchWx = function () {
//General Data
wxDataService.getWxData().then(function (result) {
ctrlWx.content = result;
console.log("All Data: ", result);
});
};
ctrlWx.fetchWx();
});
SERVICE:
myApp.factory('wxDataService', function ($http, URL) {
console.log("URL", URL);
//DEFAULT Headers for KEY and AUTH TOKEN
var headers = {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': ['GET', 'POST'],
'Access-Control-Allow-Headers': 'Content-Type',
'Content-Type': 'application/json'
};
var myURL = {
data: {
header: headers,
uri: URL.uri + URL.apiKey + URL.lat + URL.lon
}
};
var getWxData = function () {
return $http.get(myURL)
.success(function (data) {
console.log("SUCCESS!");
console.log("The Weather Data is here: " + data);
return data;
})
.error(function (e) {
console.log("He\'s dead Jim!<br>", e);
return e;
});
};
return {
getWxData: getWxData
};
});
SOLUTION I'm Trying to Achieve:
When the user enters the address and clicks the "FIND" button, which generates the LAT LON, I want to capture that LAT LON inside the IFRAME.
This is what I'm trying to do, but I know I need to make a directive that BINDS the "CLICK" or "SUBMIT" event to the FIND button. What I have below is NOT that; yet.
var latlon = {};
$(function () {
$('#my-iframe').load(function () {
$(this).contents().find("#latlongform, #gadres").live('blur', function (e) {
latlon = {
mylat: $("input[name='lat']").val(),
mylon: $("input[name='lon']").val()
};
if (e) {
console.log("Err: ", e);
return e;
}
});
});
});
GIVENS:
The FORM and the LAT LON are as follows:
<div class="row">
<div class="col-8 graybox">
<form id="latlongform">
<label for="gadres">Address</label>
<input id="gadres" type="text" class="width70" placeholder="Type address here to get lat long" required="">
<button title="Find lat long coordinates" class="button">Find</button><br>
<small>Write city name with country code for better results.</small>
</form>
<div class="row">
<div class="col-6 m2">
<label for="lat">Latitude</label>
<input type="text" name="lat" id="lat" placeholder="lat coordinate">
</div>
<div class="col-6 m2">
<label for="lng">Longitude</label>
<input type="text" name="lng" id="lng" placeholder="long coordinate">
</div>
</div>
</div>
</div>
QUESTION:
How can I get the LAT LON, "AFTER" the user clicks FIND, THEN fire my angular service to inject the CALL to the URL which gets the WEATHER DATA...as described. Here's that WEATHER DATA JSON OBJECT. It uses an API KEY which mine is limited to 1000 uses per day.
If you'd like to see what the result is on the weather API, you need to get a FREE API_KEY.... it gives 1000 hits per day...
Thanks everyone and I hope you can all this this is a VALID question.
Accessing the Forecast.io API with JSONP
The forecast.io website doesn't support CORS (Cross Origin Resource Sharing) for GET operations but it does support JSONP.
Revised Code
var url = myURL.data.uri;
var jsonpURL = url+"?callback=JSON_CALLBACK";
var getWxData = function () {
return $http.jsonp(jsonpURL)
.then(function (response) {
console.log("SUCCESS!");
console.log(response.data);
//return to chain data
return response.data;
})
.catch(function (e) {
console.log("He\'s dead Jim!");
console.log(e);
//throw to chain rejection
throw e;
});
};
Sample Result
LAT: 48.530031
LOG: -121.87946
TIMEZONE: America/Los_Angeles
SUMMARY: Partly Cloudy
TEMP: 56.02
The DEMO on JSFiddle.
Notice that I changed the .success and .error methods to .then and .catch respectively. Those old methods are deprecated and ignore return values.