Trying to display NEO4J json data in a html page through json - javascript

I'm trying to display a graph from json film went from NEO4J db. But it shows a blank page and in the console it shows an error. Here output:
Here the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/styles/vendor.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/scripts/vendor.js"></script>
<script src="lodash.js"></script>
</head>
<body>
<div class="alchemy" id="alchemy"></div>
<script type="text/javascript">
alchemy.begin({
dataSource: "../result.json",
dataType:'html',
nodeCaption:'name',
nodeMouseOver:'name',
cluster: true,
clusterColours:["#1B9E77,#D95F02,#7570B3,#E7298A,#66A61E,#E6AB02"]
})
</script>
</body>
</html>

I dont think that's the way to initialize the library. modify your script to
<script type="text/javascript">
var config ={
dataSource: "../result.json",
dataType:'html',
nodeCaption:'name',
nodeMouseOver:'name',
cluster: true,
clusterColours:["#1B9E77,#D95F02,#7570B3,#E7298A,#66A61E,#E6AB02"]
};
alchemy = new Alchemy(config);
</script>
Referencce
http://graphalchemist.github.io/Alchemy/#/examples
It looks like you are not loading the alchemyjs. you are loading only the dependency for alchemyjs. Include both the scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/scripts/vendor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/alchemyjs/0.4.2/alchemy.min.js"></script>

Related

Displaying a Blank page while using jquery

I am new to jquery and javascript coding, and I am using the following code to read data from a csv file and use that to form a wordCloud using jquery.
<!DOCTYPE html>
<html>
<head>
<title>jQCloud Example</title>
<link rel="stylesheet" type="text/css" href="jqcloud.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="jqcloud-1.0.4.js"></script>
<script type="text/javascript" src="csvjson.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax("http://localhost:8000/wordCloud.csv", {
success: function(data) {
console.log('Obtained csv file');
var jsonobject = csvjson.csv2json(data);
$(function() {
console.log('creating cloud');
$("#example").jQCloud(jsonobject);
});
},
error: function() {
console.log('Not Obtained');
}
});
});
</script>
</head>
<body>
<div id="example" style="width: 550px; height: 350px;"></div>
</body>
</html>
I am getting a blank page when i am running it. It is not even displaying any console statements.It's not executing the function at all. What might i be doing wrong. Or is there any other way to generate a word cloud obtaining the 'word'and'frequency' data from a csv file.

JavaScript make custom object from another file for testing

I'm writing Qunit tests for the following html file:
var PinPointService = {
doAjax: function(doAjax_params) {
//do some stuff
}
//a bunch more variables and functions
}
The test I'm writing in a seperate file:
QUnit.test("test", function(assert) {
var array = [];
PinPointService.doAjax(array);
//assert some stuff
});
The error I get:
PinPointService is not defined
My main js file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Pinpoint Test</title>
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.0.0.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://code.jquery.com/qunit/qunit-2.0.0.js"></script>
<script type="text/javascript" src="C:\path\to\jshamcrest.js"></script>
<script type="text/javascript" src="C:\path\to\core.js"></script>
<script type="text/javascript" src="C:\path\to\integration.js"></script>
<script type="text/javascript" src="C:\path\to\jsmockito-1.0.4.js"></script>
<script type="text/javascript" src=""></script>
<script src="C:\path\to\pinpoint.html"></script>
<script src="C:\path\to\pinpointTest.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>
Is there something additional I have to do besides including pinpoint.html in my main js file? I'm new to JavaScript, so I think I could be missing some fundamentals of how the language works in contrast to Java which I'm very comfortable with.
Make sure you import the file where
QUnit.test("test", function(assert) {
var array = [];
PinPointService.doAjax(array);
//assert some stuff
});
is located, after you imported PinPointService.
So in your html file it should be something like
...
<script src="C:\path\to\pinpointTest.js"></script>
<script src="file_containing_the_code_above"></script>
...
the html page is read and included from top to bottom so if you have not included the pinpointTest file yet, you can not use anything inside it.

How to integrate Twitter Bootstrap into Backbone app

So I have the following index.html:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project</title>
 <link href="public/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<script src="lib/jquery-1.11.3.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="public/js/main.js"></script>
