Using the Google DataTable .Net Wrapper

You may also like...

  • wooowwwww i mean wowwww thanks Zoran 🙂 🙂 🙂 is code exactly same and it even run on myside
    its just i was using on a asp.net website and your projects is in Web application ,,,,, bit embarrasing havent learn about web application or it differs anyhow, anyways really “” you are helpful “”eyes on Google Datatable Wrapper library from now on
    trying it from 1 month in free time atlast sign of peace.

    Thanks ONCE AGAIN 😛

  • Hiii Zoran,

    you saved me from pain,

    getting data from server (from .Net Datatabe) to googledatatable format,

    my asp code

    protected void Page_Load(object sender, EventArgs e)
    {
    GetTable();
    }
    public static String rows = “”;
    public static string GetTable()
    {
    System.Data.DataTable table = new System.Data.DataTable();
    table.Columns.Add(“Dosage”, typeof(string));
    table.Columns.Add(“No_OF”, typeof(int));

    table.Rows.Add(“Tushar”, 4);
    table.Rows.Add(“Shreyas”, 7);
    table.Rows.Add(“Pratima”, 9);

    var dt = Google.DataTable.Net.Wrapper.SystemDataTableConverter.Convert(table);

    rows = dt.GetJson();
    return rows;
    }

    ASPX code

    function drawChart() {

    var data = google.visualization.arrayToDataTable();

    var chart = new google.visualization.LineChart(document.getElementById(‘chart_div’));
    chart.draw(data, {
    height: 350,
    width: 900,
    title: ‘Chart’,
    vAxis: {
    maxValue: 165.5,
    minValue: 159,
    title: ‘Hello’
    }
    });
    }
    google.load(‘visualization’, ‘1’, {packages: [‘corechart’]});
    google.setOnLoadCallback(drawChart);

    my page source which confirms data is been retrieved on client in Google Datatable format

    function drawChart() {

    var data = google.visualization.arrayToDataTable({“cols”: [{“type”: “string” ,”id”: “Dosage” ,”label”: “Dosage” }, {“type”: “number” ,”id”: “No_OF” ,”label”: “No_OF” }], “rows” : [{“c” : [{“v”: “Tushar”}, {“v”: 4}]}, {“c” : [{“v”: “Shreyas”}, {“v”: 7}]}, {“c” : [{“v”: “Pratima”}, {“v”: 9}]}]});

    var chart = new google.visualization.LineChart(document.getElementById(‘chart_div’));
    chart.draw(data, {
    height: 350,
    width: 900,
    title: ‘Chart’,
    vAxis: {
    maxValue: 165.5,
    minValue: 159,
    title: ‘Hello’
    }
    });
    }
    google.load(‘visualization’, ‘1’, {packages: [‘corechart’]});
    google.setOnLoadCallback(drawChart);

    even then chart is not showing everything blank
    plz help. it is working in array format when put it manually , how can i convert to Array format instead js literal
    BTW chart_div is emty div tag
    Thank You

    • Hi,
      Thanks for commenting.
      Sorry for the code being messed, but i have to find a nice way of showing code in comments.

      This is the code I was using, and it should work fine.

      ASPX page: First you have to declare the script that get’s the google libraries.

      <script type=”text/javascript” src=”https://www.google.com/jsapi”></script>

      <!–declare the div–>
      <div id=”chart_div”> </div>

      <!– javascript –>
      <script type=”text/javascript”>
      google.load(‘visualization’, ‘1’, { ‘packages’: [‘corechart’] });
      google.setOnLoadCallback(drawChart);

      function drawChart() {

      // place the data from your code behind page.
      // for this you need to use “DataTable()” object and pass “rows” variable.
      var data = new google.visualization.DataTable(‘<%=rows%>’);

      var chart = new google.visualization.LineChart(document.getElementById(‘chart_div’));
      chart.draw(data, {
      height: 350,
      width: 900,
      title: ‘Chart’,
      vAxis: {
      maxValue: 165.5,
      minValue: 159,
      title: ‘Hello’
      }
      });
      }
      </script>

      try it out and let me know please
      Zoran

      • i tried it putting quotes and also copying in normal html file but NO LUCK
        is it possible to convert ASP Datatable to to ARRAY which is also acceptable by Google Charts with wrapper library

        google.load(‘visualization’, ‘1’, { ‘packages’: [‘corechart’] });
        google.setOnLoadCallback(drawChart);

        function drawChart() {

        // place the data from your code behind page.
        // for this you need to use “DataTable()” object and pass “rows” variable.
        var data = new google.visualization.DataTable(‘{“cols”: [{“type”: “string” ,”id”: “Dosage” ,”label”: “Dosage” }, {“type”: “number” ,”id”: “No_OF” ,”label”: “No_OF” }], “rows” : [{“c” : [{“v”: “‘Tushar'”}, {“v”: 4}]}, {“c” : [{“v”: “‘Shreyas'”}, {“v”: 7}]}, {“c” : [{“v”: “‘Pratima'”}, {“v”: 9}]}]}’);

        var chart = new google.visualization.LineChart(document.getElementById(‘chart_div’));
        chart.draw(data, {
        height: 350,
        width: 900,
        title: ‘Chart’,
        vAxis: {
        maxValue: 165.5,
        minValue: 159,
        title: ‘Hello’
        }
        });
        }

        Thanks For The Reply

        • It cannot be that to me it works and to you it doesn’t.. So it must be something different that we are doing.
          What is exactly the error message you are getting?

          • Tushar

            i’m not getting any error, just plain white page ,
            IS the above Google JS library is enough or do we have any other library to use??
            at first i tried to to do with ASP.net, then i tried to manually do it,,, dont know why it is not coming , got success using ARRAY though ,,,,Can you please share VS Project

            Tired of using useless ASP.net Charts:P

          • Hi Tushar,

            I’ve created a project, please check it out.
            https://www.dropbox.com/s/lds7m75saz6pf5h/Google.Visualization.DataTable.Example.zip

            I changed only the Default.aspx and Default.aspx.cs

            My Library doesn’t return the array , but that’s something that I could add in the future, as it seems to be a very nice idea indeed.

            Good luck 🙂
            Zoran

  • Is there a complete working example. I don’t understand where to use the ” return dt.GetJson();”. Can you give me a full working project as sample code.

    • Hi Ammar,
      As I get some time I will provide a full example (with a project).
      In the meanwhile, dt.GetJson() is a function that has to be placed Server Side, depending on a project you are using, this would be a MVC Controller, Code behind, or a restful service. The idea is that JavaScript (client side) calls a method on the server that would return a string generated by the dt.GetJson().
      I hope it is just a bit more clear?
      cheers,
      Zoran

hemanes-siu@mailxu.com ahalt_rpo@mailxu.com