Google Visualization Datatable to CSV download

Question

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.com/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.com/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](http://jsfiddle.net/asgallant/8FavC/) 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, Jul 25 '13 at 23:49

kovac · Answer 1 · 2016-07-15T02:49:11.753

I'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 .

Little update : check this for compatibility : http://caniuse.com/#feat=download (resume : still IE ko) — jy95, Mar 30 '17 at 07:28

Google Visualization Datatable to CSV download

1 Answers1

Linked