d3.js import csv using accessor function and callback - csv

I am trying to understand how to use d3.csv(url[, accessor][, callback]) using both the accessor and the callback function as specified in the official API documentation (see link for point 1). DISCLAIMER: I'm new to d3.js.
TL,WR: I get an empty console response to the console.log(data) command in the callback function and get undefined when I call console.log on the variable that should be holding the data.
I have found two easy examples to get to understand how it works.
The API itself has an example: d3.js API at github.com
A simple example at tonygarcia.me: Chart-data at tonygarcia.me
To execute these I have created both an html file for the code and a csv file with the data and then launched a simple server with the command python -m SimpleHTTPServer 8888 &.
Case 1: Official API documentation.
The html:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js">
</script>
</head>
<body>
<script type="text/javascript">
var datas;
d3.csv("example.csv", function(d) {
return {
year: new Date(+d.Year, 0, 1), // convert "Year" column to Date
make: d.Make,
model: d.Model,
length: +d.Length // convert "Length" column to number
};
}, function(error, rows) {
console.log(rows);
datas = rows;
});
</script>
</body>
</html>
The csv (example.csv):
Year,Make,Model,Length
1997,Ford,E350,2.34
2000,Mercury,Cougar,2.38
The output on the console (empty) and then:
> console.log(datas);
undefined VM2228:2
undefined
The expected result:
[
{"Year": "1997", "Make": "Ford", "Model": "E350", "Length": 2.34},
{"Year": "2000", "Make": "Mercury", "Model": "Cougar", "Length": 2.38}
]
Case 2: Chart-data at tonygarcia.me
The html:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js">
</script>
</head>
<body>
<script type="text/javascript">
var datas;
// load data from a CSV file
d3.csv('home.csv',
function(d) {
return {
key: d.state,
value: +d.value
};
}, function(dataset){
// code to generate chart goes here
datas = dataset;
console.log( dataset );
});
</script>
</body>
</html>
The cvs (home.cvs):
state,value
Alabama,71.6
Alaska,22.4
Arizona,147.5
Arkansas,59.9
<truncated>
The output on the console (empty) and then:
> console.log(datas);
undefined VM2265:2
undefined
The expected result (you can try it on the webpage):
[{"key":"Alabama","value":71.6},{"key":"Alaska","value":22.4},
{"key":"Arizona","value":147.5},{"key":"Arkansas","value":59.9},...]
So, what am I doing wrong? If I only use a callback function with no accessor everything works. Using the accessor is interesting to format the data from sting to f.e. number.
Thank you all for your help!
Best,
Michael
EDIT: Correction: tonygarcia.com --> tonygarcia.me


the callback should be set up like so:
d3.csv("your_file_url.csv", function (error, data) {
//Here you should put the code for your visualization.
});
Your first example would then be:
d3.csv("example.csv", function (error, data) {
console.log(data) // this will output the data contained in your csv
});
The fact is that the function d3.csv already parses the data as it gets loaded, so if you load the example.csv file it will be read and then treated like an array of values


It's a version issue. v3 works, v2 doesn't.
This code links to v2:
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js">
</script>
To be exact it's contents are:
document.write("<script src='http://d3js.org/d3.v2.js'></script>");
To make it work I linked it to the newest version like this:
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js">
</script>
This solves the main issue and I will consider the question solved. (Haven't figured out how Toni Garcia is doing it as I used his js and couldn't get it working, but this is irrelevant.)
Thanks all for your help and sorry for answering my own question.

Related

Vue-if conditional not working. if-Else block appears to be skipped

