I have to load some data stored in tsv file to create a bar chart with d3js.
I use this code to read the file:
d3.tsv("data.tsv", function(error, data) {
The data inside the file change at every click of a button that invokes a servlet function to update these data.
The problem is that I can't get the updating data, so I am stuck on the fist data stored in the file.
I avoid this problem creating n-files and reading these different files.
But I want to use the same file.
So here you go,
Onclick get the new file
Once you are sure you have the updatedFile read it using d3.tsv (you can use callback here) and inside that give a call to the function which does drawing
This is because your browser is caching the file and not actually reloading it. You can avoid this by adding a changing query parameter to the call, which doesn't do anything but prevents the browser from caching:
var counter = 0;
// ...
d3.tsv("data.tsv?foo=" + i++, function(error, data) {
// ...
});
Related
I have a table that receives a .JSON.
I have created some filters and I would like to save them but without saving the information that I received at that time with the filter.
I already tried:
pivot.getData({},
function(data) {
console.log(data);
},
function(data) {
console.log(data);
}
);
Too
var report = pivot.getReport();
console.log(report);
by last
pivot.save({filename:'reporte.json',embedData : false });
Thanks for your help
There are several ways to achieve what you need:
You can still use:
var report = pivot.getReport();
the data information is stored in report["dataSource"]. In such a
case, you can easily remove the unnecessary object the following
way:
delete report["dataSource"];
After that, the JSON config is saved as a file to the disk using
the following approach:
JavaScript: Create and save file.
The disadvantage of such a solution is that you cannot use the saved
JSON config to restore the view since it lacks the data part. You will need to add the "dataSource" part when you decide to restore
the view. Therefore, the solution that described below looks better
for me.
You can create a web service that returns the data file or simply put the JSON data file to the server. In such a case,
WebDataRocks will load the data for you. Then, when you decide to
save the config, only the link to the data will be saved to config.
Here is the reference to docs:
https://www.webdatarocks.com/doc/data-source-object/. The
"filename" property represents the link which leads to your data
file.
In such a case you don't need any additional customization for the
"Save" functionality. You can use a default one. Then it is easy to restore the view using the saved config.
I'm testing the sandey chart from the following link: https://gist.github.com/d3noob/c2637e28b79fb3bfea13
But I can only see the the chart in Firefox, not in Chrome. I suspect because Chrome doesn't allow to access data from an external file.
Therefore, I'm trying to integrate the json code, but when I try it, the chart doesn't show up in Firefox
I have added a variable with all the json code like:
var dataset = {"nodes":[{"node":0,"name":"node0"},{"node":1,"name":"node1"},{"node":2,"name":"node2"},{"node":3,"name":"node3"},{"node":4,"name":"node4"}],"links":[{"source":0,"target":2,"value":2},{"source":1,"target":2,"value":2},{"source":1,"target":3,"value":2},{"source":0,"target":4,"value":2},{"source":2,"target":3,"value":2},{"source":2,"target":4,"value":2},{"source":3,"target":4,"value":4}]};
And I've replaced this line of code:
d3.json("sankey-formatted.json", function(error, graph) {
For this one (just replacing the name of the file by the dataset variable):
d3.json(dataset, function(error, graph) {
,,, but not the chart is not showing. Any ideas why the sankey chart is not showing?
Thanks
The problem you're facing is that d3.json...
...returns a new request to get the JSON file at the specified url with the default mime type application/json.
That being said, the solution is simpler than you think: since you already have a variable with all the data, just name it as graph (your d3.json function loads the file and populates a data array called graph):
var graph = {"nodes":[{"node":0,"name":"node0"},...
And drop the d3.json function, don't forgetting to remove the closing curly bracket/parenthesis:
d3.json("sankey-formatted.json", function(error, graph) {//remove this...
//your function
});//...and don't fortget to remove this too.
Please help by taking StockChart. Pinning three .json files as in the example , But does not work. The code is below:
www.jsfiddle.net/d8xwjxg7/2
You have an error in your code:
$.getJSON('http://www.iklimat.pl/'+name()+'.php', function (data) {
Should be:
$.getJSON('http://www.iklimat.pl/'+ name +'.php', function (data) {
Since name is a string not a function.
Also, this will not work in a JSFiddle since you cannot load files not from the site the javascript is running on without the endpoint you are accessing setting the access-allow-control-origin header.
EDIT:
I have sorted out the issue you were having getting data, however there is an issue with that data.
http://jsfiddle.net/d8xwjxg7/5/
My application needs to read in a large dataset and pipe it to the client to manipulate with D3.js. The problem is, on large datasets, the reading/loading of the file contents could take a while. I want to solve this using streams. However, I'm unsure of how to do so in the context of the Sails framework.
What I want to do is read the contents of the file and pipe it to a rendered page. However, I can't figure out how to pipe it through if I use something like res.view('somePage', { data: thePipedData });.
I currently have something like this:
var datastream = fs.createReadStream(path.resolve(DATASET_EXTRACT_PATH, datatype, dataset, dataset + '.csv'));
datastream.pipe(res);
...
return res.view('analytics', { title: 'Analytics', data: ??? });
What's the best way to approach this?
Based on your example it seems like the best course of action would be to set up a separate endpoint to serve just the data, and include it on the client via a regular <script> tag.
MyDataController.js
getData: function(req, res) {
/* Some code here to determine datatype and dataset based on params */
// Wrap the data in a Javascript string
res.write("var theData = '");
// Open a read stream for the file
var datastream = fs.createReadStream(
path.resolve(DATASET_EXTRACT_PATH, datatype, dataset, dataset + '.csv')
);
// Pipe the file to the response. Set {end: false} so that res isn't closed
// when the file stream ends, allowing us to continue writing to it.
datastream.pipe(res, {end: false});
// When the file is done streaming, finish the Javascript string
datastream.on('end', function() {
res.end("';");
});
}
MyView.ejs
<script language="javascript" src="/mydata/getdata?datatype=<%=datatype%>&etc.."></script>
MyViewController.js
res.view('analytics', {datatype: 'someDataType', etc...});
A slight variation on this strategy would be to use a JSONP-style approach; rather than wrapping the data in a variable in the data controller action, you would wrap it in a function. You could then call the endpoint via AJAX to get the data. Either way you'd have the benefit of a quick page load since the large data set is loaded separately, but with the JSONP variation you'd also be able to easily show a loading indicator while waiting for the data.
I am new to JavaScript and D3 and cannot figure out how to allow users to upload a csv file and displaying a scatterplot using d3. I am using the tag to allow user to select file. But I am not sure on what the next step should be. Is there a way to read the csv file and store it's contents in a d3 array and then displaying a graph using that array ??
Thanks in advance
Look into the d3.csv function (https://github.com/mbostock/d3/wiki/CSV). Here is a simple example
//load up the example.csv file
d3.csv('example.csv',
function(data){
//this is an object, the contents of which should
//match your example.csv input file.
console.log(data);
// do more stuff with 'data' related to
// drawing the scatterplots.
//
//-----------------------
},
function(error, rows) {
console.log(rows);
};
);
There are a number of examples online showing you how to go from a data array to a scatterplot...it's a matter of modifying those examples to fit your specific data format.