EOL/seabase

- google_chart_data = format_graph_data(@table_data)

#data_chart
#data_table

:javascript
  google.load('visualization', '1', {packages:["corechart"]});
  google.load('visualization', '1', {packages:['table']});
  google.setOnLoadCallback(drawChartSeparate);
  
  function drawChartSeparate() {
    var combined_data = google.visualization.arrayToDataTable(#{google_chart_data});

    var combined_chart_options = {
      width: 800,
      height: 500,
      title: '#{@chart_title}',
      titleTextStyle: { fontSize: 18 },
      colors: ['#afa', '#9d9', '#3a3'],
      hAxis: { title: 'Hours' }, 
      vAxis: { title: 'Molecules per Embryo' },
    };

    var combined_table_options = {
      width: 300,
    }

    data_view = new google.visualization.DataView(combined_data);
    
    var combined_chart = new google.visualization.LineChart(document.getElementById('data_chart'));
    combined_chart.draw(combined_data, combined_chart_options);
    var combined_table = new google.visualization.Table(document.getElementById('data_table'));
    combined_table.draw(data_view, combined_table_options);

    google.visualization.events.addListener(combined_table, 'select', function() {
      combined_chart.setSelection(combined_table.getSelection());
    });

  }