How to pass data from asp.net to javascript

Two things you're missing here:

• The arrayToDataTable function expects actual data like numbers for your graph, but you're not passing it any.
• In your table, you're setting values through ASP.NET code behind. This is server-side code, i.e., it executes on the server before the page is sent to the browser on your machine. The Google Charts library you're trying to use, however, is a JavaScript library, so its code executes on the client side, i.e., in your browser after the page is sent to you. In ASP.NET Web Forms, exchanging data between the server side and the client side outside of ASP.NET controls is not always straightforward.

Without changing your code too much, here's one way to make this work:

<table class="table table-striped table-bordered table-hover table-checkable dataTable no-footer" cellspacing="0" rules="all" border="1" style="border-collapse:collapse; margin-bottom: 0; display: none;">
    <tr>
        <td>Female</td>
        <td class="text-center"><asp:Literal runat="server" ID="tFemaleOccupied"></asp:Literal></td>
    </tr>
    <tr>
        <td>Mix</td>
        <td class="text-center"><asp:Literal runat="server" ID="tMixOccupied"></asp:Literal></td>
    </tr>
    <tr>
        <td>Queen</td>
        <td class="text-center"><asp:Literal runat="server" ID="tQueenOccupied"></asp:Literal></td>
    </tr>
    <tr>
        <td>Suite</td>
        <td class="text-center"><asp:Literal runat="server" ID="tSuiteOccupied"></asp:Literal></td>
    </tr>
</table>    
<table class="table table-striped table-bordered table-hover table-checkable dataTable no-footer" cellspacing="0" rules="all" border="1" style="border-collapse:collapse; margin-bottom: 0;">
    <tr>
        <td>
        <div id="piechart"></div>
        </td>
    </tr>
</table>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    // Load google charts
    google.charts.load('current', { 'packages': ['corechart'] });
    google.charts.setOnLoadCallback(drawChart);

    // Draw the chart and set the chart values
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
        ['Room Type', 'No of Room'],
        ['Female', <%= tFemaleOccupied.Text%>],
        ['Mix', <%= tMixOccupied.Text%>],
        ['Queen', <%= tQueenOccupied.Text%>],
        ['Suite', <%= tSuiteOccupied.Text%>]
        ]);

        // Optional; add a title and set the width and height of the chart
        var options = { 'title': 'Room Occupancy', 'width': '50%', 'height': '50%' };

        // Display the chart inside the <div> element with id="piechart"
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
    }
</script>

This assumes you have tFemaleOccupied.Text etc. set in the Page_Load method in your code behind, or before.

A cleaner way to write this, as someone else mentioned in the comments above, is to get the data for your chart using Ajax, but that would also require you to come up with a way to serve that data (e.g., web service), which you probably don't have right now.