Save data from GoogleChart to CSV

Question

I'm working on GoogleCharts project, I wanted add function export data to CSV. I tried to make, but didin´t worked. In fiddle URL is my chart where I want add export to CSV data. Please could someone help me how to do it?? thanks, Here is code for CSV function.

Fiddle Chart: http://jsfiddle.net/ZmVcZ/292/

    function drawToolbar() {
      var components = [
          {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'}
      ];

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

    google.charts.setOnLoadCallback(draw);

Answer 1

as stated in the documentation for 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.

since you're creating a DataTable from scratch, the toolbar will not work for you...

however, there is a static method for dataTableToCsv

google.visualization.dataTableToCsv(data)

this method does not include the column headings,
have to add those manually...

to use this method, you could add a button to build the download content,

see following working snippet...

google.charts.load('current', {
  callback: drawChart,
  packages: ['controls', 'charteditor']
});

var axisX = "Cas";
var axisY = "Tlak";
var zoom = true;
var dashboard;

function konfigurace() {
  myOutput = document.getElementById('button');
  axisX = document.getElementById('axisX').value;
  axisY = document.getElementById('axisY').value;
  zoom = document.getElementById('zoomchart');

  if(document.getElementById('zoomchart').checked)
    {
      zoom = true;
    }
    else
    {
      zoom = false;
    }

  dashboard = document.getElementById('dashboard');
  drawChart();
}

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Y1');
  data.addColumn('number', 'Y2');

  var data1 = 5;
  var data2 = 100;
  for (var i = 0; i < 10000; i++) {
    data.addRows([
      [i, i + data1, i + data2]

    ]);
  }

  var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));

  var control = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control_div',
    options: {
      filterColumnIndex: 0,
      ui: {
        chartOptions: {
          height: 40,
          width: 600,
          chartArea: {
            width: '90%'
          }
        }
      }
    }

  });

  var chart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'chart_div',
    options: {
      title: 'Prubeh tlaku v case',
      titleTextStyle: {
        color: '#333',
        fontSize: 18
      },
      hAxis: {
        title: axisX
      },
      vAxis: {
        title: axisY
      },
      explorer: {
        axis: 'horizontal',
        keepInBounds: true,
        maxZoomIn: 4.0
      }
    }

  });

  function setOptions(wrapper) {
    wrapper.setOption('width', 600);
  }

  $('.csv-button').on('click', function () {
    var csvColumns;
    var csvContent;
    var downloadLink;

    // build column headings
    csvColumns = '';
    for (var i = 0; i < data.getNumberOfColumns(); i++) {
      csvColumns += data.getColumnLabel(i);
      if (i < (data.getNumberOfColumns() - 1)) {
        csvColumns += ',';
      }
    }
    csvColumns += '\n';

    // get data rows
    csvContent = csvColumns + google.visualization.dataTableToCsv(data);

    downloadLink = document.createElement('a');
    downloadLink.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvContent);
    downloadLink.download = 'data.csv';
    downloadLink.click();
    downloadLink = null;
  });

  dash.bind([control], [chart]);
  dash.draw(data);
  google.visualization.events.addListener(control, 'statechange', function() {});

}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css"/>

<table>
  <tr>
    <td colspan="3">Nastavení vlastností</td>
  </tr>
  <tr>
    <td>Nastavení názvu osy X</td>
    <td>Nastavení názvu osy Y</td>
  </tr>
  <tr>
    <td>
      <input type="text" id="axisX" maxlength="30" placeholder="Zde napíšte název osy X ...">
    </td>
    <td>
      <input type="text" id="axisY" maxlength="40" placeholder="Zde napíšte název osy Y ...">
    </td>
  </tr>
  <tr>
    <td colspan="2"> Zmena barvy prubehu a názvu</td>
  </tr>
  <tr>
    <td colspan="2">
      <input type="text" id="colorsignal" maxlength="30" placeholder="Barva vybrané osy ...">

      <tr>
        <td colspan="2">
          <input onclick="konfigurace()" type="button" class="button" value="Potvrdit a vykreslit">
        </td>
      </tr>
      <tr>
        <td colspan="3">
          <div id="dashboard"></div>
        </td>
      </tr>
      <tr>
        <td colspan="3">
          <div id="chart_div" style="width: 100%; height: 100%;"></div>
        </td>
      </tr>
      <tr>
        <td colspan="3">Výber rozsahu</td>
      </tr>
      <tr>
        <th colspan="3">
          <div id="control_div"></div>
        </th>
      </tr>
      <tr>
      <td>
        <div id="toolbar_div">
          <button class="csv-button ui-button ui-widget ui-corner-all">
            <span class="ui-icon ui-icon-circle-triangle-s"></span><span>&nbsp;Download CSV</span>
          </button>
        </div>
      </td>
    </tr>
</table>

note: recommend using the loader.js library for google charts, according to the release notes...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.

this will only change the load statement, see above snippet...