I want to take information from another java script data file and when I click on the button "kingdom" another buttons to be created and the information for them to be given from the other data file.
Here is my code but it doesn't work properly:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="Taxonomy.js"></script>
<script type="text/javascript" src="Page.html"></script>
</head>
<body>
<button type="button" id="kingdom" style="position:absolute;left:700px;"
onclick="tree()"></button>
<script type="text/javascript">
var mydata=Taxonomy;
document.getElementById("kingdom").innerHTML=mydata[0][2];
let isitshown;
function tree() {
for(let i=0;i<mydata.length;i++){
if(mydata[i][2]=="phylum"){
let n=document.createElement("button");
n.innerHTML=mydata[i][3];
}
}
}
</script>
</body>
</html>
and here is part of my data file:
var Taxonomy = [
[36064765,0,"kingdom","Plantae"],
[36064766,36064765,"phylum","Tracheophyta"],
[36064767,36064766,"class","Magnoliopsida"],
[36064768,36064767,"order","Fagales"],
[36064769,36064768,"family","Nothofagaceae"],
[36064880,36064767,"order","Ericales"],
[36064881,36064880,"family","Scytopetalaceae"],
[36065385,36064767,"order","Garryales"],
[36065386,36065385,"family","Eucommiaceae"],
[36065387,36064767,"order","Saxifragales"],
[36065388,36065387,"family","Penthoraceae"],
[36065805,36064767,"order","Malpighiales"],
[36065806,36065805,"family","Chrysobalanaceae"],
[36065807,36064767,"order","Myrtales"],
[36065808,36065807,"family","Myrtaceae"],
[36065809,36065805,"family","Irvingiaceae"],
[36066064,36064880,"family","Napoleonaceae"],
[36066187,36064767,"order","Caryophyllales"],
[36066188,36066187,"family","Droseraceae"],
[36066189,36064766,"class","Cycadopsida"],
[36066190,36066189,"order","Cycadales"],
[36066191,36066190,"family","Zamiaceae"],
[36066205,36064767,"order","Fabales"],
[36066206,36066205,"family","Fabaceae"],
[36066219,36066190,"family","Cycadaceae"],
[36066239,36064765,"phylum","Marchantiophyta"],
[36066240,36066239,"class","Marchantiopsida"],
[36066241,36066240,"order","Marchantiales"],
let n = document.createElement("button"); only stores the element in the variable n, it doesn't add it to the page. You also have to add it to the body with document.body.append(n);
I am using angular-filter countBy function to group and count the number of entries for a column. I would like to pass the values from this into a separate bar-chart on the same page. I have tried a number of ways but haven't manage to get it to work.
HTML:
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-resource.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.js"></script> -->
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<script src="http://ui-grid.info/release/ui-grid.css"></script>
<script src="node_modules/angular-chart.js/node_modules/chart.js/dist/Chart.min.js"></script>
<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
<script src="node_modules/angular-filter/dist/angular-filter.min.js"></script>
<!-- <script src="/js/app.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="/css/main.css" type="text/css">
<!-- <link rel="stylesheet" href="/webjars/bootstrap/3.3.6/css/bootstrap.css"> -->
</head>
<body>
<div ng-controller="myController">
<div id="grid1" ui-grid="{ data: myData }" class="grid"></div>
<div><canvas id="bar" class="chart chart-bar"chart-data="key" chart-labels="value" chart-series="series"></canvas></div>
<div><li ng-repeat="(key, value) in myData | countBy: 'col_ky'" >Column Key: {{ key }}, Number of Hits: {{ value }}</li></div>
</div>
</body>
</html>
Controller:
var app = angular.module('app',['ngTouch', 'ui.grid', 'chart.js', 'angular.filter']);
app.controller('myController',['$scope', '$http','$filter',function($scope, $http, $filter) {
$scope.barData = [];
$scope.labels = [];
$scope.myData = [{"col_ky":"75421","crt_ts":1501365031000},{"col_ky":"75421","crt_ts":1501124681000},{"col_ky":"75421","crt_ts":1501124688000},{"col_ky":"880610","crt_ts":1501127589000},{"col_ky":"880610","crt_ts":1501127715000},{"col_ky":"891733","crt_ts":1501128075000},{"col_ky":"75421","crt_ts":1501128130000},{"col_ky":"880610","crt_ts":1501128181000},{"col_ky":"75421","crt_ts":1501128192000},{"col_ky":"885110","crt_ts":1501128364000},{"col_ky":"880610","crt_ts":1501128369000},{"col_ky":"326083","crt_ts":1501130957000},{"col_ky":"75421","crt_ts":1501131142000},{"col_ky":"863184","crt_ts":1501131949000}];
}]);
If I could pass the keyand value from ng-repeat into the barData and labels vars in the controller maybe , I could then use barData and labels to populate the bar chart. So how can I do this?
I finally got the code jsfiddle working, its working fine. The code shows how to call the custom filter function. I hope this is what you are looking for. Also one more thing. The line that does the custom filter is as so
$scope.barData = $filter('countBy')($scope.myData, "col_ky");
Jsfiddle: https://jsfiddle.net/Kai_Draord/p3exg6rw/9/
Final Output:
I am using angular-chart.js library(https://jtblin.github.io/angular-chart.js/ ) for implementing doughnut chart and I have a requirement
I want to show the total data in middle of a chart as shown below
Check this image
Can I do that with the current library support? I would appreciate your help!
No don't see anything in Chart.JS that would let you position some text like that, they have title text but can only be "top" or "bottom" http://plnkr.co/edit/oYQ1WKoNq78fGVIO5eEK?p=preview <-- put together a plunkr to poke around with it but doesn't look like the underlying lib supports that kind of overlaid text.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="app" ng-controller="DoughnutCtrl">
<h1>Hello Plunker!</h1>
<canvas id="doughnut" class="chart chart-doughnut"
chart-data="data" chart-labels="labels">
</canvas>
<script data-require="angular.js#1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script src="https://cdn.rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.js"></script>
<script src="script.js"></script>
</body>
</html>
I want to add graph visualisation to my php page and for that i have written code but I don't know why it is not showing anything. Can any one help me to solve my problem.
Thanks in advance
<html>
<head>
<script language="javascript" type="text/javascript" src="arbor_files/jquery.js"> </script>
<script language="javascript" type="text/javascript" src="arbor_files/arbor.js"></script>
<script language="javascript" type="text/javascript" src="arbor_files/arbor-tween.js"></script>
<script language="javascript" type="text/javascript" src="arbor_files/graphics.js"></script>
<script language="javascript" type="text/javascript" src="arbor_files/renderer.js"></script>
</head>
<body>
<canvas id="viewport" width="800" height="600"></canvas>
<script language="javascript" type="text/javascript">
var sys = arbor.ParticleSystem(1000, 400,1);
sys.parameters({gravity:true});
sys.renderer = Renderer("#viewport") ;
var animals = sys.addNode('Animals',{'color':'red','shape':'dot','label':'Animals'});
var dog = sys.addNode('dog',{'color':'green','shape':'dot','label':'dog'});
var cat = sys.addNode('cat',{'color':'blue','shape':'dot','label':'cat'});
sys.addEdge(animals, dog);
sys.addEdge(animals, cat);
</script>
</body>
</html>
I ported your code over and it loads fine.
Can you check the location where you saved your js files?
EDIT: i arranged the files so the JS file is the last one.. but its still not working
The result when I open this up in firefox is simply {{message}}
I've named the files: html.html and js.js
HTML file
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="js.js", type='text/javascript'></script>
</head>
<body ng-controller="abc">
{{message}}
</body>
</html>
Javascript file
var app = angular.module('app', []);
abc.controller('abc', function($scope){
$scope.message = 'booya';
});
Your controller should be defined as:
app.controller('abc', function($scope){
$scope.message = 'booya';
});
You have mentioned abc.controller. It seems where the issue is
You need to load js.js after angularjs, which means that your should look like:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"> </script>
<script src="js.js", type='text/javascript'></script>
You dont have a body or a ngController. And you should change the order of your js files, as follows:
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="js.js", type='text/javascript'></script>
</head>
<body ng-controller="abc">
{{message}}
</body>
</html>