How I added Tagcloud for gimplearn.net

Posts · **Post#1** by **tim** » 03 Mar 2018, 19:54

See TagCloud in action

I got opensource javascript file from here: http://www.goat1000.com/tagcanvas.php
Downloaded the example...
changed options of weight and weightMode and dragControl
in the below code

Code: Select all

<script src="tagcanvas.js" type="text/javascript"></script>
    <script type="text/javascript">
      window.onload = function() {
        try {
          TagCanvas.Start('myCanvas','tags',{
            textColour: '#0000ff',
            outlineColour: '#ff00ff',
            reverse: true,
            depth: 0.8,
            maxSpeed: 0.05,
			weight: true,
			weightMode: "both",
			dragControl: true
          });
        } catch(e) {
          // something went wrong, hide the canvas container
          document.getElementById('myCanvasContainer').style.display = 'none';
        }
      };
    </script>

weightMode is set to "both" because I wanted it display in different colors and Size based on weight.
dragControl is set to true because I wanted user to be able to manually drag to scroll around.
Then in php I just have this code that loops through my words (pulled from database)

Code: Select all

for($j = 0; $j < count($words); $j++)
    {
       $size = ($counts[$j] - $min)/($max-$min) * 40 + 10;
	   $size .= "pt";
	   print '<li><a style="font-size: '.$size.'" href="https://www.gimplearn.net/search.php?keywords='.$words[$j].'" target="_blank">'.$words[$j].'</a></li>';
	   //print $words[$j] . " " .  $counts[$j] . "<br/>";
	}

$min is minimum word count (I wanted the size of minimum word count to be 10px)
$max is maximum word count (I wanted the size of maximum word count to be 50px)
That's why you see the $size calculation.
That's it.

Posts · **Post#2** by **Pat625** » 04 Mar 2018, 05:11

Amazing to me how it spins around so smoothly! You're a genius, Tin.

Posts · **Post#3** by **tim** » 04 Mar 2018, 05:17

Not really, I just found opensource code already written for me.