Include pie chart and sankey diagram in Google Charts dashboard

Question

I'm trying to combine two charts and a filter, specifically a Pie Chart and Sankey Diagram with no success. There is a similar answered question, but the difference with my problem is that I am embedding my charts inside a dashboard so I can use the slicer filter.

I have tried several ideas to solve it but only the Pie Chart and the slicer appear or simply nothing appears.

Ideas I have tried:

1. Passing only the columns I need in the view property of the ChartWrapper class.
2. Naming the columns and casting the data types as shown in the examples for the Sankey diagram
3. Passing only the data I need to the Sankey through the dataTable property of the ChartWrapper class

For the moment, I have used the sample code from Google Charts documentation. What I am trying to do is to make appear both charts, so I can arrange de visualizations in the dashboard and then use my own data.

Thanks for the help!

Sample code bellow:

I include the loader in the partials/header file

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<%- include("partials/header"); -%>

<script type="text/javascript">
  // Load the Visualization API and the controls package.
  google.charts.load('current', {
    'packages': ['corechart', 'controls', 'sankey']
  });

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

  // Callback that creates and populates a data table,
  // instantiates a dashboard, a range slider and a pie chart,
  // passes in the data and draws it.
  function drawDashboard() {

    // Create our data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Donuts eaten');
    data.addColumn('string', 'From');
    data.addColumn('string', 'To');
    data.addColumn('number', 'Weight');
    data.addRows([
      ['Michael', 5, 'A', 'X', 2],
      ['Elisa', 7, 'A', 'Y', 7],
      ['Robert', 3, 'A', 'Z', 6],
      ['John', 2, 'B', 'X', 1],
      ['Jessica', 6, 'B', 'Y', 9],
      ['Aaron', 1, 'B', 'Z', 4],
      ['Margareth', 8, 'C', 'X', 4]
    ]);

    // Create a dashboard.
    var dashboard = new google.visualization.Dashboard(
      document.getElementById('dashboard_div'));

    // Create a range slider, passing some options
    var donutRangeSlider = new google.visualization.ControlWrapper({
      'controlType': 'NumberRangeFilter',
      'containerId': 'filter_div',
      'options': {
        'filterColumnLabel': 'Donuts eaten'
      },
      'view': {
        'columns': [0, 1]
      }
    });

    // Create a pie chart, passing some options
    var pieChart = new google.visualization.ChartWrapper({
      'chartType': 'PieChart',
      'containerId': 'chart_div',
      'options': {
        'width': 300,
        'height': 300,
        'pieSliceText': 'value',
        'legend': 'right'
      },
      'view': {
        'columns': [0, 1]
      }
    });


    var sankeyChart = new google.visualization.ChartWrapper({
      'chartType': 'Sankey',
      'containerId': 'sankey_div',
      'options': {
        'width': 600
      },
      'view': {
        'columns': [2, 3, 4]
      }
    });
    // Establish dependencies, declaring that 'filter' drives 'pieChart',
    // so that the pie chart will only display entries that are let through
    // given the chosen slider range.
    dashboard.bind(donutRangeSlider, pieChart, sankeyChart);

    // Draw the dashboard.
    dashboard.draw(data);
  }
</script>

<div id="dashboard_div">
  <!--Divs that will hold each control and chart-->
  <div id="filter_div"></div>
  <div id="chart_div"></div>
  <div id="sankey_div" style="width: 900px; height: 300px;"></div>
</div>

<%- include("partials/footer"); -%>