javascript - 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 += '
';

    // 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">Vyber 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>