I am trying to embed an Altair data visualization I created in Python, into an html document. I have followed the instructions on https://altair-viz.github.io/user_guide/saving_charts.html, specifically the json/VegaEmbed method.
The following is my code for the html so far:
<!DOCTYPE html>
<html>
<head>
<style>
.error {
color: red;
}
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega#5"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega-lite#5"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega-embed#6"></script>
</head>
<body>
<h1>Altair Embed Demo</h1>
<div id="vis"></div>
<script>
vegaEmbed('#vis', 'C:/Users/myName/chart.json');
</script>
</body>
</html>
As can be seen here, the Altair visualization is saved as chart.json locally, and I am calling the vegaEmbed module on it.
However, the issue I'm having is that the resulting page does not output the Altair visualization. My path is correct, I have imported the correct module, and I have used vegaEmbed() properly (I think). Could someone give me guidance on this issue if they have had experience with Vega/Altair? Thank you.
I think you're encountering a security issue with your browser not allowing you to access local files. If you use a URL to a file hosted online, it will work:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vega#5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite#5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed#6"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
vegaEmbed("#vis", "https://raw.githubusercontent.com/vega/vega-lite/next/examples/specs/bar.vl.json");
</script>
</body>
</html>
There are some suggestions here on how to access local files in the browser, which you can explore to find the most appropriate solution for you Loading local JSON file.
You could also embed the vega spec directly instead of saving it as a separate file by inserting something like the following into the document (as in the documentation page you linked):
var spec = {
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"config": {
"view": {
"continuousHeight": 300,
"continuousWidth": 400
}
},
"data": {
"url": "https://vega.github.io/vega-datasets/data/cars.json"
},
"encoding": {
"color": {
"field": "Origin",
"type": "nominal"
},
"x": {
"field": "Horsepower",
"type": "quantitative"
},
"y": {
"field": "Miles_per_Gallon",
"type": "quantitative"
}
},
"mark": "point"
};
Related
i want to retrieve json data from a file in a local folder using javascript.
i have the json data like below defined in the folder api/data.json
{
"title": "title",
"lists": [
{
"id": 1,
"title": "title1",
"items": [
{
"id": 1,
"title": "item_title_1",
},
{
"id": 2,
"title": "item_title_2",
},
],
},
{
"id": 2,
"title": "title2",
"items": [
{
"id": 2,
"title": "item_title_2",
},
{
"id": 3,
"title": "item_title_3",
},
],
}
]
}
i want to fetch this data on application load so i call fetchData method on load in body tag like so
index.html
<body onload="fetchData()">
<script src="main.js"></script>
</body>
in the main.js file defined fetchData like so
function fetchData() {
const data = fetch('api/data.json');
console.log('data', data);
}
but this throws error fetchData() is not defined. not sure where the problem is. i am new to javascript and learning it. could someone help me with this. thanks.
EDIT
based on answers provided i have tried below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="src/scripts.js"></script>
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="src/styles.css">
</head>
<body onload="fetchData()">
<h2>here i am </h2>
</body>
</html>
in the scripts.js file which is in src folder i have defined fetchData method
function fetchData() {
console.log('data');
}
but still gives me fetchData undefined.
include main.js before <body> tag you're loading the function after its called
Try this
<html>
<head>
<script src="main.js"></script>
</head>
<body onload="fetchData()">
</body>
</html>
<html>
<head>
<script src="main.js"> </script>
</head>
<body onload="fetchData()">
</body>
</html>
And if the json data doesn't print out on the console. Then , Run your index.html on localhost.
And you don't need to include it in index.html to use javascript.
You can use 'node js' to run js files without using browser. It is much easier in node than linking the script file in html
I have developed a .NET Core 3.1 and Angular 9 web app in VSCode.
I have set up a launch.json file that serves the entire application (.NET Core and Angular 9) without a hitch.
I use the below angular.json settings when I run the ng build --prod to build the Angular 9 app and write it to the .NET Core wwwroot.
angular.json (extract)
"options": {
"outputPath": "../TargetPro.API/wwwroot",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets",
"src/manifest.webmanifest"
],
"styles": [
"./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
"src/styles.css"
],
"scripts": [
"./node_modules/alertifyjs/build/alertify.min.js"
]
}
I then run the application using dotnet run to serve the application on localhost:5000. The same day it all worked 100% and then after adding 2 components I am served with a blank page. I have removed the two components I added without having any effect. I still get a blank page with the console error messages as displayed in the image below.
Console error messages
For example, one of the error messages read "Failed to load resource: the server responded with a status of 400 (Bad Request)" and the file name is "main-es2015.9ddbf650cf0e7f09b565.js".
I have verified that the particular files exist at the path. I have also opened all the files and they all have contents in it. I copied the contents and verified (using an online validator) that the JavaScript in it is valid.
I also double-clicked on the file name as displayed in the console error and I am presented with the following .json formatted error message.
.json formatted error message
{
"errors": {
"dataanalysisId": [
"The value 'main-es2015.9ddbf650cf0e7f09b565.js' is not valid."
]
},
"type": "https://tools.ietf.org/html/rfc7231#section-6.5.1",
"title": "One or more validation errors occurred.",
"status": 400,
"traceId": "|82e44613-41a1b227ab4a5264."
}
What stands out to me is that One or more validation errors occurred and the The value 'main-es2015.9ddbf650cf0e7f09b565.js' is not valid.
What about "main-es2015.9ddbf650cf0e7f09b565.js" is not valid?
I also have double-checked the generated index.html file and the particular JavaScript file is referenced correctly.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="max-age=0, must-revalidate"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0" />
<title>TargetPro</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="/assets/images/NewBigenLogo.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="manifest" href="manifest.webmanifest">
<link rel="stylesheet" href="assets/custom.css">
<meta name="theme-color" content="#1976d2">
<link rel="stylesheet" href="styles.7a6852d4635a483ded1e.css">
</head>
<body class="body">
<app-root></app-root>
<!-- <noscript>Please enable JavaScript to continue using this application.</noscript> -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="runtime-es2015.0dae8cbc97194c7caed4.js" type="module"></script>
<script src="runtime-es5.0dae8cbc97194c7caed4.js" nomodule defer></script>
<script src="polyfills-es5.177e85a9724683782539.js" nomodule defer></script>
<script src="polyfills-es2015.f332a089ad1600448873.js" type="module"></script>
<script src="scripts.e3f1622784b881f14c87.js" defer></script>
<script src="main-es2015.9ddbf650cf0e7f09b565.js" type="module"></script>
<script src="main-es5.9ddbf650cf0e7f09b565.js" nomodule defer></script>
</body>
</html>
I have also looked in the ngsw.json file to verify that the "main-es2015.9ddbf650cf0e7f09b565.js" file is included.
ngsw.json (extract)
{
"name": "app",
"installMode": "prefetch",
"updateMode": "prefetch",
"urls": [
"/favicon.ico",
"/index.html",
"/main-es2015.9ddbf650cf0e7f09b565.js",
"/main-es5.9ddbf650cf0e7f09b565.js",
"/manifest.webmanifest",
"/polyfills-es2015.f332a089ad1600448873.js",
"/polyfills-es5.177e85a9724683782539.js",
"/runtime-es2015.0dae8cbc97194c7caed4.js",
"/runtime-es5.0dae8cbc97194c7caed4.js",
"/scripts.e3f1622784b881f14c87.js",
"/styles.7a6852d4635a483ded1e.css"
],
"patterns": []
}
and
ngsw.json (extract)
"hashTable": {
"/assets/custom.css": "e81137cd383f52c600f10dabb84bd1484abc1181",
"/assets/icons/icon-128x128.png": "dae3b6ed49bdaf4327b92531d4b5b4a5d30c7532",
"/assets/icons/icon-144x144.png": "b0bd89982e08f9bd2b642928f5391915b74799a7",
"/assets/icons/icon-152x152.png": "7479a9477815dfd9668d60f8b3b2fba709b91310",
"/assets/icons/icon-192x192.png": "1abd80d431a237a853ce38147d8c63752f10933b",
"/assets/icons/icon-384x384.png": "329749cd6393768d3131ed6304c136b1ca05f2fd",
"/assets/icons/icon-512x512.png": "559d9c4318b45a1f2b10596bbb4c960fe521dbcc",
"/assets/icons/icon-72x72.png": "c457e56089a36952cd67156f9996bc4ce54a5ed9",
"/assets/icons/icon-96x96.png": "3914125a4b445bf111c5627875fc190f560daa41",
"/assets/images/NewBigenLogo.ico": "1971185fbe08c46b54eb2bb81d5232e8951084d3",
"/assets/images/TargetProLogo02.jpg": "df42312cbae197612480d8612796527459609d6d",
"/assets/images/TargetProLogo02Transparent.png": "52e5ec097ff8107d5bbacd8f28e3ed6c46c91911",
"/assets/images/bigen_horisontal_white_tagline.png": "9551491c578290df06600c6580c01bb21d71ade2",
"/fa-brands-400.1776173e3b1af55eb455.ttf": "29f59b4eecc72052d9110a5d4030a10ad9bf73d7",
"/fa-brands-400.28d8b8fcc41c3b7134ff.woff": "fddb95d7a0f48d2bf90a5ee3095e8264dca18053",
"/fa-brands-400.37913cdf7cb0571dfac0.woff2": "62584b9868428fd75af3fc5ee2f9918dda428be5",
"/fa-brands-400.63b566233f163d538cce.svg": "99dff0739882276ad6c434d73228efc7971b0a66",
"/fa-brands-400.bfcc3384b8a317dc5de3.eot": "40c8f2a0dc154160fde50e0c27f694f12c7b1636",
"/fa-regular-400.0c6f12b9eaa2ad444a6b.eot": "3306178c90d9df939d2a5eabf533ba3650fbe80e",
"/fa-regular-400.1b536b782d09dd59dda8.svg": "51afca56e309df6fdc56b53fa6a7d3ce64826490",
"/fa-regular-400.c3c2ab4f63b8d9973c78.woff2": "5e4d45052f43e55aaad7f14d13280215e39aa45b",
"/fa-regular-400.c9c57c0f1f4eb34dbf57.ttf": "517a3b41c1e01b65898b5f1074434d43a361a54f",
"/fa-regular-400.fcaa6c135683a3fa1b50.woff": "da17a9f1dcae379c8ba20f1089059c202216cba7",
"/fa-solid-900.22aa6d4357cf74671bc4.woff": "f13e252f8a51a5279fd21e26ada0bd2f55bcefd8",
"/fa-solid-900.3e2bc2ffd29f01066d23.svg": "5501fb62e20a89bdd89bf3fa147ca4dbcd2fc67f",
"/fa-solid-900.4055b0575d40bfb3c7e8.woff2": "6290834672aba86d5b6c1c73b30b57c9c53996f7",
"/fa-solid-900.a480ec972cb6bce30533.ttf": "874c650701d0cbfb8f1de48a496dabed3bbf22e6",
"/fa-solid-900.dfaa060a451d978c2565.eot": "96a5637429426764ea9b28bf4d1eb55ae10de57e",
"/favicon.ico": "22f6a4a3bcaafafb0254e0f2fa4ceb89e505e8b2",
"/index.html": "3097d526717744c5c5546bb7e6bd6d8c568b75c7",
"/main-es2015.9ddbf650cf0e7f09b565.js": "0fc7b0b2cc5f345d48a4b49d131facbc3129748d",
"/main-es5.9ddbf650cf0e7f09b565.js": "23296d15033f49a1cbe2dbc68423698d2d685c9b",
"/manifest.webmanifest": "2b9a2f8c92d7633e5cf15f0e60412ba827c7cb02",
"/polyfills-es2015.f332a089ad1600448873.js": "72ad4ccc0a3916ae4598199447cdeadd6d380570",
"/polyfills-es5.177e85a9724683782539.js": "8aa26ea87b9958c6bd13b7c257c0e9940438e684",
"/runtime-es2015.0dae8cbc97194c7caed4.js": "a9aafcf49f49145093fc831efd9b8e2f6c71bb9c",
"/runtime-es5.0dae8cbc97194c7caed4.js": "a9aafcf49f49145093fc831efd9b8e2f6c71bb9c",
"/scripts.e3f1622784b881f14c87.js": "e6b3c356e5949695046c95858db71a303e633dd1",
"/styles.7a6852d4635a483ded1e.css": "368e886c0e50a602803bedcee7c7bbb8c0583d5d"
}
I have included the headers below.
Headers
When I look at the headers of "main-es2015.9ddbf650cf0e7f09b565.js" request, I have noticed that the response headers return a application/problem+json; charset=utf-8 content type, which is not correct. The "main-es2015.9ddbf650cf0e7f09b565.js" file is a JavaScript file. My guess is that it has more to do with the return .json formatted error message than the JavaScript file itself.
I will appreciate any help and assistance. I think I am missing something that is glaringly obvious and it may have been starting right in the face. I have spent so much time trying to get to the bottom of this that I may be missing the obvious solution.
Edit - Solution
The solution for getting the application displayed was in the .NET Core startup.cs file. Thank you to Ronny for pointing me in the right direction.
In the Configure method I used app.UseEndpoints to include a mapping fallback to a controller which returns a PhysicalFile in wwwwroot called index.html. I commented this middleware out and ran dotnet run again and this time I was able to view the application as expected.
It is included in the startup.cs code extract of the Configure method below. It is the commented code.
startup.cs (extract)
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.Use(async (c, next) =>
{
if (c.Request.Path == "/")
{
c.Response.Headers.Add("Cache-Control", "no-store,no-cache");
c.Response.Headers.Add("Pragma", "no-cache");
}
await next();
});
app.UseRouting();
app.UseAuthentication();
app.UseAuthorization();
app.UseCors(builder =>
{
AllowedToAllowWildcardSubdomains();
builder.AllowAnyOrigin();
builder.AllowAnyMethod();
builder.AllowAnyHeader();
});
app.UseDefaultFiles();
app.UseStaticFiles();
app.UseMvc();
// app.UseEndpoints(endpoints =>
// {
// endpoints.MapControllers();
// endpoints.MapFallbackToController("Index", "Fallback");
// });
}
It seems to me that the problem is that the .NET Core rounting is interfering with the angular routing. Its hard to tell because I dont know how you configured your startup, but try adding this middleware in the configure() method of the startup.cs file, after the authorization/authentication middlewares, and before the endpoints middleware:
app.MapWhen(
context =>
{
var path = context.Request.Path.Value.ToLower();
return path.Contains("/") &&
!path.Contains(".js") &&
!path.Contains("/api/") &&
!path.Contains("/assets") &&
!path.Contains(".ico");
},
branch =>
{
branch.Use((context, next) =>
{
context.Request.Path = new PathString("/index.html");
return next();
});
branch.UseStaticFiles();
});
index.html
<html>
<head>
</head>
<body>
<script src="js/main.js"></script>
<script src="js/vfs_fonts.js"></script>
</body>
</html>
This main.js has pdfMake library.
createPdf.js
var pdfContent = function() {
content: [
{ text: 'This paragraph will have a bigger font', fontSize: 15 }
],
defaultStyle: {
italics: true,
font: 'openSans'
}
};
pdfMake.fonts = {
openSans: {
normal: 'OpenSans-Light.ttf',
bold: 'OpenSans-Bold.ttf',
italics: 'OpenSans-Italic.ttf',
bolditalics: 'OpenSans-BoldItalic.ttf'
}
};
pdfMake.createPdf(pdfContent).download();
This createPdf.js file is linked with pdfMake library. vfs_fonts.js file generated using grunt dump_dir task with openSans font file source. I'm getting the above error! Can any one help me? thank you.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m,sap.ui.table,sap.ui.commons"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_mvi" theme -->
<script>
var bFlag;
sap.ui.localResources("views");
sap.ui.localResources("i18n");
sap.ui.localResources("utils");
jQuery.sap.registerModulePath('Application', 'Application');
jQuery.sap.require("Application");
var oApp = new Application({
root : "content"
});
</script>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
I am developing a sapui5 application in which I have a split app,now on the detail page in the toolbar I have a button called open in new window.So I want to open this particular detail page(only detail page) in a new tab on clicking this button.
Can anyone help me on this as in how to go about it?
Thanks in advance.
Regards,
Shalini
Use the SAP's Router API.
Basically, define your router, routes, pattern and targets objects in your manifest.json file:
"sap.ui5": {
"rootView": {
"viewName": "path.to.view.name",
"type": "XML",
"async": true
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "path.to.view",
"controlId": "init",
"controlAggregation": "pages",
"async": true
},
"routes": {
"init": {
"pattern": "",
"target": "init",
"viewId": "vid_init"
},
"target_name": {
"pattern": "url_parameter",
"target": "target_name",
"viewId": "vid_view_name"
}
},
"targets": {
"target_name": {
"viewName": "view_name",
"transition": "show"
}
}
}
}
Assign a press event handler in your button's properties:
<Button id="myButton" press=".onOpenNewWindow" />
In your view's controller write a code to handle your event. Example:
onOpenNewWindow: funtion(oEvent){
sap.ui.require([
"sap/m/library"
], sapMLib => sapMLib.URLHelper.redirect("#/url_parameter", /*new window*/true));
},
Resources
API Reference: sap.m.URLHelper.redirect
Documentation: Routing and Navigation
Basically, you can open a new tab in JavaScript like this:
window.open("<yourURL>", _blank');
For your SAPUI5 Application you simply have to provide an additional .html file at a dedicated URL which loads your View/Controller. If you want to pass information from the Master/Detail application to the new tab you could add URL parameters.
As I can see in your edited question you´re using an Application. I don´t know the further structure (especially what your Application.js does) but in a separate .html a very simple solution could look like this:
<script>
sap.ui.localResources("views");
sap.ui.localResources("i18n");
sap.ui.localResources("utils");
sap.ui.jsview("name.of.your.detailView").placeAt("content");
</script>
If you want to reuse your Application.js file you can extend it and pass a simple parameter which tells to display only one View.
One more thing: I guess you´re using sap.m.SplitApp somewhere in your application. To display only the DetailView you should use sap.m.App instead at that point.
I am trying to use the new chrome notifications, nothing fancy just trying to a basic one to work, but i keep getting
Uncaught TypeError: Cannot call method 'create' of undefined
I think its the manifest but I'm not sure what I'm doing wrong, anyone have any ideas?
Thanks in advance
Javascript
var id= 0;
var opt={
type:"basic",
title:"Hello",
message:"world",
iconUrl:"Google.png"
}
function creationCallback(id) {
console.log("Succesfully created " + id + " notification");
}
function createnot()
{
chrome.notifications.create(id, opt, creationCallback);
id++;
}
manifest
{
"name": "Notification API Sample",
"description": "Tests the notification API",
"manifest_version" : 2,
"version" : "0.1",
"permissions" : [
"notifications"
]
}
HTML
<html>
<head>
<script type="text/javascript" src="note.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input type="button" value="meh" onclick="createnot()"/>
<footer>
</footer>
</body>
</html>
{
"name": "Notification API Sample",
"description": "Tests the notification API",
"manifest_version" : 2,
"version" : "0.1",
"permissions" : [
"notifications",
"http://*/*" // add this if your html file is a webpage not a page in extension.
],
"background": {
"scripts": ["background.js"],
"persistent": false // add this line if you use event page.
}
}
Your manifest.json needs the information of "background" like this.
Also, if your html page is a webpage not a page in extension itself,
You need to give a permission for it.
var id = "0";
It may not make much difference but,I think notification id needs to be a string.
chrome.notifications.create(string notificationId, NotificationOptions options, function callback)
+++Edited+++
foo.js
$(function(){
var test = $("#test");
test.click(function () {
chrome.notifications.create(
'id1',{
type:"basic",
title:"Hello",
message:"world",
iconUrl:"Google.png"
},
function() {
}
);
});
});
foo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.js"></script>
<script src="options.js"></script>
</head>
<body>
<h1 id="test">This is a test.</h1>
</body>
</html>
manifest.json
{
"name": "Notification API Sample",
"description": "Tests the notification API",
"manifest_version" : 2,
"version" : "0.1",
"permissions" : [
"notifications"
]
}
I think this is the simplest way if the html page is in extension.
You need these files. You don't even need background.js for this.
1.manifest.json
2.foo.html
3.foo.js