admin管理员组文章数量:1335386
Adding to Stack Overflow after leeching for long enough.
What I have:
- Google Visualization product
- Data read from database or table and loaded into datatable.
- Datatable is used to create Google Visualization graphics.
- Button or link to "Download to CSV" which I need to be loaded as per the current configuration of the data. I.e. after all processing and changes, including controls.
Now I want to press the downloadCSV javascript function with a datatable (global unfortunately) with the filename. I have taken the download code from one of the answers from the thread... is there any way to specify a suggested filename when using data uri
I hope people find this helpful.
Raven
<html>
<head>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
// Initial Part extracted from [Visualization: Area Chart][2]
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
var data;
function drawChart() {
data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
// Additional Code
function downloadCSV(filename) {
jsonDataTable = data.toJSON();
var jsonObj = eval('(' + jsonDataTable + ')');
output = JSONObjtoCSV(jsonObj,',');
}
function JSONObjtoCSV(jsonObj, filename){
filename = filename || 'download.csv';
var body = ''; var j = 0;
var columnObj = []; var columnLabel = []; var columnType = [];
var columnRole = []; var outputLabel = []; var outputList = [];
for(var i=0; i<jsonObj.cols.length; i++){
columnObj = jsonObj.cols[i];
columnLabel[i] = columnObj.label;
columnType[i] = columnObj.type;
columnRole[i] = columnObj.role;
if (columnRole[i] == null) {
outputLabel[j] = '"' + columnObj.label + '"';
outputList[j] = i;
j++;
}
}
body += outputLabel.join(",") + String.fromCharCode(13);
for(var thisRow=0; thisRow<jsonObj.rows.length; thisRow++){
outputData = [];
for(var k=0; k<outputList.length; k++){
var thisColumn = outputList[k];
var thisType = columnType[thisColumn];
thisValue = jsonObj.rows[thisRow].c[thisColumn].v;
switch(thisType) {
case 'string':
outputData[k] = '"' + thisValue + '"'; break;
case 'datetime':
thisDateTime = eval("new " + thisValue);
outputData[k] = '"' + thisDateTime.getDate() + '-' + (thisDateTime.getMonth()+1) + '-' + thisDateTime.getFullYear() + ' ' + thisDateTime.getHours() + ':' + thisDateTime.getMinutes() + ':' + thisDateTime.getSeconds() + '"';
delete window.thisDateTime;
break;
default:
outputData[k] = thisValue;
}
}
body += outputData.join(",");
body += String.fromCharCode(13);
}
uriContent = "data:text/csv;filename=download.csv," + encodeURIComponent(body);
newWindow=downloadWithName(uriContent, 'download.csv');
return(body);
}
function downloadWithName(uri, name) {
//
function eventFire(el, etype){
if (el.fireEvent) {
(el.fireEvent('on' + etype));
} else {
var evObj = document.createEvent('Events');
evObj.initEvent(etype, true, false);
el.dispatchEvent(evObj);
}
}
var link = document.createElement("a");
link.download = name;
link.href = uri;
eventFire(link, "click");
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<button id="CSVDownload" onclick="downloadCSV('download.csv')" title="Download to CSV">Download to CSV</Button>
</body>
</html>
Adding to Stack Overflow after leeching for long enough.
What I have:
- Google Visualization product
- Data read from database or table and loaded into datatable.
- Datatable is used to create Google Visualization graphics.
- Button or link to "Download to CSV" which I need to be loaded as per the current configuration of the data. I.e. after all processing and changes, including controls.
Now I want to press the downloadCSV javascript function with a datatable (global unfortunately) with the filename. I have taken the download code from one of the answers from the thread... is there any way to specify a suggested filename when using data uri
I hope people find this helpful.
Raven
<html>
<head>
<script type="text/javascript" src="https://www.google./jsapi"></script>
<script type="text/javascript">
// Initial Part extracted from [Visualization: Area Chart][2]
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
var data;
function drawChart() {
data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
// Additional Code
function downloadCSV(filename) {
jsonDataTable = data.toJSON();
var jsonObj = eval('(' + jsonDataTable + ')');
output = JSONObjtoCSV(jsonObj,',');
}
function JSONObjtoCSV(jsonObj, filename){
filename = filename || 'download.csv';
var body = ''; var j = 0;
var columnObj = []; var columnLabel = []; var columnType = [];
var columnRole = []; var outputLabel = []; var outputList = [];
for(var i=0; i<jsonObj.cols.length; i++){
columnObj = jsonObj.cols[i];
columnLabel[i] = columnObj.label;
columnType[i] = columnObj.type;
columnRole[i] = columnObj.role;
if (columnRole[i] == null) {
outputLabel[j] = '"' + columnObj.label + '"';
outputList[j] = i;
j++;
}
}
body += outputLabel.join(",") + String.fromCharCode(13);
for(var thisRow=0; thisRow<jsonObj.rows.length; thisRow++){
outputData = [];
for(var k=0; k<outputList.length; k++){
var thisColumn = outputList[k];
var thisType = columnType[thisColumn];
thisValue = jsonObj.rows[thisRow].c[thisColumn].v;
switch(thisType) {
case 'string':
outputData[k] = '"' + thisValue + '"'; break;
case 'datetime':
thisDateTime = eval("new " + thisValue);
outputData[k] = '"' + thisDateTime.getDate() + '-' + (thisDateTime.getMonth()+1) + '-' + thisDateTime.getFullYear() + ' ' + thisDateTime.getHours() + ':' + thisDateTime.getMinutes() + ':' + thisDateTime.getSeconds() + '"';
delete window.thisDateTime;
break;
default:
outputData[k] = thisValue;
}
}
body += outputData.join(",");
body += String.fromCharCode(13);
}
uriContent = "data:text/csv;filename=download.csv," + encodeURIComponent(body);
newWindow=downloadWithName(uriContent, 'download.csv');
return(body);
}
function downloadWithName(uri, name) {
// https://stackoverflow./questions/283956/is-there-any-way-to-specify-a-suggested-filename-when-using-data-uri
function eventFire(el, etype){
if (el.fireEvent) {
(el.fireEvent('on' + etype));
} else {
var evObj = document.createEvent('Events');
evObj.initEvent(etype, true, false);
el.dispatchEvent(evObj);
}
}
var link = document.createElement("a");
link.download = name;
link.href = uri;
eventFire(link, "click");
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<button id="CSVDownload" onclick="downloadCSV('download.csv')" title="Download to CSV">Download to CSV</Button>
</body>
</html>
- For getting data from a Google Chart, I am not sure of the specifics, but this fiddle by @asgallant works. There may be a way to do this with filtered data, but I'm not clever enough to figure it out. Hopefully he will share his insight. – jmac Commented Jul 25, 2013 at 23:49
1 Answer
Reset to default 5I'm going to add a slightly simpler way to do export a google table to CSV. You can use Google Visualization api. Suppose you have the google table called dataTable in your scope. Then use the following code to download it as .csv.
Code:
$('#Export').click(function () {
var csvFormattedDataTable = google.visualization.dataTableToCsv(dataTable);
var encodedUri = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csvFormattedDataTable);
this.href = encodedUri;
this.download = 'table-data.csv';
this.target = '_blank';
});
Explanation:
Here #Export is an anchor element set up as <a id="Export" href="#">Download as csv</a> in your page. Google visualization api's
google.visualization.dataTableToCsv()
does all the hard work of reformatting the table object as csv. More information on this at Google Visualization Doc.
Here I'm using jQuery selector $. If you want to do this without jQuery, replace $('#Export').click(function () { // Function definition here.}); with document.getElementById("Export").onclick = function() { // function definition here};
Once the csv formatted data is returned by the method above, we leverage download attribute to download the data as a csv file with the file name table-data (you can name this whatever you like.
Important: download attribute is not supported by Internet Explorer at the time of this answer. This has been tested with Google Chrome and Mozilla Firefox. For more information download attribute .
本文标签： javascriptGoogle Visualization Datatable to CSV downloadStack Overflow
版权声明：本文标题：javascript - Google Visualization Datatable to CSV download - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742385910a2465027.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论