Click here to Skip to main content
14,385,487 members
Rate this:
Please Sign up or sign in to vote.
Hi all

I am trying to do cloud tagging.
I found HTML and JQuery code to implement this one.
Code:
<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://word-cumulus-goog-vis.googlecode.com/svn/trunk/wordcumulus.js"></script>
    <script type="text/javascript" src="http://word-cumulus-goog-vis.googlecode.com/svn/trunk/swfobject.js"></script>
    <script type="text/javascript">
      google.load("visualization", "1");

      // Set callback to run when API is loaded
      google.setOnLoadCallback(drawVisualization);

      // Called when the Visualization API is loaded.
      function drawVisualization() {

        // Create and populate a data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Tag');
        data.addColumn('string', 'URL');
        data.addRows(10);
        data.setCell(0, 0, 'Brazil');
        data.setCell(0, 1, 'http://www.youtube.com/results?search_query=brazil+fifa+world+cup');
        data.setCell(1, 0, 'Italy');
        data.setCell(1, 1, 'http://www.youtube.com/results?search_query=italy+fifa+world+cup');
        data.setCell(2, 0, 'Germany');
        data.setCell(2, 1, 'http://www.youtube.com/results?search_query=germany+fifa+world+cup');
        data.setCell(3, 0, 'Argentina');
        data.setCell(3, 1, 'http://www.youtube.com/results?search_query=argentina+fifa+world+cup');
        data.setCell(4, 0, 'Uruguay');
        data.setCell(4, 1, 'http://www.youtube.com/results?search_query=uruguay+fifa+world+cup');
        data.setCell(5, 0, 'France');
        data.setCell(5, 1, 'http://www.youtube.com/results?search_query=france+fifa+world+cup');
        data.setCell(6, 0, 'England');
        data.setCell(6, 1, 'http://www.youtube.com/results?search_query=england+fifa+world+cup');
        data.setCell(7, 0, 'Bhagirathi');
        data.setCell(7, 1, 'http://www.youtube.com/results?search_query=england+fifa+world+cup');
        data.setCell(8, 0, 'Raj');
        data.setCell(8, 1, 'http://www.youtube.com/results?search_query=england+fifa+world+cup');
        data.setCell(9, 0, 'RBS');
        data.setCell(9, 1, 'http://www.youtube.com/results?search_query=england+fifa+world+cup');

        // Instantiate our table object.
        var vis = new gviz_word_cumulus.WordCumulus(document.getElementById('mydiv'));

        // Draw our table with the data we created locally.
        vis.draw(data, {text_color: '#ff00ff', speed: 100, width:500, height:500});
       }
   </script>
  </head>

  <body>
        <big>FIFA World Cup: Country appearances in the final four</big>
        <div> </div>
        <div id="mydiv"></div>
        
  </body>
</html>

This is full fill my requirement but
i want to fetch that tags from server side .

means :in my database i have some tags which i want to fetch and show in the UI.
Here I have done hard coded.
how to do this one dynamically??

I tried to solve this.
I found that if I use ajax than i can solve this problem.
But i don't know how to use ajax. and solve this problem.

My Sql query is
SELECT DISTINCT TAG_NAME FROM TAGS;

Please help me to solve this problem.

thanks in advance.
Posted
Rate this:
Please Sign up or sign in to vote.

Solution 1

Hi
I think you can use basix ajax here, i.e, while adding tags instead of hard coding you can request the tagname from an httphandler that returns text only, you will hit the handler with the tagid and it will select only the tagname associated with that id.

E.g.

intead of doing
data.setCell(0, 0, 'Brazil');

you can use this
data.setCell(0, 0, GetTag(1));

where 1 is passed in as ID for the ajax request and it's text is returned from the table.

hope it gives the right direction to move ahead.

Regards
Pawan
   
Comments
Mac12334 14-Aug-12 9:59am
   
Can you please paste the entire solution.
Means:Total Html + Ajax and what ever required please post here.
Actually i don't know ajax and how to call and write ajax.
So please write all the code
so that it will be more helpful.
Rai Pawan 15-Aug-12 5:26am
   
you can check this tutorial at codeproject http://www.codeproject.com/Articles/170882/jQuery-AJAX-and-HttpHandlers-in-ASP-NET
I am assuming that since you've included asp.net in your question tag, you are well versed with the basics of asp.net/c#.net. I'd have liked to give an example myself "had I not been so bussy :( ". Though i think the example will guide you and you will pick up with how to use ajax
Regards
Pawan
Mac12334 16-Aug-12 1:33am
   
Thanks Rai Pawan
Rate this:
Please Sign up or sign in to vote.

Solution 2

Well, here is the full working code.

Note, I have filled up the datatable manually. You need to change the code to fill up the datatable from database.

Code Behind
protected DataTable dtbl = null;
    protected void Page_Load(object sender, EventArgs e)
    {
        dtbl = new DataTable();
        dtbl.Columns.Add("name", Type.GetType("System.String"));
        dtbl.Columns.Add("url", Type.GetType("System.String"));

        dtbl.Rows.Add(new object[] { "Brazil", "http://www.youtube.com/results?search_query=brazil+fifa+world+cup" });
        dtbl.Rows.Add(new object[] { "Germany", "http://www.youtube.com/results?search_query=germany+fifa+world+cup" });
        dtbl.Rows.Add(new object[] { "Argentina", "http://www.youtube.com/results?search_query=argentina+fifa+world+cup" });

        string _tagstring=string.Empty;
        foreach (DataRow dr in dtbl.Rows)
        {
            _tagstring += dr["name"].ToString() + "," + dr["url"].ToString() + ";";
        }
        _tagstring = _tagstring.TrimEnd(';');
        hdnTags.Value = _tagstring;

        dtbl.Dispose();
    }


aspx page
 <div>
     <big>FIFA World Cup: Country appearances in the final four</big>
     <div> </div>
     <div id="mydiv"></div>
 </div>
 <input type="hidden" id="hdnTags" runat="server" />
 <script type="text/javascript">
     var s_cloudstring = document.getElementById("<%= hdnTags.ClientID %>").value;
     google.load("visualization", "1");

     // Set callback to run when API is loaded
     google.setOnLoadCallback(drawVisualization);

     // Called when the Visualization API is loaded.
     function drawVisualization() {

         // Create and populate a data table.
         var data = new google.visualization.DataTable();
         data.addColumn('string', 'Tag');
         data.addColumn('string', 'URL');
         data.addRows(3);//here you pass the count of record through hidden fields from code behind


         var arrTags = s_cloudstring.split(";");
         if(arrTags.length>1){
             for (var i = 0; i < arrTags.length; i++) {
                 if (arrTags[i] == "") break;
                 var arrInnerString = arrTags[i].split(",");


                 data.setCell(i, 0, arrInnerString[0]);
                 data.setCell(i, 1, arrInnerString[1]);
             }
         }

         // Instantiate our table object.
         var vis = new gviz_word_cumulus.WordCumulus(document.getElementById('mydiv'));

         // Draw our table with the data we created locally.
         vis.draw(data, { text_color: '#ff00ff', speed: 100, width: 500, height: 500 });
     }
</script>


Hope this helps.
cheers
   
Comments
Sandip.Nascar 21-Aug-12 14:55pm
   
I have given the simplest approach of dynamically loading data in client side.
You ca also use Ajax JSON to get the Json object and display the same, I have shown above. The only difference is you need the iterate the object and set data.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100