dataTableToCsv - how to use it?

122 views

Skip to first unread message

drigo

unread,

Mar 25, 2019, 6:49:39 AM3/25/19

to Google Visualization API

Hi everybody,

I am a beginner with google charts and I am having an issue with DataTableToCsv function. Using your documentation (https://developers.google.com/chart/interactive/docs/datatables_dataviews), I wrote the attempt nr. 1. Unfortunately this did not work out as expected. Where's my mistake? As an alternative, I wrote the attempt nr. 2, as suggested here. Any ideas how I can overcome this issue?

Thanks in advance.

Drigo

Attempt nr.1

    <html>
      <head>
        <!--Load the Ajax API-->
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">


        // Load the Visualization API and the table package.
        google.charts.load('current', {'packages':['table']});


        // Set a callback to run when the Google Visualization API is loaded.
        google.charts.setOnLoadCallback(drawTable);


        function drawTable() {


          // Create our data table out of JSON data loaded from server.
          var data = google.visualization.arrayToDataTable([
                ['Name', 'Number'],
                ['Ramanujan', 1729],
                ['Gauss', 5050]
              ]);


          var table = new google.visualization.Table(document.getElementById('table_div'));
          table.draw(data, {showRowNumber: true, width: '30%', height: '30%'});


          var csv = google.visualization.dataTableToCsv(data);
          console.log(csv);
        }


        </script>
      </head>


<center>
      <body>
        <div id="table_div"> </div>
      </body>
</center>
    </html>

Attempt nr. 2

    <html>
      <head>
        <!--Load the Ajax API-->
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">


        // Load the Visualization API and the table package.
        google.charts.load('current', {'packages':['table']});


        // Set a callback to run when the Google Visualization API is loaded.
        google.charts.setOnLoadCallback(drawChart);


        function drawChart() {


          // Create our data table out of JSON data loaded from server.
         var data = google.visualization.arrayToDataTable([
         ['Name', 'Number'],
         ['Ramanujan', 1729],
         ['Gauss', 5050]
       ]);


          var table = new google.visualization.Table(document.getElementById('table_div'));
          table.draw(data, {showRowNumber: true, width: '30%', height: '30%'});


          document.getElementById("Export").onclick = function()  {
          var csvFormattedDataTable = google.visualization.dataTableToCsv(data);
          var encodedUri = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csvFormattedDataTable);
          this.href = encodedUri;
          this.download = 'table-data.csv';
          this.target = '_blank';
               };


        }



        </script>
      </head>


<center>
      <body>
        <div id="table_div"> </div>
      </body>
</center>
    </html>

Reply all

Reply to author

Forward

0 new messages