</body>
main.js
(function($){
// Object declarations goes here
var FormLoanView = Backbone.View.extend({
tagName: 'div',
template: _.template('<p class="text-uppercase">Uppercased text.</p>'),
initialize: function(){
var data = this.$el.html(this.template())
$('body').html(data)
}
})
$(document).ready(function () {
var LoanView = new FormLoanView({
});
});
})(jQuery);
I am trying to create <p class="text-uppercase">Uppercased text.</p> and append it to the body in my index.html. It does return the p element, but the bootstrap styles don't kick in because "Uppercased text." does not return with uppercase letters. Anyone know why this is happening? Can bootstrap classes not be using in _.template?
It looks like your bootstrap.css isn't included properly. Try using the CDN or fixing the relative path of the css file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project</title>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="lib/jquery-1.11.3.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="public/js/main.js"></script>
</body>
Here's an example using only the CSS: https://jsfiddle.net/9nm5f0x9/
You don't need to include the bootstrap JS file as another commenter stated.

mustache.js is not working

I am trying to learn mustache js but the basic page does not work.
I was following the http://iviewsource.com/codingtutorials/introduction-to-javascript-templating-with-mustache-js/ but it is out of the date.
(Currently the basic html doesn't work. In the future I would like to use get JSON in script to get data from json files.)
Am I missing anything?
<!DOCTYPE <!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8"/>
<title>messages</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.min.js">
</script>
</head>
<body onload="loadUser()">
<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
Hello {{ subject }}!
</script>
<script>
function loadUser() {
var template = $('#template').html();
Mustache.parse(template); // optional, speeds up future uses
var rendered = Mustache.render(template, {subject: "Luke"});
$('#target').html(rendered);
}
});
</script>
</body>
</html>
Syntax error. Remove extra brackets at the bottom (commented out in the code below).
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8"/>
<title>messages</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.min.js">
</script>
</head>
<body onload="loadUser()">
<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
Hello {{ subject }}!
</script>
<script>
function loadUser() {
var template = $('#template').html();
Mustache.parse(template); // optional, speeds up future uses
var rendered = Mustache.render(template, {subject: "Luke"});
$('#target').html(rendered);
}
// }); <-- here
</script>
</body>
</html>

AngularJS - Angular-Charts : nothing happens

Sorry, my question is probably very stupid, might seem obvious to you.
I would like to display a chart with my app using angular-charts.
I have followed the instructions on : http://chinmaymk.github.io/angular-charts/, but I have a problem:
-if I write the dependency, I have an error Error: [$injector:nomod] Module 'angularCharts' is not available! You either missp...<omitted>...1)
-if not, nothing happens.
Here is my code :
HTML
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>myApp</title>
<link rel="stylesheet" href="css/app.css">
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script type='text/javascript' href='lib\angular\angular-charts.min.js'></script>
</head>
<body>
<div ng-controller="plotGraph" ng-repeat="graph in graphs" class="test-container">
<div ac-chart="chartType" ac-data="dataGraph" ac-config="config" id='graph' class='graph'></div>
</div>
</body>
</html>
App.js
var myApp = angular.module('myApp', ['angularCharts']);
function plotGraph($scope){
console.log("And here is the graph part");
//Graph
$scope.chartType = 'line'
$scope.config = {
labels: false,
title : "myTitle",
tooltips: true,
legend : {
display:true,
position:'myLegend'
}
}
$scope.dataGraph = {
series: ['Server1'], //I could put there the different server
data : [{ //{} for each serie
x : "myXAxis",
y: [10,50,12,35,16,22],
tooltip:"this is tooltip"
}
]
}
}
I just want to add that I have downloaded the zip, and just copy/paste the file angular-charts.min.js in the folder where I have all these other "type of files".
Maybe this is the problem.
Thank you for your help :)
First include
<script type='text/javascript' href='lib\angular\angular-charts.min.js'></script>
then your app.js
Thans how your index file should look like:
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>myApp</title>
<link rel="stylesheet" href="css/app.css">
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script type='text/javascript' href='lib\angular\angular-charts.min.js'></script>
<script src="js/app.js"></script>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<div ng-controller="plotGraph" ng-repeat="graph in graphs" class="test-container">
<div ac-chart="chartType" ac-data="dataGraph" ac-config="config" id='graph' class='graph'></div>
</div>
</body>
</html>
Always make sure, that your libaries are included first on the page, then your application logic :)
Chart.js is missing
Install chart.js using bower components..
you will get two folder.Angular-chart and chart folder. You have to refer chart.js file also

Categories

Resources