I'm having a problem trying to load a graph form json using JointJS. I know the theory (https://resources.jointjs.com/tutorial/serialization), however, I still do not know how to show a graph.
This is my html file:
<!-- JointJS libraries omitted for space -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript">
function read_json() {
$.getJSON("/jointsjdemo/demo.json", function(data) {
var graph = new joint.dia.Graph;
graph.fromJSON(data);
var paper = new joint.dia.Paper({
el: document.getElementById('myholder'),
model: graph,
width: 600,
height: 100,
gridSize: 1
});
});
}
read_json();
</script>
And this is my json file:
{"cells":[{"type":"standard.Rectangle","position":{"x":100,"y":30},"size":{"width":100,"height":40},"angle":0,"id":"42a7f123-1f0d-4d06-b49e-8cbcbbb17e23","z":1,"attrs":{"body":{"fill":"blue"},"label":{"fill":"white","text":"Hello"}}},{"type":"standard.Rectangle","position":{"x":400,"y":30},"size":{"width":100,"height":40},"angle":0,"id":"6ecac186-b9c1-4755-97db-704cd9b9156f","z":1,"attrs":{"body":{"fill":"blue"},"label":{"fill":"white","text":"World!"}}},{"type":"standard.Link","source":{"id":"42a7f123-1f0d-4d06-b49e-8cbcbbb17e23"},"target":{"id":"6ecac186-b9c1-4755-97db-704cd9b9156f"},"id":"fa23e165-3c9f-46f8-9fe9-e6660d4086ca","z":2,"attrs":{}}]}
When a load the web page, it shows nothing on screen. I'm deployed my app in Apache Tomcat. Using Chrome Developer Tools, no errors are shown in Console.
I dont know what I'm missing.
Any help please? The json file was generated through toJSON command.
P.D. I think it should be better to hire someone, but I'm still trying to do this.
Related
I have an HTML code that imports a LOCAL but UPDATABLE *.json content, and it must be updated automatically when the *.json file is updated.
This is the *.HTML code:
<html>
<head>
<script type="text/javascript" src="sample.json"></script>
<script type="text/javascript" >
function load() {
setInterval(function () {
var mydata = JSON.parse(data);
var div = document.getElementById('data');
div.innerHTML = mydata[0].location.altitude;
}, 100);}
</script>
</head>
<body onload="load()">
<div id="data">
</div>
</body>
</html>
and the adapted sample.json file is:
data = '[{"location": {"altitude": 40}}]';
I just wanna see the altitude is changing in the browser(HTML) whenever the sample.json file is updated.
Now the HTML works but only ONCE, I wanna make it dynamic.
What should I do to make the function setInterval work correctly? or maybe this function works only for local changes, not external ones.
Thnks, Sadeq
If you want the browser to get data from a URL even interval, then you need to write code which gets data from a URL in the interval. e.g. with the Fetch API. (At which point you should make it JSON instead of JS).
However HTTP is not fast. You do not want to be polling over HTTP every 100ms. Consider using Websockets to push the data from the server when it changes instead of polling.
I have html file which has 3 script tags. I want to put these script tags in my vue.js file.
i have added the html div element to by vue js file and it is getting rendered. but i am just not able to load script from html into vue.
Below is my html file.
<html>
<body>
<script type="text/javascript">
mxBasePath = "../editors/pure";
</script>
<script type="text/javascript" src="../editors/pure/js/mxClient.js"></script>
<script src="../editors/dist/main.js"></script>
</body>
</html>
I have tried to add my scripts in the mounted section of vue. Below is my vue.js file
import * as client from '../editors/pure/js/mxClient.js'
import * as mains from '../editors/dist/main.js'
mounted () {
var z = document.getElementById('geApp')
let recaptchaScript = document.createElement('script')
recaptchaScript.setAttribute('src', client)
z.appendChild(recaptchaScript)
let processes = document.createElement('script')
processes.setAttribute('src', mains)
z.appendChild(processes)
let basepath = document.createElement('script')
basepath.innertext = 'mxBasePath = "../editors/pure"'
z.appendChild(basepath)
},
But i am getting the error as file not found.. I solved the problem by importing the src file but now i am getting the error as "one of the functionality is not defined."
Please can anyone help me in adding the scripts to vue.js file
I have installed SCP plugin for configurable products in magento 1.9. Everything is working fine but images are not getting changed when particular product is selected and it is showing this error on line 240 of product view page:
}Product.Options = Class.create();
I dont know whats wrong with it. Please help me out.
You can change in the following files :-
1) app/design/frontend/rwd/default/template/configurableswatches/catalog/product/view/type/configurable/swatch-js.phtml
2) Change this section in above file :-
<script type="text/javascript">
document.observe('dom:loaded', function() {
var swatchesConfig = new Product.ConfigurableSwatches(spConfig);
});
</script>
To this:
<script type="text/javascript">
document.observe('dom:loaded', function() {
if (Product.ConfigurableSwatches) {
var swatchesConfig = new Product.ConfigurableSwatches(spConfig);
}
});
</script>
I have been using Traceur to develop some projects in ES6. In my HTML page, I include local Traceur sources:
<script src="traceur.js"></script>
<script src="bootstrap.js"></script>
and if I have a module in the HTML afterwards like:
<script type="module" src="foo.js"></script>
Then Traceur loads in that module, compiles it and everything works great.
I now want to programmatically add an ES6 module to the page from within another ES6 module (reasons are somewhat complicated). Here was my first attempt:
var module = document.createElement('script');
module.setAttribute('type', 'module');
module.textContent = `
console.log('Inside the module now!');
`;
document.body.appendChild(module);
Unfortunately this doesn't work as Traceur does not monitor the page for every script tag added, I guess.
How can I get Traceur to compile and execute the script? I guess I need to invoke something on either 'traceur' or '$traceurRuntime' but I haven't found a good online source of documentation for that.
You can load other modules using ES6 import statements or TraceurLoader API for dynamic dependencies.
Example from Traceur Documentation
function getLoader() {
var LoaderHooks = traceur.runtime.LoaderHooks;
var loaderHooks = new LoaderHooks(new traceur.util.ErrorReporter(), './');
return new traceur.runtime.TraceurLoader(loaderHooks);
}
getLoader().import('../src/traceur.js',
function(mod) {
console.log('DONE');
},
function(error) {
console.error(error);
}
);
Also, System.js loader seems to be supported as well
window.System = new traceur.runtime.BrowserTraceurLoader();
System.import('./Greeter.js');
Dynamic module loading is a (not-yet-standardized) feature of System:
System.import('./repl-module.js').catch(function(ex) {
console.error('Internal Error ', ex.stack || ex);
});
To make this work you need to npm test then include BrowserSystem
<script src="../bin/BrowserSystem.js"></script>
You might also like to look into https://github.com/systemjs/systemjs as it has great support for browser loading.
BTW the System object may eventually be standardize (perhaps under a different name) in the WHATWG: http://whatwg.github.io/loader/#system-loader-instance
I am looking for the easiest way to populate a data table in google visualizations using either a json file or a local spreadsheet(.xlsx).
heres my code:
<!DOCTYPE html>
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable.fromJSON(sampleData.json,0.6);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240});
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
Heres my json file:
{
"cols": [
{"id":"","label":"Topping","pattern":"","type":"string"},
{"id":"","label":"Slices","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
{"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
]
}
When I run my code in my browser, I get
"Uncaught ReferenceError: sampleData is not defined"
Anyone know how I can make this work?
Thanks in advance
You COULD simply place the contents of your JSON file right inline there in your HTML where the string "sampleData.JSON" is. That is, take out "sampleData.JSON" and replace it with the entire contents of your JSON file. I'm pretty sure you'll make some progress if you do this.
Try putting sampleData.json in quotes, assuming that the filename is sampleData.json and is in the same folder as your HTML.
var data = new google.visualization.DataTable.fromJSON('sampleData.json',0.6);