I need to display Analytics dashboard on my web site. Like export it from google's website to mine.
I already used Reporting API V4
But I only get the login button.
as you can see, the dashboard from analytics are not displayed.
I need to do it with javascript or C#.
My code (based on this link ):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Analytics Reporting </title>
<meta name="google-signin-client_id" content="472734728686-21tqq751d9mdpkopnjmc1dnctf9644qc.apps.googleusercontent.com">
<meta name="google-signin-scope" content="https://www.googleapis.com/auth/analytics.readonly">
</head>
<body>
<h1> Analytics Reporting</h1>
<p>
<div class="g-signin2" data-onsuccess="queryReports"></div>
</p>
<textarea cols="80" rows="20" id="query-output"></textarea>
<script>
var VIEW_ID = '130082935';
function queryReports() {
gapi.client.request({
path: '/v4/reports:batchGet',
root: 'https://analyticsreporting.googleapis.com/',
method: 'POST',
body: {
reportRequests: [
{
viewId: VIEW_ID,
dateRanges: [
{
startDate: '7daysAgo',
endDate: 'today'
}
],
metrics: [
{
expression: 'ga:sessions'
}
]
}
]
}
}).then(displayResults, console.error.bind(console));
}
function displayResults(response) {
var formattedJson = JSON.stringify(response.result, null, 2);
document.getElementById('query-output').value = formattedJson;
}
</script>
<script src="https://apis.google.com/js/client:platform.js"></script>
</body>
</html>
I would suggest you look at Google Analytics Embed API. It is much easier from a standpoint based on my experience.
Related
I'm trying to use Mapbox Static API through their Javascript SDK. I want to upload an external geojson source to my map. I can't figure out a way to do it. I tried following a Mapbox tutorial called Using style parameters with Static Images API.
Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Demo: Static images with style parameters</title>
<script src="https://unpkg.com/#mapbox/mapbox-sdk/umd/mapbox-sdk.min.js"></script>
<style>
.container {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<img id="traffic" src="" alt="Mapbox traffic map" />
</div>
</body>
<script>
const mapboxClient = mapboxSdk({ accessToken: 'API TOKEN' });
const addLayerStyle = {
'id': 'traffic',
'type': 'line',
'source': {
'type': 'geojson',
//'url': 'mapbox://mapbox.mapbox-traffic-v1'
//'url': 'https://raw.githubusercontent.com/zaynaib/chicago-elections/main/election_leaflet/data/chicago-wards.geojson'
},
'source-layer': 'traffic'
};
const request = mapboxClient.static.getStaticImage({
ownerId: 'mapbox',
styleId: 'light-v10',
width: 500,
height: 350,
position: {
coordinates: [-87.6298, 41.8781],
zoom: 12
},
addlayer: addLayerStyle,
before_layer: 'road-label'
});
const staticImageUrl = request.url();
document.getElementById('traffic').src = staticImageUrl;
</script>
</html>
From the docs, "source.url must be a mapbox:// tileset URL, and must be accessible to the access token used in the request. source.type must be either raster or vector"
One solution would be to convert your data to a vector tilest using Tippecanoe then upload your vector file in Mapbox Studio to generate a link that starts with mapbox://
Another option would be to add the GeoJSON to the image as an overlay
I'm trying to get the MiradorImageTools plugin to work with mirador image viewer.
I'm using a very basic html page to test:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mirador-Test</title>
</head>
<body>
<h1>Title</h1>
<div>
<p>blah</p>
<div id="my-mirador" />
<script src="https://unpkg.com/mirador#latest/dist/mirador.min.js"></script>
<script src="https://unpkg.com/mirador-image-tools#0.10.0/umd/mirador-image-tools.min.js"></script>
<script type="text/javascript">
const config = {
"id": "my-mirador",
"manifests": {
"https://iiif.lib.harvard.edu/manifests/drs:48309543": {
"provider": "Harvard University"
}
},
"windows": [
{
"imageToolsEnabled": "true",
"manifestId": "https://iiif.lib.harvard.edu/manifests/drs:48309543",
}
]
};
// var mirador = Mirador.viewer(config);
var mirador = Mirador.viewer(config, [MiradorImageTools]); // <-- Error!
</script>
</div>
</body>
</html>
This gives me the following error:
Uncaught ReferenceError: MiradorImageTools is not defined
<anonymous> ./test3.html:36
test3.html:36:45
If I leave the plugin out, replacing the problematic line with the commented-out line above it, the whole thing works and I get mirador showing as it should.
So clearly I'm referencing the plugin wrong. But what would be the right way to do it?
To use MiradorImageTools, and any other Mirador plugin (as of v3.0.0), you will need to import the packages and create a build of the project using a tool like Webpack or parcel.
An example of this type of setup can be seen here: https://github.com/projectmirador/mirador-integration that includes examples using both Webpack and parcel.
./src/index.js
import Mirador from 'mirador/dist/es/src/index';
import { miradorImageToolsPlugin } from 'mirador-image-tools';
const config = {
id: 'demo',
windows: [{
imageToolsEnabled: true,
imageToolsOpen: true,
manifestId: 'https://purl.stanford.edu/sn904cj3429/iiif/manifest',
}],
theme: {
palette: {
primary: {
main: '#1967d2',
},
},
},
};
Mirador.viewer(config, [
...miradorImageToolsPlugin,
]);
See the README there for more information about how to build for the specific tools.
I want to integrate Shutterstock Image Editor in my simple HTML app. So I make a developer account in Shutterstock and create my API Key. Below is my API:
Now I am using above API Key (Consumer Key) in my HTML as describe here. Below is my HTML file code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="https://s.picdn.net/editor/image/assets/integration.js"></script>
<script>
window.editorInstance = window.Editor({
apiKey: 'e1818-c5e61-74ce1-7ee31-6c7f8-7fb6d',
language: 'en',
image: 'https://www2.shutterstock.com/blog/wp-content/uploads/sites/5/2015/05/volcano-header-1440x960.jpg',
excludeFeatures: ['filters'],
initialPanel: 'text',
logo: true,
logoUrl: 'https://www2.shutterstock.com/base/public/images/logos/logo-shutterstock-de64a370ef.png',
primaryActionText: 'Save and close',
container: document.querySelector('#editor'),
canvas: {
height: 500,
width: 500,
fill: 'rgb(62, 69, 79)'
},
presets: [{
name: 'Icon',
height: 128,
width: 128
}, {
name: 'Book Cover',
height: 1600,
width: 2400
}],
onPrimaryAction: function() {
window.editorInstance.getBase64({
format: 'jpg',
quality: .91
}).then(function(base64) {
// Handle base64 image data
window.editorInstance.hide();
});
}
});
// Launch instance of Editor
window.editorInstance.launch().then(function(editor) {
// Actions
}).catch(function(err) {
// Handle error
});
</script>
After running my above HTML page Editor doesn't render. Below is my console log showing:
Failed to load resource: the server responded with a status of 403 (Forbidden)
and below screen is showing.
Also I visit Fiddle to integrate editor in HTML but this API is using JSFiddle Client. My question is how I implement Shutterstock photo editor in my HTML app. Please let me know what I'm doing wrong in my above code.
You need to contact api [at] shutterstock.com in order to access the Editor - they'll need to manually enable your api key for it.
Hi all
I am new for google analytics embed api. And I am trying to use access token in order to get data without user consent. I've got a Key for browser applications in google developer console. But I couldn't figure out how to use it. Here is my code. It doesn't work (I've set the reference to any reference allowed):
Thanks.
<!DOCTYPE html>
<html>
<head>
<title>Embed API Demo</title>
</head>
<body>
<!-- Step 1: Create the containing elements. -->
<section id="auth-button"></section>
<section id="view-selector"></section>
<section id="timeline"></section>
<!-- Step 2: Load the library. -->
<script>
(function(w,d,s,g,js,fjs){
g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(cb){this.q.push(cb)}};
js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
js.src='https://apis.google.com/js/platform.js';
fjs.parentNode.insertBefore(js,fjs);js.onload=function(){g.load('analytics')};
}(window,document,'script'));
</script>
<script>
gapi.analytics.ready(function() {
// Step 3: Authorize the user.
gapi.analytics.auth.authorize({
serverAuth: {
access_token: 'XXXXX' // do not share sensible data
}
});
// Step 4: Create the view selector.
var viewSelector = new gapi.analytics.ViewSelector({
container: 'view-selector'
});
// Step 5: Create the timeline chart.
var timeline = new gapi.analytics.googleCharts.DataChart({
reportType: 'ga',
query: {
'dimensions': 'ga:date',
'metrics': 'ga:sessions',
'start-date': '30daysAgo',
'end-date': 'yesterday',
},
chart: {
type: 'LINE',
container: 'timeline'
}
});
// Step 6: Hook up the components to work together.
gapi.analytics.auth.on('success', function(response) {
viewSelector.execute();
});
viewSelector.on('change', function(ids) {
var newIds = {
query: {
ids: ids
}
}
timeline.set(newIds).execute();
});
});
</script>
</body>
</html>
I'm dealing with a very annoying issue regarding arcGIS maps service localization.
According to their API I've added the following JS object:
dojoConfig = {
locale: "fr",
parseOnLoad: true
};
and added the following item to the require array:
"dojo/i18n!myApp/nls/jsapi"
When I've made this additions the maps aren't working anymore.
This is my full code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<script src="http://js.arcgis.com/3.11/"></script>
</head>
<body>
<div id="mapDiv"></div>
</body>
</html>
JS
dojoConfig = {
locale: "fr",
parseOnLoad: true
};
var map;
require([
"esri/map",
"dojo/i18n!myApp/nls/jsapi",
"dojo/domReady!"
], function(Map) {
map = new Map("mapDiv", {
center: [56.049, 38.485],
zoom: 3,
basemap: "streets"
});
});
DEMO
You probably don't have a file called myApp/nls/jsapi.js in your application, so require can't find it and can't run your function that initializes the map.
As the documentation says:
After creating the resource bundle for the new locale, load the resource module
You should read the documentation for dojo/i18n. It makes more clear what you need to do.