This is a follow up question to one I posted here: (I have 2 records in a database Vue outputs 8 records). In that question, was having trouble fetching a JSON list of games for an online casino I'm building. In my original question, Vue was unable to load the JSON as JSON, but now that's fixed.
I am now trying to parse this JSON using Vue to loop through all of the games in the games array and print either In progress or Game is joinable. However, instead of getting 8 different records from the database (from a weird response array object returned by this.$http.get. I now see that my JSON list is seemly being ignored by my Vue template; none of the objects in the collection get outputted (again either In progress or Joinable. I just get a blank list.
Is my v-if conditional programmed correctly? I checked the documentation and everything seems to be set up correctly. I find it odd that neither the v-if, or v-else, divs> are executed.
vuewgames.blade.php
#extends('app')
#section('content')
<strong>Below is a list of joinable games</strong>
<div class="container">
<games></games>
</div>
<div id="games-list">
<template id="games-template">
<ul class="list-group">
<li class="list-group-item" v-for="game in games">
<strong>play against #{{ game.player1 }}</strong>
</li>
</ul>
<pre>#{{ games | json }}</pre>
</template>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.js"></script>
<script src="js/all.js"></script>
#endsection
all.js
Vue.component('games', {
template: '#games-template',
data: function() {
return {
games: []
};
},
created: function () {
var self = this;
this.$http.get('/api/games').then(function (response) {
// fetch array from jsoN object
response.json().then(function (games) {
console.log(games);
});
});
},
});
new Vue({
el: 'body'
});

The reason that you're not getting the information to the instance is due to scope.
When you're using closures in javascript the scope of the this isn't the containing object.
One way to get around this is to assign this to another variable outside of the function and then use that instead. You should be able to get it working by changing your created method to be:
created: function () {
var self = this;
this.$http.get('/api/games').then(function (response) {
// fetch array from jsoN object
response.json().then(function (games) {
self.games = games;
});
});
},
Hope this helps!

Json feeding dataTable through ajax call

I have a simple testing script:
<script type="text/javascript" language="javascript" >
$(document).ready(function() {
$('#dataTables-example').DataTable({
"processing": true,
"serverSide": true,
"ajax": "../server/studentsdata.php"
} );
} );
</script>
This is my json response:
{"draw":0,"recordsTotal":57,"recordsFiltered":57,"data":[["Tiger Nixon","320800","61"],["Garrett Winters","170750","63"],["Ashton Cox","86000","66"],["Cedric Kelly","433060","22"],["Airi Satou","162700","33"],["Brielle Williamson","372000","61"],["Herrod Chandler","137500","59"],["Rhona Davidson","327900","55"],["Colleen Hurst","205500","39"],["Sonya Frost","103600","23"],["Jena Gaines","90560","30"],["Quinn Flynn","342000","22"],["Charde Marshall","470600","36"],["Haley Kennedy","313500","43"],["Tatyana Fitzpatrick","385750","19"],["Michael Silva","198500","66"],["Paul Byrd","725000","64"],["Gloria Little","237500","59"],["Bradley Greer","132000","41"],["Dai Rios","217500","35"],["Jenette Caldwell","345000","30"],["Yuri Berry","675000","40"],["Caesar Vance","106450","21"],["Doris Wilder","85600","23"],["Angelica Ramos","1200000","47"],["Gavin Joyce","92575","42"],["Jennifer Chang","357650","28"],["Brenden Wagner","206850","28"],["Fiona Green","850000","48"],["Shou Itou","163000","20"],["Michelle House","95400","37"],["Suki Burks","114500","53"],["Prescott Bartlett","145000","27"],["Gavin Cortez","235500","22"],["Martena Mccray","324050","46"],["Unity Butler","85675","47"],["Howard Hatfield","164500","51"],["Hope Fuentes","109850","41"],["Vivian Harrell","452500","62"],["Timothy Mooney","136200","37"],["Jackson Bradshaw","645750","65"],["Olivia Liang","234500","64"],["Bruno Nash","163500","38"],["Sakura Yamamoto","139575","37"],["Thor Walton","98540","61"],["Finn Camacho","87500","47"],["Serge Baldwin","138575","64"],["Zenaida Frank","125250","63"],["Zorita Serrano","115000","56"],["Jennifer Acosta","75650","43"],["Cara Stevens","145600","46"],["Hermione Butler","356250","47"],["Lael Greer","103500","21"],["Jonas Alexander","86500","30"],["Shad Decker","183000","51"],["Michael Bruce","183000","29"],["Donna Snider","112000","27"]]}
But I keep receiving this error:
DataTables warning: table id=dataTables-example - Invalid JSON
response. For more information about this error, please see
http://datatables.net/tn/1
I tried to validate my json response on a few websites, and they all show it as valid. Why is Datatables rejecting it?
A update:
If I paste my json response directly on the php page, it works. Look like the json is right, but for some reason the script is not sending correctly. When I try to access the script directed (by accessing the .php page), I get the correct json.

Update!:
Maybe its because of extra properties you are passing into dataTable!
try to change php part to produce something like this :
{
"data":[
["name":"Tiger Nixon","value":"320800","age":"61"],
["name":"Garrett Winters","value":"170750","age":"63"]
.
.
.
]
}

jqGrid call restful service successfully but failed to show the jqGrid ui

This is the RESTful data format
{"user":[
{"id":"aupres","passwd":"aaa","age":45,"name":"father"},
{"id":"hwa5383","passwd":"bbb","age":40,"name":"mother"},
{"id":"julian","passwd":"ccc","age":15,"name":"son"}
]}
My jqGrid client call the above data successfully. The below image shows the result:
But this code fails to display the response to the jqGrid. This is my client code
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>jqGrid Test</title>
<link rel="stylesheet" type="text/css" media="screen" href="jquery-ui.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="ui.jqgrid.css"/>
<script type="text/javascript" src="jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="jquery.jqGrid.min.js"></script>
</head>
<body>
<table id="grid"></table>
<div id="pager"></div>
<script type="text/javascript">
$(document).ready(function(){
$Grid = $("#grid");
$Grid.jqGrid({
mtype: "get",
url: "/JQueryJsonWeb/rest/services/getJson/aupres",
contentType: "text/json; charset=utf-8",
dataType: "json",
jsonReader : {
root : "user"
},
colNames : [
'id',
'passwd',
'age',
'name'
],
colModel : [
{ name : 'id', width:40, align:'center'},
{ name : 'passwd', width:80, align:'left' },
{ name : 'age', width:80, align:'left' },
{ name : 'name', width:80, align:'right' }
],
pager : '#pager',
rowNum : '10',
loadComplete : onloadComplete,
loadError : onloadError,
gridComplete : ongridComplete
});
function onloadComplete(jsonData, status) {
console.log(jsonData) **// This method shows the above image.**
}
function onloadError(status) {
console.log(status)
}
function ongridComplete() {
console.log("fiished!!!");
}
});
</script>
</body>
</html>

Please read the comment to your previous question:
JavaScript is case sensitive language. There are NO dataType: "json" parameters and the default datatype: "xml" will be used.
Non-existing parameters contentType will be ignored too. The returned are wrong if one interpret there as XML data.
The output which you included come from onloadError and not from onloadComplete. The parameters of onloadError are jqXHR, textStatus, errorThrown. You included the console output of the jqXHR object. See the answer.
You should declare variables in JavaScript : use var $Grid = $("#grid"); instead of $Grid = $("#grid");. Including "use strict" directive at the beginning on top functions helps to detect such errors (see here). In the same way I'd recommend you include semicolon after every statement (see console.log(status) and console.log(jsonData)).
You should include in all your question which version of jqGrid you use and from which fork (free jqGrid - my fork, commercial Guriddo jqGrid JS or an old jqGrid in version <=4.7). The possibilities of the forks will be more and more different. Thus it's important which one you use (or can use).

How can I read a CSV file with headers in Webix datatable?

I want to read a CSV file with headers to populate a datatable widget following this documentation. However, I get an uncaught exception: [object XMLHttpRequest] error when I execute the following code:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css">
<script src="http://cdn.webix.com/edge/webix_debug.js" type="text/javascript"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdn.opencpu.org/opencpu-0.4.js"></script>
</head>
<body>
<script type="text/javascript" charset="utf-8">
webix.ui({
rows:[
{ view:"template",
type:"header", template:"Read in a CSV" },
{ view:"datatable",
columns:[
{ id:"#x#", header:"x" },
{ id:"#y#", header:"y" },
{ id:"#z#", header:"z" }],
datatype:"csv",
autoheight:true,
autowidth:true,
url:"data/basic.csv"
}
]
});
</script>
</body>
</html>
In addition, I see the following notifications appear in the upper right-hand corner of the browser.
The error details from the log are:
"XHTTP:" XMLHttpRequest { onreadystatechange: webix.ajax.prototype._send/x.onreadystatechange(), readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, status: 0, statusText: "", responseType: "", response: "x,y,z
1,1,23.3
1,2,15.8
2,1,88.3
2,2,83.5
", responseText: "x,y,z
1,1,23.3
1,2,15.8
2,1,88.3
2,2,83.5
" } webix_debug.js:3240
uncaught exception: [object XMLHttpRequest]
It appears to read the CSV file just fine. Why doesn't it display? I have to admit, I find the documentation confusing as it doesn't mention CSV headers at all.

Are you run the sample page by the http (with some kind of web server), or open it directly from a file system?
Due to security limitations, ajax request may not work for pages that was loaded directly from a file system.
Also, to map data correctly, you need to use datatable columns config like next
columns:[
{ id:"data0", header:"x" },
{ id:"data1", header:"y" },
{ id:"data2", header:"z" }],
DataTable will not recognize header and map CSV data to abstract data0..dataN properties.

dhtmlxtree XML refers to non existing parent

I am working with dhtmlxtree and are having issues getting it loading data from json fed to it by an external script. I am getting the error below. Any ideas? Thanks!
ErrorType: LoadXML
Error: Incorrect JSON
My HTML looks like this:
<body>
<div id="treeBox" style="width: 200px; height: 200px; overflow: auto;"></div>
<script>
jQuery( document ).ready(function() {
tree = new dhtmlXTreeObject("treeBox", "100%", "100%", 0);
tree.setSkin('dhx_skyblue');
tree.setImagePath("../sma-js/dhtmlxtree/img/csh_bluebooks/");
tree.setXMLAutoLoading("sma-php/loadcustomers.php");
tree.setDataMode("json");
//load first level of tree;
tree.loadJSON("sma-php/loadcustomers.php?id=PNR0000000001");
});
When I manually run the script, the JSON returned looks like this:
[{"phys_addr_state":"ACT","phys_addr_postcode":"2167","install_address":"2 Eade Street - Radiative, John"},{"phys_addr_state":"NSW","phys_addr_postcode":"2263","install_address":"69 The Corso - Flare, Steve"}, {"phys_addr_state":"NSW","phys_addr_postcode":"2112","install_address":"17 Price Street - Solar, Anita"},{"phys_addr_state":"QLD","phys_addr_postcode":"4001","install_address":"71 Eagle Street - Corona, Linda"},{"phys_addr_state":"VIC","phys_addr_postcode":"3053","install_address":"15 Lygon Street - Photon, Marco"}]
The issue I notice is the structure / hierarchy of my JSON. It contains an item per record, whereby other examples I see in dhtml site show a "hierarchical" JSON record. My encode on the server is done by:
echo json_encode($data);
The other dhtml example of JSON (for comparison) is:
{ id: 0, item: [{ id: 1, text: "1111" }, { id: 2, text: "222222", item: [{ id: "21", text: "child" }] }, { id: 3, text: "3333" }]}
Is there a different way to encode the sql records whereby all records of same state will be grouped together under the same entry per "id: 2 item above" per example above?
My header includes the following:
<script src="../sma-js/d3.v3/d3.v3.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../sma-js/dhtmlxtree/css/dhtmlxtree.css">
<script src="../sma-js/dhtmlxtree/js/dhtmlxcommon.js"></script>
<script src="../sma-js/dhtmlxtree/js/dhtmlxtree.js"></script>
<script src="../sma-js/dhtmlxtree/js/dhtmlxtree_json.js"></script>

You should use specific JSON format, the same as in dhtmlx demos. However, it would be easier and faster to use dhtmlxConnector (free to use with dhtmlx components) instead of custom scripts. The Connector helps to generate XML output, and all you need is to set up table fields for tree XML.