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/>";
}
$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.