I need to extract the data from an excel sheet into csv or json format and then display the content in the form of charts(bar, pie and line) using javascript. I have been working on it since 2 days and not able to find any good source. Any help regarding this would be appreciated. Thank you.
You can also pull data from a google spreadsheet as CSV data like this:
var spreadsheet = "https://docs.google.com/spreadsheet/pub?key=youruniquekeyhere&single=true&gid=2&output=csv"
d3.csv(spreadsheet, function (error, data) {
// use your data here
});
Notice the output=csv at the end of that URL.
gid=0 is worksheet 1, gid=1 is worksheet 2 and so on. You must publish your worksheet to the web first to make it available.
In addition to Christophe Viau's tutorials, here are more resources:
https://github.com/mbostock/d3/wiki/Gallery#basic-charts
http://www.d3noob.org
Related
(I'm learning and not a pro, so please excuse any faux pas)
I am aware that the PHP, LOAD DATA function may be what I need, but I can't get to the file behind the Java Object.
I am trying to update a SQL table, i.e. overwrite matching dates, with data from a CSV file from Javascript buttons on one of these websites:
-"Download Data" from https://www.investing.com/rates-bonds/us-10-yr-t-note-historical-data (adjusting dates would be ideal)
-"Download Range" from https://www.barchart.com/futures/quotes/Znh18/price-history/historical
-"Download Spreadsheet" from http://quotes.wsj.com/bond/BX/TMUBMUSD10Y/historical-prices
The data looks something like this
Time,Open,High,Low,"Last Price",Change,Volume,"Open Interest"
02/08/18,121.0781,121.25,120.5313,120.8906,-0.10939999999999,2938115,0
02/07/18,121.2031,121.6094,120.8594,121,-0.48439999999999,2201308,3569670
I have used the http://simplehtmldom.sourceforge.net/ utility to extract individual pieces of data, but that seems laborious if a file exists.
e.g. currently this is my code for finding table data on the WSJ page using the file_get_html() function:
...
// Finds the last cash price
foreach($html->find('span[id=price_quote_val]') as $e){
echo str_replace("/32.","",str_replace(" ",".",$e->plaintext)). ' last cash price<br>';
$field='Last';
$value=str_replace("/32.","",str_replace(" ",".",$e->plaintext));
include('table_update.php');
}
....
Thanks!
Chris
I have read other posts, including:
Save CSV files into mysql database
Importing CSV data using PHP/MySQL
I have a Question.
I will use to d3.js using Different chart.
How can I input data using mysql?
Generally, many examples using csv or tsv data.
I know that using this.
But.. I wanna using mysql not csv or tsv dataset.
How can I do this?
data is here
Date Temperature Humidity
2010-01-01 50 40
2010-01-02 55 35
... ... ...
I using web development using flask.
data is getting json.
example)
var data = JSON.parser({{ data | tojson}});
Thanks
2 Options:
Make an XHR requests (e.g. you can use d3.json(url, function(data) {...});) from the browser and on the server side query MySQL and then use Flask's return jsonify(data).
Write out a JSON object from jinja2 directly into a template like the example you show but: var data = {{ data|tojson|safe }};. Note that this has to be in a template file being rendered by Flask's render_template function.
I am using angularjs and exporting data in excel from the table that has been uploaded.
I am using the following code:
function (e)
{
window.open('data:application/vnd.ms-excel,' + encodeURIComponent($('div[id$=exportable]').html()));
e.preventDefault();
It is allowing me to download the file but extension is missing. Can you pls guide me how to change file name and extension both for the same?
Thanks
Excel to JSON
This is basically what you are looking for, some way to turn excel to JSON data with JavaScript. Here is a link to an article about how it can be done using XLSXReader in a web app along with AngularJS.
Sample Code
$(function() {
$("#xlsxFile").change(function(event) {
var file = this.files[0],
sheets;
XLSXReader(file, true, function(xlsxData) {
sheets = xlsxData.sheets;
// Do somehting with sheets. It's a
// Javascript object with sheet names
// as keys and data as value in form of 2D array
});
});
});
Working Example
Here is a working example of the code. You can upload a csv file and have it turned into JSON.
I hope this helps.
This is public spreadsheet created using Google Drive:
https://docs.google.com/spreadsheets/d/1hA4LKZn9yKoqnSzaI6_73GQSj_ZVpB3O0kC93QM98Vs/pubhtml
How to retrieve data from Google Spreadsheet to Javascript or JSON with new Google Spreadsheets API version 3.0 ?
You can access a cell-based basic feed using the following URL structure: https://spreadsheets.google.com/feeds/cells/1hA4LKZn9yKoqnSzaI6_73GQSj_ZVpB3O0kC93QM98Vs/od6/public/basic?alt=json . By default the feed is in XML form, however, you can request JSON format using alt=json query parameter.
This feed also supports JSONP requests, so an example of fetching this data from a browser with jQuery might look like:
var url = "https://spreadsheets.google.com/feeds/cells/1hA4LKZn9yKoqnSzaI6_73GQSj_ZVpB3O0kC93QM98Vs/od6/public/basic?alt=json";
$.ajax({
url:url,
dataType:"jsonp",
success:function(data) {
// data.feed.entry is an array of objects that represent each cell
},
});
If, alternatively, you want to keep it all in the Google environment. if you're looking for a more controlled JSON generator, check out this gist:
JSONPuller
It takes in a Spreadsheet sheet and returns an array of objects, with the row that you decide as the key (defaults to whichever row is frozen)
Cheers,
I made it work using opensheet.
Steps:
Make sure the sheet as read access - Anyone with the link can view it.
Sheet should have First row as Header row with titles
Then get the sheet data as json using the following link - https://opensheet.elk.sh/spreadsheet_id/sheet_name
Replace spreadsheet_id with your sheet id and sheet_name with your sheet name. No authentication is required.
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.