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
Related
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>
This code is just supposed to print "Hello world" using an AngularJS directive, but instead of that, the page is blank when I load it in my browser.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>ngClassifieds</title>
</head>
<body ng-app="ngClassifieds" ng-controller="classifiedsCtrl">
<hello-world></hello-world>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-animate/angular-animate.js"></script>
<script src="node_modules/angular-aria/angular-aria.js"></script>
<script src="node_modules/angular-material/angular-material.js"></script>
<script src="scripts/app.js"></script>
<script src="components/classifieds.ctr.js"></script>
</body>
</html>
And the app.js:
angular
.module("ngClassifieds", ["ngMaterial"])
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('teal')
.accentPalette('orange');
})
.directive("helloWorld", function() {
return {
template : "<h1>Hello world!</h1>"
}
});
The paths in the script elements are correct, there are no typos as far as I'm concerned, and I'm pretty sure nothing is wrong with my port. I'd appreciate any help on what I'm doing wrong!
You are missing the references for the angular-material, because its a dependency,
DEMO
angular
.module("ngClassifieds", ["ngMaterial"])
.directive("helloWorld", function() {
return {
template : "<h1>Hello world!</h1>"
}
});
<!DOCTYPE html>
<html>
<head>
<title>ngClassifieds</title>
<link data-require="angular-material#0.11.0" data-semver="0.11.0" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css" />
<script data-require="jquery#*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="angular.js#*" data-semver="1.4.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script data-require="angular-material#0.11.0" data-semver="0.11.0" src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
<script data-require="angular-animate#1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-animate.js"></script>
<script data-require="angular-aria#1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-aria.js"></script>
</head>
<body ng-app="ngClassifieds">
<hello-world></hello-world>
</body>
</html>
You are not loading Angular-material.js file
.module("ngClassifieds", ["ngMaterial"])
-------------------------------------^
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 1.0.7 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>
Refere Angular-Material Git-Hub page for more info
I am trying angularjs for the first time and I am having trouble getting it to actually work..I think.
I am doing the exercises on a website and when I run it on the website it works, but when I try to follow along and write it myself in my own files I can't get it to work.
For example: when I type this "{{store.product.name}}" it prints exactly that including the braces, but on the site it prints out "Azurite"
my code:
index.html
<!DOCTYPE html>
<html ng-app="test">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script src="app.js"></script>
<script src="angular.min.js"></script>
</head>
<body ng-controller="StoreController as store">
<div>
<h3>{{store.product.name}}</h3>
<h3>{{store.product.price}</h3>
</div>
</body>
</html>
app.js
(function(){
var gem = { name: 'Azurite', price: 2.95 };
var app = angular.module('gemStore', []);
app.controller('StoreController', function(){
this.product = gem;
});
})();
Your app name is incorrect.
<html ng-app="gemStore"> </html>
gemStore is the name for your app not test.
when you working with angular app .
You need angularJs script first and others should follow.
<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script src="angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="StoreController as store">
<div>
<h3>{{store.product.name}}</h3>
<h3>{{store.product.price}</h3>
</div>
</body>
</html>
let me know if you need any help.
For reference you can see this plunker:
http://plnkr.co/edit/28gANOyhz5mLb7zkhu9W?p=preview
You shuld close the double curly brace
You have
<h3>{{store.product.price}</h3>
Should be
<h3>{{store.product.price}}</h3>
Regards
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.
I already linked the script to my html file for the angularjs,sanitize and animate:
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-sanitize.min.js"></script>
<script type="text/javascript" src="js/angular-animate.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
and when i added the ngAnimate as a dependency to my module just like this:
var nameSpace = angular.module("OscarApp", ["ngSanitize","ngAnimate"]);
all my variables inside my expression were displayed as it is not on what was initialized on the variable, just like this:
{{item.award_title}}
what seems to be the problem? I just want to follow this tutorial (https://www.youtube.com/watch?v=Bcv46xKJH98).
Works for me...
This prints 2 to the screen
index.html
<!DOCTYPE html>
<html ng-app="OscarApp">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-sanitize.min.js"></script>
<script type="text/javascript" src="angular-animate.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
{{1+1}}
</body>
</html>
app.js
var nameSpace = angular.module('OscarApp', ['ngSanitize','ngAnimate']);
Angular version 1.3.0-rc.3 (latest download from angularjs.org)
This snippet shows that there is no problem with the unit.
maybe you have a problem elsewhere.
var nameSpace = angular.module('OscarApp', ['ngSanitize','ngAnimate']);
nameSpace.controller('OscarCtrl',['$scope',function($scope) {
$scope.item={ 'award_title' : 'The Lord of The Rings' };
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-sanitize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-animate.min.js"></script>
<div ng-app="OscarApp" ng-controller="OscarCtrl">
{{item.award_title}}
</div>