CODEWITHSUNDEEP
phpjavascriptjquerycss
John
John

Reputation: 21957

set font size in tag cloud based on occurances

I want to create a tag cloud based on tags I assign to products. The idea being the more occurances of the tag the bigger the text in the tag cloud.

I have the code written which returns the tag text against the number of occurances but I'm not sure how to convert the weighting to a css class.

eg.

microwave 9 occurances 
tv 22 occurances 
pc 3 occurances
hi-fi 16 occurances
hdmi 1 occurance

I have created 8 css classes:

.size1 { font-size 8pt; }
.size2 { font-size 9pt; }
.size3 { font-size 10pt; }

etc.

so say I have 10 tags ranging from occurances 1 to 30 how could I assign them to my css classes. I also need this flexible so I could have any number of tags with any range of occurances.

I am using php as the scripting language so I don't mind if the code is done in that or javascript / jquery which I am also using on my site

Can anyone give me any help or point me to a tutorial or code snippet which doe what I'm after?

Upvotes: 1

Views: 2567

Answers (3)

Berezh
Berezh

Reputation: 937

Try i2ui:

  1. Define font size range: css:[{fontSize:'8pt'},{fontSize:'30pt'}]

  2. Set rate(occurance) for each tag

    <div data-i2="css:[{fontSize:'8pt'},{fontSize:'30pt'}]">
    <span data-i2="rate:9">microwave </span>
    <span data-i2="rate:22">tv </span>
    <span data-i2="rate:3">pc </span>
    <span data-i2="rate:16">hi-fi</span>
    <span data-i2="rate:1">hdmi</span>
 </div>

  3. Don't forget to call javascript:

     i2.emph();

See demo: http://jsfiddle.net/7GcKT/2/

Upvotes: 0

Shadow Wizzard
Shadow Wizzard

Reputation: 66396

I will answer the direct question of how to assign "weights" to each number.

Given set of numbers and assuming you want 8 "weights", start with assigning weight of 1 to the lowest (minimum) number(s) and weight of 8 to the highest (maximum) number. Then calculate how much weight should be applied for each number, based on the minimum and maximum numbers and assign it.

Code sample is better than 100 words so here it is, in JavaScript:

function CalculateWeights(arrValues, weightsCount) {
    var arrWeights = [];
    var minValue = 999999;
    var maxValue = -1;
    for (var i = 0; i < arrValues.length; i++) {
        var curValue = arrValues[i];
        if (curValue < minValue)
            minValue = curValue;
        if (curValue > maxValue)
            maxValue = curValue;
    }

    var diff = weightsCount / (maxValue - minValue);
    for (var i = 0; i < arrValues.length; i++) {
        var curValue = arrValues[i];
        if (curValue == minValue)
            arrWeights.push(1);
        else if (curValue == maxValue)
            arrWeights.push(weightsCount);
        else
            arrWeights.push(parseInt(curValue * diff, 10) + 1);
    }

    return arrWeights;
}

Example of usage:

var values = [9, 22, 3, 16, 1];
var count = 8;
var weights = CalculateWeights(values, count);

Full working example: http://jsfiddle.net/yahavbr/7QDMC/

You can and probably better have that logic in the server side code, shouldn't be too complicated to convert the code to PHP. :)

Upvotes: 1

anothershrubery
anothershrubery

Reputation: 21023

A nice guide to setting up tag clouds can be found at http://stevethomas.com.au/php/how-to-make-a-tag-cloud-in-php-mysql-and-css.html

Upvotes: 0

Related Questions