CODEWITHSUNDEEP
javascriptcsv
Badmiral
Badmiral

Reputation: 1589

google visualization datatable not going to csv

Been messing around with this on google playground, and it appears to work without any errors. However when I go to do the export options it doesn't give me anything. Any idea?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
  Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">
function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Name', 'Height', 'Smokes'],
    ['Tong Ning mu', 174, true],
    ['Huang Ang fa', 523, false],
    ['Teng nu', 86, true]
  ]);
  var options = { 'showRowNumber': true };
  options['page'] = 'enable';
  options['pageSize'] = 3;
  options['pagingSymbols'] = { prev: 'prev', next: 'next' };
  options['pagingButtonsConfiguration'] = 'auto';

  var components = [
    { type: 'html', datasource: data },
    { type: 'csv', datasource: data }
  ];

  var container = document.getElementById('toolbar_div');
  google.visualization.drawToolbar(container, components);

  // Create and draw the visualization.
  visualization = new google.visualization.Table(document.getElementById('table'));
  visualization.draw(data, options);
}


google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="table"></div>
<dov id="toolbar_div"></div>
</body>
</html>

​

Upvotes: 0

Views: 1506

Answers (2)

kovac
kovac

Reputation: 5389

Code:

$('#Export').click(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';
});

Explanation:

Check my answer posted here for an explanation of the code. Export is the Id of the anchor element on the page with the download option.

Upvotes: 0

skovsgaard
skovsgaard

Reputation: 173

According to the documentation you have to pass the data through a URL and not any hand-populated data objects. See: https://developers.google.com/chart/interactive/docs/gallery/toolbar

Usage To use a toolbar, your visualization must get its data from a URL; you cannot pass in hand-populated DataTable or DataView objects. You will pass the URL of the data used to populate your visualization into the drawToolbar() method.

Upvotes: 1

Related Questions