CODEWITHSUNDEEP
javascriptasp.net
Julie
Julie

Reputation: 333

How to pass data from asp.net to javascript

I'm trying to display my data in pie/donut chart format.. Easiest i found over the internet is the simple google chart. However, it's not as simple as it looks.. I still stuck at passing the data to generate the chart. Really appreciate your help/suggestions/solutions for noob like me.. Thanks in advance

I already have the data in a table format and now im trying to change the display into pie/donut chart.

This is my code to display the data.. (in table format) 

<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>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>

I plan to change to this

<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>

This is script for "piechart" using google chart

<asp:Content ID="Content4" ContentPlaceHolderID="cphPageScripts" runat="server">
<script src="/assets/pages/scripts/dashboard.min.js" type="text/javascript"></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', 'FemaleOccupied'],
  ['Mix', 'MixOccupied'],
  ['Queen', 'QueenOccupied'],
  ['Suite', 'SuiteOccupied']
]);

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

How to pass value "tFemaleOccupied" to 'FemaleOccupied' in data array?

Upvotes: 0

Views: 192

Answers (1)

Boatmarker
Boatmarker

Reputation: 196

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.

Upvotes: 1

Related Questions