I am running this code and getting nothing in output. There is no error in the buildup but I am not able to find out the mistakes. Can anyone tell me what could be the issue?? Regards
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="Dependencies/Angular/angular.js"></script>
<script src="Dependencies/D3/d3.js"></script>
<script src="Dependencies/nvd3/nv.d3.js"></script>
<script src="Dependencies/Angularjs-nvd3-Directives/angularjs-nvd3-directives.js"></script>
<link rel="stylesheet"href="Dependencies/nvd3/nv.d3.css">
<script>
var app = angular.module("nvd3TestApp", ['nvd3ChartDirectives']);
function ExampleCtrl($scope){
$scope.exampleData = [
{
"key": "Series 1",
"values": [ [ 1025409600000 , 0] , [ 1309406400000 , 121.92388706072] , [ 1312084800000 , 116.70036100870] , [ 1314763200000 , 88.367701837033] , [ 1317355200000 , 59.159665765725] , [ 1320033600000 , 79.793568139753] , [ 1322629200000 , 75.903834028417] , [ 1325307600000 , 72.704218209157] , [ 1327986000000 , 84.936990804097] , [ 1330491600000 , 93.388148670744]]
}];
}
</script>
</head>
<body ng-app='nvd3TestApp'>
<div ng-controller="ExampleCtrl">
<nvd3-line-chart data="exampleData"
showXAxis="true"
showYAxis="true"
tooltips="true"
interactive="true">
</nvd3-line-chart>
</div>
</body>
</html>
I believe I have solved your issue with your code. I didn't load any css so you may have to add yours to make it look right. I would also move your script tags to right before the closing </body> tag. That way your code will not run before the dom loads. This will prevent some headaches in the future.
Live Preview: http://codepen.io/larryjoelane/pen/OMQqMd
JavaScript/Angular Code:
var app = angular.module("nvd3TestApp", ['nvd3ChartDirectives']).controller("ExampleCtrl", function($scope) {
$scope.exampleData = [{
"key": "Series 1",
"values": [
[1025409600000, 0],
[1309406400000, 121.92388706072],
[1312084800000, 116.70036100870],
[1314763200000, 88.367701837033],
[1317355200000, 59.159665765725],
[1320033600000, 79.793568139753],
[1322629200000, 75.903834028417],
[1325307600000, 72.704218209157],
[1327986000000, 84.936990804097],
[1330491600000, 93.388148670744]
]
}];
})();
Global functions as controllers haven't been supported in angular for quite a while ... since around 1.2xx
try
var app = angular.module("nvd3TestApp", ['nvd3ChartDirectives']);
app.controller('ExampleCtrl', function($scope) {
$scope.exampleData = [{
"key": "Series 1",
"values": [
......
]
}];
});
Related
I'm trying to create a D3 Force-Directed Graph variant I found here https://github.com/vasturiano/3d-force-graph using JSON data on 30,000+ Steam Games.
I'd like to link games by their first 'steamspy_tags' which requires converting this data to nodes and links like so
{ "nodes": [
{"id": "Myriel", "group": 1},
{"id": "Napoleon", "group": 1}],
"links": [
{"source": "Napoleon", "target": "Myriel", "value": 1},
{"source": "Mlle.Baptistine", "target": "Myriel", "value": 8}
Is there an easy way to convert raw JSON to node and link data to format it for the graph?
The data is structured like so:
[
{
"appid": 10,
"name": "Counter-Strike",
"developer": "Valve",
"categories": "Multi-player;Online Multi-Player;Local Multi-Player;Valve Anti-Cheat enabled",
"genres": "Action",
"steamspy_tags": "Action;FPS;Multiplayer"
},
{
"appid": 20,
"name": "Team Fortress Classic",
"developer": "Valve",
"categories": "Multi-player;Online Multi-Player;Local Multi-Player;Valve Anti-Cheat enabled",
"genres": "Action",
"steamspy_tags": "Action;FPS;Multiplayer"
},
The graph code itself is as follows:
<head>
<style> body { margin: 0; } </style>
<script src="//unpkg.com/element-resize-detector/dist/element-resize-detector.min.js"></script>
<script src="//unpkg.com/3d-force-graph"></script>
<!-- <script src="../../dist/3d-force-graph.js"></script>-->
</head>
<body>
<div id="3d-graph"></div>
<script type="module">
import { UnrealBloomPass } from '//unpkg.com/three/examples/jsm/postprocessing/UnrealBloomPass.js';
const elem = document.getElementById('3d-graph');
const Graph = ForceGraph3D()(elem)
.jsonUrl('../datasets/developers/valve.json')
.nodeAutoColorBy('maintag')
.nodeVal('PosRat')
.backgroundColor('#171717')
.cooldownTicks(100)
.height(window.innerHeight - 60)
.nodeLabel(node => `${node.title}: ${node.release_date}: ${node.maintag}`)
.onNodeHover(node => elem.style.cursor = node ? 'pointer' : null)
.onNodeClick(node => window.open(`https://store.steampowered.com/app/${node.id}`, '_blank'));
const bloomPass = new UnrealBloomPass();
bloomPass.strength = 1.0;
bloomPass.radius = 0.3;
bloomPass.threshold = 0.25;
Graph.postProcessingComposer().addPass(bloomPass);
Graph.onEngineStop(() => Graph.zoomToFit(400));
</script>
</body>
Please help. I'm unable to match JSON parsed values to customer name using Data tables. I was able to populate table column with contact info, but parsed data is identical for both accounts in the table created by code shown. Is there a better way to loop through the data so it displays correctly.
I've seen a few examples of doing this with a simple table, but I would like to keep the sorting capability of Data Tables if possible. Any help will be greatly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Table 01</title>
</head>
<body>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="tableId" class="table table-condensed responsive"></table>
</body>
<script>
var data01 = [
{
"name": "EXAMPLE Mickey",
"due": "2018-11-22T19:00:00.000Z",
"labels": [
{
"name": "Salesperson_1",
"color": "green"
}
],
"pluginData": [
{
"value": "{\"billContact\":\"Mickey Mouse\",\"billCompany\":\"MM Clubhouse\"}",
"access": "shared"
}
]
},
{
"name": "EXAMPLE Carl",
"due": "2018-11-25T19:00:00.000Z",
"labels": [
{
"name": "Salesperson_2",
"color": "yellow"
}
],
"pluginData": [
{
"value": "{\"billContact\":\"Carl Grimes\",\"billCompany\":\"Rick's Group\"}",
"access": "shared"
}
]
}
];
$('#tableId').DataTable({
data: data01,
"columns": [
{"data": "name"},
{"data": "due"},
{"data": "labels.0.name"},
{"data": "pluginData.0.value"},
{"data": function(){
for (var i=0; i < data01.length; i++){
var values = data01[i].pluginData[0].value;
var parsedVal = JSON.parse(values);
var contact = parsedVal.billContact;
return contact;
//console.log(contact);
}
}}
]
});
</script>
</html>
When you pass a function to a column, an argument is passed to that function which represents one entry of your data. So there is no need to iterate over your data by yourself, jQuery is doing that for you.
$('#tableId').DataTable({
data: data01,
"columns": [
{"data": "name"},
{"data": "due"},
{"data": "labels.0.name"},
{"data": "pluginData.0.value"},
{"data": function (row){
let values = row.pluginData[0].value;
let parsedVal = JSON.parse(values);
let contact = parsedVal.billContact;
return contact;
}}
]
});
If you do the iteration by yourself, the function will terminate at the return statement. So everytime the function is called it just see the first entry and return it and stop at that point.
file snapshot_report_js.js:
require([
"dojo/dom",
"dojo/json",
"dojo/store/Memory",
"dijit/tree/ObjectStoreModel",
"dijit/Tree",
"dojo/text!http://localhost:8080/dojo/json_data/snapshot.json",
"dojo/domReady!",
"dojo/_base/json"
], function(dom, json, Memory, ObjectStoreModel, Tree, small){
var stringfied_content = JSON.stringify(small)
var json_parsed_data = JSON.parse(stringfied_content, true)
var json_data = dojo.toJson(json_parsed_data);
// set up the store to get the tree data
var json_store = new Memory({
data: [ json_data ],
getChildren: function(object){
return object.children || [];
}
});
// Create the model
var snapshot_treeModel = new ObjectStoreModel({
store: json_store,
query: {id: 'snapshot'}
});
var snapshot_tree = new dijit.Tree({
model: snapshot_treeModel
}, 'div_snapshot_tree');
snapshot_tree.startup();
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Snapshot</title>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<!-- load Dojo -->
<script src="dojo/dojo.js" data-dojo-config="async: true"></script>
<script src="js/snapshot_report_js.js"></script>
</head>
<body class="claro">
<div id="div_snapshot_tree"></div>
</body>
</html>
JSON file:
{
"snapshot_metadata": {
"report_end_at": "2017-10-11 02:03:36",
"environment_name": "DVINST",
"report_start_at": "2017-10-11 01:55:42"
},
"versions": [
{
"id": "version_001",
"instances": [
{
"instance_name": "instance1",
"instance_create_date": "2017-09-18 00:17:52",
"connected_site_count": 4,
"admin_server": "t3://tserver:18300",
"instance_id": 2411,
"instance_type": "OSVC",
"instance_created_by": "None",
"site_capacity": 2,
"sites": [
{
"site_db_id": 395,
"site_name": "zzzz_178",
"site_users": "uc1,uc2,uc3",
"site_id": 89492,
"site_owner": "owner1",
"site_db_name": "site_server2"
},
{
"site_db_id": 395,
"site_name": "site2",
"site_users": "u1, u2, u3",
"site_id": 90447,
"site_owner": "u2",
"site_db_name": "site_server3"
}
]
}
]
}
],
"servers": [
{
"status": null,
"server_id": 13,
"server_name": "db1",
"server_type": "database",
"mount_points": [],
"sites": [],
"db_connections_count": 6,
"health": null,
"admin_servers": null,
"db_sites_connected_count": null
}
]
}
Error on console:
dojo.js:8 Uncaught Error: dijit.tree.ObjectStoreModel: root query
returned 0 items, but must return exactly one at Object.
(ObjectStoreModel.js.uncompressed.js:86) at dojo.js:8 at when
(dojo.js:8) at Object.getRoot
(ObjectStoreModel.js.uncompressed.js:82) at Object._load
(Tree.js.uncompressed.js:897) at Object.postCreate
(Tree.js.uncompressed.js:844) at Object.create
(_WidgetBase.js.uncompressed.js:453) at Object.postscript
(_WidgetBase.js.uncompressed.js:366) at new (dojo.js:8)
at snapshot_report_js.js:178
I don't see anything wrong here, can anybody help?
At first glance your ObjectStoreModel is trying to find root object for tree and as you specified it should have property id equals to snapshot; nothing in your JSON is matching that query.
Secondly, JSON data should bring tree-structured content while your JSON is unstructured; see ObjectStoreModel example how tree data looks like. If you have custom data structure then you need to transform it to be consumed by tree widget thru its model.
I am using MEAN stack in my application with AngularJS as my front-end. How can I remove Square Brackets [] and Double quotes "" in repeated answer, My plunker actually we need show role vlaues in my app so we have used ng-repeat="mani in name.comments " to get the answer, and we got the answer like ["user"], ["admin"], ["kp"] , what we exactly looking we just need to show the values alone, not with the [] Square Brackets and Double quotes.... for example answer would be:- values are without in [] Square Brackets and Double quotes like 1. user , 2. admin, 3. kp
My Data:-
$scope.name = {
"_id": "5863d3aaacaeddc00663bc07",
"comments": [
{
"created": 1485511936350,
"role": [
"user"
],
"email": "selvam#e21designs.com",
"name": "selvam R",
"commentText": "mani selvam"
},
{
"created": 1485511936350,
"role": [
"admin"
],
"email": "selvam#e21designs.com",
"name": "selvam R",
"commentText": "mani selvam"
},
{
"created": 1485511936350,
"role": [
"kp"
],
"email": "selvam#e21designs.com",
"name": "selvam R",
"commentText": "mani selvam"
}
],
"created": "2016-12-28T15:00:58.777Z",
"isCurrentUserOwner": false
};
My Html:-
<div ng-repeat="mani in name.comments ">
<td>{{$index + 1}}</td>
<td>{{mani.role }}</td>
</div>
Please look at into My plunker for reference ...
Expecting answer would be without [] Square Brackets and Double quotes...
This role are within the array so that only it's showing with [] Square Brackets and Double quotes , so how can we remove this , we need to show only values... we have tried many ways we know it's simple task but we unable to solve this issue..
can we use css to remove this ?... any one knows the solution please help us... thanks
please update plunker as well to know the exact solution....
You can use the toString() method to convert the array that is being displayed to a string. Like so:
<td>{{mani.role.toString()}}</td>
That will display it as a string so the " and [] will be removed.
Plunkr showing this.
You just need to select the first element of the array at index 0 using:
{{ mani.role[0] }}
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = {
"_id": "5863d3aaacaeddc00663bc07",
"comments": [{
"created": 1485511936350,
"role": [
"user"
],
"email": "selvam#e21designs.com",
"name": "selvam R",
"commentText": "mani selvam"
}, {
"created": 1485511936350,
"role": [
"admin"
],
"email": "selvam#e21designs.com",
"name": "selvam R",
"commentText": "mani selvam"
}, {
"created": 1485511936350,
"role": [
"kp"
],
"email": "selvam#e21designs.com",
"name": "selvam R",
"commentText": "mani selvam"
}],
"created": "2016-12-28T15:00:58.777Z",
"isCurrentUserOwner": false
};
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="mani in name.comments ">
<td>{{$index + 1}}</td>
<td>{{ mani.role[0] }}</td>
</div>
</body>
</html>
Your mani.role is an array, so do something like this:
<td><span ng-repeat="r in mani.role">{{ r }} </span></td>
Your data looks like Json data, so what you need is to read Json data through AngularJS by creating module like this:
var App = angular.module('App', []);
App.controller('Ctrl', function($scope, $http) {
$http.get('data.json')
.then(function(res){
$scope.data = res.data;
});
});
Also, w3schools helpful in your case $http in AngularJS
Im taking my first steps in json.
There is a huge database where you can query all kinds of statistics regarding my country. Like population
http://px.hagstofa.is/pxen/pxweb/en
Now, if you surf the link above to say population you end up here :
http://px.hagstofa.is/pxen/pxweb/en/Ibuar/Ibuar__mannfjoldi__1_yfirlit__arsfjordungstolur/MAN10001.px/?rxid=f4a21b41-fb7a-45dc-9aec-62ae2d3cea5c
If you select some options you get here :
http://px.hagstofa.is/pxen/pxweb/en/Ibuar/Ibuar__mannfjoldi__1_yfirlit__arsfjordungstolur/MAN10001.px/table/tableViewLayout1/?rxid=f4a21b41-fb7a-45dc-9aec-62ae2d3cea5c
Click the About table and then click "Make this table available in your application"
Now you see a url for posting to json and the json query......
Ive been trying now for few hours to get any kind of data from this url, but I just cant seem to dig it out.
I tried something like this :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>JSON Tutorial</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$.getJSON('http://px.hagstofa.is/pxis/api/v1/is/Ibuar/mannfjoldi/2_byggdir/sveitarfelog/MAN02001.px', function(data) {
console.log(data.variables)
})
</script>
</body>
</html>
Which gave me the next objects.. But I cannot figure out how to get some statistics.....
for example :
female population in 2015
Any help is very much needed.
EDIT :
Few hours later , im still stuck, but im up to this code now :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>JSON Tutorial</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$.ajax({
url: 'http://px.hagstofa.is/pxis/api/v1/is/Ibuar/mannfjoldi/2_byggdir/sveitarfelog/MAN02001.px',
dataType: 'json',
type: 'get',
cache: false,
success: function(data) {
$(data.variables).each(function(index, value) {
console.log(value.values.Alls + ' test ' + value.values );
document.write(value.values[0] + '<br>');
});
}
});
</script>
</body>
</html>
Best regards
The data.variables is an array of four objects. Each object contains four properties, among which are valueTexts and values. So you need a first loop for the first array of four objects, then another loop to find the valueTexts / values pairs:
$.getJSON('http://px.hagstofa.is/pxis/api/v1/is/Ibuar/mannfjoldi/2_byggdir/sveitarfelog/MAN02001.px', function(data) {
console.log (data.variables);
for( let i = 0; i < data.variables.length; i++ ){
console.info( data.variables[i].text );
for( let k = 0; k < data.variables[i].valueTexts.length; k++ ){
console.log( data.variables[i].valueTexts[k] + ' ' + data.variables[i].values[k] );
}
}
});
Below is a working solution for my question :
There is probably a better way to do this , but I needed a query for the POST, and that gave me results.
Now I just need to make this code spit out the results in csv or xml file.
If anyone has a solution for that , i'd be very thankful.
<html lang="en">
<meta charset="utf-8">
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<script>
var query = {
"query": [
{
"code": "Sveitarfélag",
"selection": {
"filter": "item",
"values": [
"Alls"
]
}
},
{
"code": "Aldur",
"selection": {
"filter": "item",
"values": [
"Alls"
]
}
},
{
"code": "Ár",
"selection": {
"filter": "item",
"values": [
"18"
]
}
},
{
"code": "Kyn",
"selection": {
"filter": "item",
"values": [
"Alls"
]
}
}
],
"response": {
"format": "csv"
}
};
query = JSON.stringify(query);
$.ajax({
type: "POST",
url: "http://px.hagstofa.is/pxis/api/v1/is/Ibuar/mannfjoldi/2_byggdir/sveitarfelog/MAN02001.px",
data:query,
success: function(json) {
document.write(json);
}
});
</script>
</html>