I want to embed tableau dashboard into webpage using shared url but I get the following output
I used Tableau API
function initViz() { var Ticket = '#ViewBag.Ticket'; var tabSummarySurvey = document.getElementById("tabSummarySurvey"); url = "serverUrl/trusted/Ticket/view/ReportName",
options = {
hideToolbar: true,
width: "100%",
height: "200px",
};
viz = new tableau.Viz(tabSummarySurvey, url, options);
}
$(document).ready(function () {
initViz();
});
Related
Does anyone know of a good tutorial for embedding interactive Tableau dashboards on GitHub Pages?
You can have a look at this webpage
https://tableau.github.io/embedding-playbook/
you can basically embed using Javascript API
HTML
<script src="https://www.example.com/javascripts/api/tableau-2.js"></script>
<div id="tableauViz"></div>
JAVASCRIPT
function initializeViz() {
var placeholderDiv = document.getElementById("tableauViz");
var url = "http://public.tableau.com/views/WorldIndicators/GDPpercapita";
var options = {
width: '600px',
height: '600px',
hideTabs: true,
hideToolbar: true,
};
viz = new tableau.Viz(placeholderDiv, url, options);
}
I have two buttons, the first one for browse image from gallery and the second one for taking photo. I'm using cordova camera plugin for two cases.
After choosing an image, I want to crop it before to send to server using cordova file transfer plugin. I've tried to use several plugins such as jr-crop, angular-image-crop, ngImgCrop. The problem is that plugins returns a base64 image, but I want to get the image url (not dataUrl). Any help please !
My solution (#egycode) :
$scope.image_gallery = function() {
var options = {
quality: 100,
correctOrientation: true,
sourceType: 0
};
$cordovaCamera.getPicture(options).then(function(data) {
console.log(data);
$scope.crop(data);
console.log('camera data image_gallery: ' + angular.toJson(data));
}, function(error) {
console.log('camera error image_gallery: ' + angular.toJson(error));
});
}
$scope.crop = function(url) {
$jrCrop.crop({
url: url,
width: 261,
height: 362
}).then(function(canvas) {
console.log(canvas);
var image = canvas.toDataURL();
//var image is the result, you can show it using : $scope.pictureUrl = image;
}, function() {
// User canceled or couldn't load image.
});
}
I am want to create a VSTS Extension for TFS 2015 Update 3 and I want to start slow. I want to create a custom action that shows the Id and the Title of the current Work Item in one pop up window.
I have been reading the tutorials but I still don't get it.
I used this example from GitHub:
var showPropertiesMenuProvider = (function () {
"use strict";
return {
showPropertiesInDialog: function(properties, title) {
VSS.getService("ms.vss-web.dialog-service").then(function (dialogSvc) {
var extInfo = VSS.getExtensionContext();
var contibution = VSS.getContribution();
var dialogOptions = {
title: title || "Properties",
width: 800,
height: 600,
buttons: null
};
var contributionConfig = {
properties: properties
};
dialogSvc.openDialog(extInfo.publisherId + "." + extInfo.extensionId + "." + "contextForm", dialogOptions, contributionConfig);
});
},
execute: function(actionContext) {
this.showPropertiesInDialog(actionContext);
}
};
}());
VSS.register("showProperties", function (context) {
return showPropertiesMenuProvider;
});
which gives me a lot of information but I still can't extract the data I need.
Any ideas?
Thanks in advance!
I've red some topics on the subject (e.g: Uploading image to Firebase Storage from Cordova app) but didn't find my answer...
I'm working on a IONIC project with the implementation of the ngCordova camera plugin to take picture and get pic from the librairy.
So I got the result as a image URI and I want to upload it in Firebase storage (as file or Blob).
Here is my code :
$scope.fromCamera = function() {
$ionicPlatform.ready(function() {
var options = {
quality: 75,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 300,
targetHeight: 300,
saveToPhotoAlbum: true e
};
$cordovaCamera.getPicture(options).then(function(imageURI) {
window.resolveLocalFileSystemURL(imageURI, function (fileEntry) {
fileEntry.file(function (file) {
var reader = new FileReader();
reader.onloadend = function () {
// This blob object can be saved to firebase
var blob = new Blob([new Uint8Array(this.result)], { type: "image/jpeg" });
// Create the storage ref
var ref = storageRef.child('images/test');
// Upload the file
uploadPhoto(blob, ref);
};
reader.readAsArrayBuffer(file);
});
}, function (error) {
console.log(error)
});
});
});
};
I read the file and convert it into a Blob before uploading it into firebase. And I got an 'Encoding error' telling me "A URI supplied to the API was malformed, or the resulting Data URL has exceeded the URL length limitations for Data URLs."
I'm running it an chrome browser with the Cordova Mocks extension.
Any help is welcome!
Thanks
uploadPhoto() is my function to upload the file on firebase storage (and save the URL in firebase database)
var storageRef = Firebase.storageRef();
var databaseRef = Firebase.databaseRef();
var uploadPhoto = function(file, ref) {
var task = ref.put(file);
// Update progress bar
task.on('state_changed', function(snapshot){
// nothing
}, function(error) {
// Handle unsuccessful uploads
}, function() {
// Handle successful uploads on complete
$scope.downloadURL = task.snapshot.downloadURL;
$scope.actualKey = databaseRef.child('posts').push().key;
databaseRef.child('posts/' + $scope.actualKey).update({
url : $scope.downloadURL,
id : $scope.actualKey,
time : firebase.database.ServerValue.TIMESTAMP,
});
}
);
}
try changing...
[new Uint8Array(this.result)]
to just this
[this.result]
alternate approach using $cordovaFile
var fileName = imageURI.replace(/^.*[\\\/]/, '');
$cordovaFile.readAsArrayBuffer(cordova.file.tempDirectory, fileName)
.then(function (success) {
// success - get blob data
var imageBlob = new Blob([success], { type: "image/jpeg" });
// Create the storage ref
var ref = storageRef.child('images/test');
// Upload the file
uploadPhoto(imageBlob, ref);
}, function (error) {
// error
});
Instead of getting the path from the URI, in the code, I assume the following...
// modify the image path when on Android
if ($ionicPlatform.is("android")) {
path = cordova.file.cacheDirectory
} else {
path = cordova.file.tempDirectory
}
feel free to parse the path to get the directory
I am trying show a portlet (that previously I have created) from another one, but the pop-up is empty.
First, I create the renderURL:
<liferay-portlet:renderURL var="testPopupURL" portletName="<%=rule.getBannerPortletId() %>" windowState="<%=LiferayWindowState.POP_UP.toString() %>"></liferay-portlet:renderURL>
and I do the link:
<aui:a href="#" onClick="showPopup('${testPopupURL}')">View</aui:a>
and this is the function showPopup:
function showPopup(url){
console.log("En el showPopup ");
AUI().ready('aui-dialog', 'aui-io', 'event', 'event-custom', function(A) {
window.myDialog = new A.Dialog({
title: 'Banner',
width: 640,
centered: true
}).plug(A.Plugin.DialogIframe, {
uri: url.toString(),
iframeCssClass: 'dialog-iframe'
}).render();
});
}
I put in the liferay-portlet.xml (of the portlet I want open in the pop-up) this:
<add-default-resource>true</add-default-resource>
The portlet is instanciable and the bannerPortletId is the porletId.
Any idea?
Thanks
Finally I get display the portlet. I created the url with javascript:
var url;
function createRenderURL(portletId) {
AUI().ready('liferay-portlet-url', function(A) {
var renderURL = Liferay.PortletURL.createRenderURL();
renderURL.setName("Banner");
renderURL .setPortletMode("edit");
renderURL .setWindowState("pop_up");
renderURL.setPortletId(portletId);
url = renderURL.toString();
});
}
The code to show de pop-up is the same, but I pass the portletId like a parameter and call the function createRenderURL.
var url;
function createRenderURL(portletId) {
console.log("en el createRender");
AUI().ready('liferay-portlet-url', function(A) {
var renderURL = Liferay.PortletURL.createRenderURL();
renderURL.setName("Banner");
renderURL .setPortletMode("edit");
renderURL .setWindowState("pop_up");
renderURL.setPortletId(portletId);
console.log(renderURL);
url = renderURL.toString();
});
}
I hope this can be useful for someone.