ar app = angular.module('chartApp', ['ng-fusioncharts']);
app.controller("MyController2", function($scope, $http){
$http.get('js/data.json').then(function(res,status,xhr){
$scope.countries = res.data;
});
});
I want to use the above JSON as the chart data.
$scope.dataSource = {
"chart": {
"caption": "Column Chart Built in Angular!",
"captionFontSize": "30",
"captionPadding": "25",
........
},
"data": [
]
How can I use the "countries" JSON to be the data for the chart above?
Many examples just declare the JSON inside the "data:[]", is there anywhere to use an external .json file?
Hey we can do something like the following:
angular.module('plunker', ['ng-fusioncharts'])
.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
const chartProps = {
"caption": "Monthly",
"xaxisname": "Month",
"yaxisname": "Revenue",
"numberprefix": "$",
"theme": "fint"
};
const getDataSource = (data = [], chart = chartProps) => {
return {
chart,
data
}
};
$http.get('./data.json')
.then(({
data
}) => $scope.dataSource = getDataSource(data));
$scope.dataSource = getDataSource();
}]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src='https://static.fusioncharts.com/code/latest/fusioncharts.js'></script>
<script src='https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js'></script>
<script src='https://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js'></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<fusioncharts id="mychartcontainer" chartid="mychart" width="600" height="400" type="column2d" dataSource="{{dataSource}}"></fusioncharts>
</body>
</html>
Check the plunker link for a live demo.
If you see the app.js, I have a commented part below - which is 'NOT-WORKING' related implementation.
I shall be looking to it in more detail. It seems the issue is $observe is not watching deeply for changes in Object structure. So the stuff works only when we update the reference. So untill then, please follow the above step.
Thanks and lemme know in case of any concern!
Related
I want to download this file and print its contents to the console using an in-browser IPFS node. The following html file should do the job:
<!doctype html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
</title>
</head>
<body>
<script type='text/javascript' src='https://unpkg.com/ipfs#0.55.1/dist/index.min.js'></script>
<script type="text/javascript">
var ifile = 'Qmc3zqKcwzbbvw3MQm3hXdg8BQoFjGdZiGdAfXAyAGGdLi';
(async () => {
const inode = await Ipfs.create({
config: {
Addresses: {
Swarm: [
// These webrtc-star servers are for testing only
'/dns4/wrtc-star1.par.dwebops.pub/tcp/443/wss/p2p-webrtc-star',
'/dns4/wrtc-star2.sjc.dwebops.pub/tcp/443/wss/p2p-webrtc-star'
]
},
Bootstrap: []
}
})
window.inode = inode; //For poking
for await (const chunk of inode.cat(ifile)) {
console.log(chunk.toString());
}
})();
</script>
Testing IPFS file fetch
</body></html>
But it doesn't print anything. What am I missing?
You don't have any bootstrap nodes, so it can't find the CID. If you add my node for example, it works fine:
<!doctype html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
</title>
</head>
<body>
<script type='text/javascript' src='https://unpkg.com/ipfs#0.55.1/dist/index.min.js'></script>
<script type="text/javascript">
var ifile = 'Qmc3zqKcwzbbvw3MQm3hXdg8BQoFjGdZiGdAfXAyAGGdLi';
(async () => {
const inode = await Ipfs.create({
config: {
Addresses: {
Swarm: [
// These webrtc-star servers are for testing only
'/dns4/wrtc-star1.par.dwebops.pub/tcp/443/wss/p2p-webrtc-star',
'/dns4/wrtc-star2.sjc.dwebops.pub/tcp/443/wss/p2p-webrtc-star'
]
},
Bootstrap: []
}
})
window.inode = inode; //For poking
await inode.swarm.connect("/dns6/ipfs.thedisco.zone/tcp/4430/wss/p2p/12D3KooWChhhfGdB9GJy1GbhghAAKCUR99oCymMEVS4eUcEy67nt");
for await (const chunk of inode.cat(ifile)) {
console.log(chunk.toString());
}
})();
</script>
Testing IPFS file fetch
</body></html>
I am new to angularJS. Few moments earlier the below code was working fine. Don't know what changes I have made that now it's giving me JSON.parse: unexpected end of data at line 1 column 1 of the JSON data in response
Could you please take a look over the below codes?
<!doctype html>
<html lang="en" ng-app="myapp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0 /angular.min.js"></script>
<script src="controller.js"></script>
</head><body>
<div ng-controller="people">
<ul>
<h2> I need to learn AngularJS </h2>
<li ng-repeat="person in persons">
{{ person.name + ' : ' + person.age}}
</li>
</ul>
</div>
</body>
</html>
JS file
var app = angular.module('myapp', []);
app.controller('people' , function($scope, $http){
$http.get('http://127.0.0.1/garg/database.json')
.success(function(response){
$scope.persons = response.records;
});
});
Json file
{
"records":[
{
"name": "rock",
"age" : "40"
},
{
"name": "undertaker",
"age" : "40"
},
{
"name": "kane",
"age" : "40"
},
{
"name": "triple h",
"age" : "40"
}
]
}
You should access your HTML file using the same domain/ip as the one in your AJAX call. For instance, use this in your controller:
var app = angular.module('myapp', []);
app.controller('people' , function($scope, $http){
$http.get('http://127.0.0.1/garg/database.json')
.success(function(response){
$scope.persons = response.records;
});
});
and access your HTML file with this URL: http://127.0.0.1/garg/index.html
I got stuck with the http get method which is used to get the json data.
The http get method is working fine it is actually fetching the json data, but I'm not able to connect it with the object literal.
To explain clearly here is the piece of code where I'm stuck.
var x ={};
$http.get('chart.json') //reading the studentRecord.json file
.success
(function(data1){
//alert(data1);
$scope.x = data1;
});
var conversionChart = new FusionCharts({
type: 'funnel',
renderAt: 'chart-container',
width: "100%",
dataFormat: 'json',
dataSource: x
});
I'm trying to apply the http.get method to the dataSource:to fetch the json data to it but, its not working. And my main task is to apply the http.get request to the dataSource:which makes my code work properly.
And let me give you the entire piece of code to understand better.
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>FusionCharts - Funnel 3D Chart</title>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<script data-require="angular.js#1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script type='text/javascript' src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type='text/javascript' src="http://static.fusioncharts.com/code/latest/fusioncharts.widgets.js"></script>
<script type='text/javascript' src='/js/lib/dummy.js'></script>
<script type='text/javascript' src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<!-- A funnel 3D Chart showing a conversion analysis in percentage of visiting to purchase in Harry's Supermart website last year
Attribute :
# showPercentValues - set to 1 to show the values in percentage.
-->
<div id="chart-container" ng-controller="ParentCtrl" ng-init='load()' ng-model="dataSource1">FusionCharts will render here</div>
</body>
</html>
script.js
var myApp = angular.module("myApp", []);
//The below code will read the data from student.json file and will pass to the $scope variable
myApp.controller("ParentCtrl", function($scope, $http)
{
$scope.load = function(){
//alert("2");
FusionCharts.ready(function () {
//alert("1");
var conversionChart = new FusionCharts({
type: 'funnel',
renderAt: 'chart-container',
width: "100%",
dataFormat: 'json',
dataSource : function(){
$http.get('chart.json') //reading the studentRecord.json file
.success
(function(data1){
alert(data1);
$scope.dataSource = data1;// binding the data to the $scope variable
});
}
});
conversionChart.render();
});
};
});
chart.json
{
"chart": {
"caption": "Ensource sales report",
"subcaption": "Purchase - Conversion analysis for last year",
"decimals": "1",
"isHollow": "0",
"isSliced": "1",
"labelDistance": "15",
"plotTooltext": "Success : $percentOfPrevValue",
"theme": "fint",
"baseFontSize":"18"
},
"data":
[
{
"label": "Total",
"value": "385634"
},
{
"label": "Contacts",
"value": "175631"
},
{
"label": "Leads",
"value": "84564"
},
{
"label": "Sanctioned",
"value": "35654"
},
{
"label": "Disbursed",
"value": "12342"
}
]
}
My main intention is to use the http.get method to fetch the json data to
dataSource :
Plunker:http://plnkr.co/edit/HUKvROQv8wIiFfx6uZBk?p=preview
I'll be very thankfull if somebody help me with this .Plz help me because I'm new bee to angular
Based on your plunker, the code should be:
var myApp = angular.module("myApp", []);
//The below code will read the data from student.json file and will pass to the $scope variable
myApp.controller("ParentCtrl", function($scope, $http)
{
$scope.load = function(){
//alert("2");
FusionCharts.ready(function () {
//alert("1");
var conversionChart;
$http.get('chart.json') //reading the studentRecord.json file
.success
(function(data1){
//alert(data1);
$scope.dataSource = data1;// binding the data to the $scope variable
conversionChart = new FusionCharts({
type: 'funnel',
renderAt: 'chart-container',
width: "100%",
dataFormat: 'json',
dataSource : $scope.dataSource
});
conversionChart.render();
});
});
};
});
I want to add a sort function to my factory controller in Angular JS.
I have got as far as what I have below:
var albumsApp = angular.module ('albumsApp',[])
albumsApp.factory('albumFactory',function($http) {
return {
getAlbumsAsync: function(callback,$scope){
$http.get('albums.json').success(callback);
},
};
});
albumsApp.controller ('albumController', function ($scope,albumFactory) {
albumFactory.getAlbumsAsync(function(results){
console.log('albumController async returned value');
$scope.albums = results.albums;
});
albumFactory.changeSorting(function(results){
console.log('changeSorting called');
});
});
I get an error "TypeError: albumFactory.changeSorting is not a function" (this refers to the albumFactory.changeSorting) as I have not added it to the factory. I don't know how to do this.
The html code I am using is below: I want to call the function to sort what is in the JSON file alphabetically
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script type="text/javascript" src="modules/app.js" ></script>
</script>
<title>
</title>
</head>
<body ng-app="albumsApp">
<div data-ng-controller="albumController">
<!-- <ul data-ng-repeat="album in albums| orderBy:'title'"> -->
<ul data-ng-repeat="album in albums">
<li>
Artist is "{{album.artist}}" and title is "{{album.title}}"
</li>
</ul>
<button data-ng-click="changeSorting()">Description</button>
</div>
</body>
</html>
The JSON list is below:
{
"albums":[
{
"artist": "Arctic Monkeys",
"title": "AM"
},
{
"artist": "Nirvana",
"title": "Nevermind"
},
{
"artist": "Buck 65",
"title": "Man Overboard"
}
]
}
Your view is not directly connected to the Angular service—all methods called from the view should be in your controller. You should have a method on your controller and not in your factory. Try moving that function to your controller:
albumsApp.controller ('albumController', function ($scope,albumFactory) {
albumFactory.getAlbumsAsync(function(results){
console.log('albumController async returned value');
$scope.albums = results.albums;
});
$scope.changeSorting = function (){
// your logic goes here
console.log('changeSorting called');
});
});
You can keep your logic in your controller. You can use orderBy in Angular's $filter module to help you sort:
$filter('orderBy')(array, expression, reverse)
I need to select an element from my data with my $resource, but I have this error :
"Error: $produit1 is not defined GET XHR
http://localhost:8080/Jquery/data/produits.json/1 [HTTP/1.1 404
Introuvable 15ms]
I Think the problem comes from this url: http://localhost:8080/Jquery/data/produits.json/1
because this url http://localhost:8080/Jquery/data/produits.json is OK when i put it on my browser i can see the data, the first dont show me the data (Etat HTTP 404 - /Jquery/data/produits.json/1 )
[
{
"id" : 1,
"reference": "AAA",
},
{
"id" : 2,
"reference": "BBB",
}
]
How can I call my elements by the url please ?
Here is my code :
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Angular ngResource</title>
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-resource.min.js"></script>
<script>
var myApp = angular.module('myApp', ['ngResource']);
myApp.factory('Produits',['$resource', function ($resource) {
return $resource('data/produits.json/:id',{id: "#id"},
{
'update': {method: 'PUT'},
'reviews': {method: 'GET'}
}
);
}]);
myApp.controller('produitsCtrl', function($scope, $http,Produits,$log) {
$scope.produits= Produits.query();
$scope.produit1 = Produits.get({'id': 1});
});
</script>
</head>
<body>
<div ng-app="myApp" >
<div ng-controller="produitsCtrl">
Reference 1 : {{ produit1.reference }}
</div>
</div>
</body>
</html>
The thing is that your call :
$resource('data/produits.json/:id',{id: "#id"},
is looking for a json that is generated regarding the id you pass. So your app expects to have a json file that exists only if in your route id=1 exists and returns a json.
$scope.produit1 = Produits.get({'id': 1});
should return a json file with elements as the ones you have currently.
If you want to use the datas contained in your json you need to do this :
var Produits = $resource(data/produits.json);
myApp.controller('produitsCtrl', function($scope, $http,Produits,$log) {
var upd = {
"id": 1,
"reference": "REF"
}
Produits.$update(upd.id);
});