[OT] need to represent data using people bars vs. stars using jQuery

classic Classic list List threaded Threaded
11 messages Options
Reply | Threaded
Open this post in threaded view
|

[OT] need to represent data using people bars vs. stars using jQuery

Tami Williams-3
Thanks in advance.

I've gotten this started (you can see it at http://www.asktami.com/star-rating/listStars.html)
  but am running into trouble.

This is the inspiration for what I want to do:
http://www.visguy.com/2009/10/01/village-of-100-people-diagrams/

I'll have data in a MySQL database that will be found via Lasso and  
then needs to be output as "people" bars.

So, for example I might have data that looks like this:

15 people out of 30 did X
and  20 out of 100 did Y

In MySQL

thing sample size percent
X 30 50 -> output 15 people of out of 30
Y 100 5 -> output 20 out of 100



What I'd like to show is this:

For X, a 30 little people icons, with 15 of them in one color and 15  
of them in a different color
For Y, a 100 little people icons, with 5 of them in one color and 95  
of them in a different color

Has anyone done this before with "people" bars the way I've  
described?  Or with different colored stars?  If I can get it working  
with stars then I can always have someone create the differently  
colored people icons for me.

Anyone able to help me with the jQuery for this?

Thanks in advance.


Note: if you load the page using FireBug in console you will see (for  
each row)
- the data passed to the function in the form of percent-sample size  
with percent being 5 characters and sample size 3 characters
- the percent
- the sample size


You'll see it my demo page at http://www.asktami.com/star-rating/listStars.html 
  that it doesn't work if you have a sample size > 5 - I can't figure  
out why.

Thanks in advance.

#############################################################
This message is sent to you because you are subscribed to
  the mailing list <[hidden email]>.
To unsubscribe, E-mail to: <[hidden email]>
To switch to the DIGEST mode, E-mail to <[hidden email]>
To switch to the INDEX mode, E-mail to <[hidden email]>
Send administrative queries to  <[hidden email]>

Reply | Threaded
Open this post in threaded view
|

Re: [OT] need to represent data using people bars vs. stars using jQuery

list
Maybe I misunderstand.
But I don't see the need for jquery here. Some demo code:

<?LassoScript

var('number' = 20); // the found people count, make sure it's an integer value
var('total' = 30); // the out of value, make sure it's an integer value
var('countsymbol' = '<img src="/greenpeople.png">');
var('emptysymbol' = '<img src="/graypeople.png">');

$countsymbol * $number;
$emptysymbol * ($total - $number);


?>

Tested and working.

HDB
Jolle

24 sep 2010 kl. 09.55 skrev Tami Williams:

> Thanks in advance.
>
> I've gotten this started (you can see it at http://www.asktami.com/star-rating/listStars.html) but am running into trouble.
>
> This is the inspiration for what I want to do:
> http://www.visguy.com/2009/10/01/village-of-100-people-diagrams/
>
> I'll have data in a MySQL database that will be found via Lasso and then needs to be output as "people" bars.
>
> So, for example I might have data that looks like this:
>
> 15 people out of 30 did X
> and  20 out of 100 did Y
>
> In MySQL
>
> thing sample size percent
> X 30 50 -> output 15 people of out of 30
> Y 100 5 -> output 20 out of 100
>
>
>
> What I'd like to show is this:
>
> For X, a 30 little people icons, with 15 of them in one color and 15 of them in a different color
> For Y, a 100 little people icons, with 5 of them in one color and 95 of them in a different color
>
> Has anyone done this before with "people" bars the way I've described?  Or with different colored stars?  If I can get it working with stars then I can always have someone create the differently colored people icons for me.
>
> Anyone able to help me with the jQuery for this?
>
> Thanks in advance.
>
>
> Note: if you load the page using FireBug in console you will see (for each row)
> - the data passed to the function in the form of percent-sample size with percent being 5 characters and sample size 3 characters
> - the percent
> - the sample size
>
>
> You'll see it my demo page at http://www.asktami.com/star-rating/listStars.html that it doesn't work if you have a sample size > 5 - I can't figure out why.
>
> Thanks in advance.
>
> #############################################################
> This message is sent to you because you are subscribed to
> the mailing list <[hidden email]>.
> To unsubscribe, E-mail to: <[hidden email]>
> To switch to the DIGEST mode, E-mail to <[hidden email]>
> To switch to the INDEX mode, E-mail to <[hidden email]>
> Send administrative queries to  <[hidden email]>
>
>
>



#############################################################
This message is sent to you because you are subscribed to
  the mailing list <[hidden email]>.
To unsubscribe, E-mail to: <[hidden email]>
To switch to the DIGEST mode, E-mail to <[hidden email]>
To switch to the INDEX mode, E-mail to <[hidden email]>
Send administrative queries to  <[hidden email]>

Reply | Threaded
Open this post in threaded view
|

Re: [OT] need to represent data using people bars vs. stars using jQuery

Tami Williams-3
What happens if you have a .25 person or a .5 person?

On Sep 23, 2010, at 8:22 PM, Jolle Carlestam wrote:

> Maybe I misunderstand.
> But I don't see the need for jquery here. Some demo code:
>
> <?LassoScript
>
> var('number' = 20); // the found people count, make sure it's an  
> integer value
> var('total' = 30); // the out of value, make sure it's an integer  
> value
> var('countsymbol' = '<img src="/greenpeople.png">');
> var('emptysymbol' = '<img src="/graypeople.png">');
>
> $countsymbol * $number;
> $emptysymbol * ($total - $number);
>
>
> ?>
>
> Tested and working.
>
> HDB
> Jolle
>
> 24 sep 2010 kl. 09.55 skrev Tami Williams:
>
>> Thanks in advance.
>>
>> I've gotten this started (you can see it at http://www.asktami.com/star-rating/listStars.html)
>>  but am running into trouble.
>>
>> This is the inspiration for what I want to do:
>> http://www.visguy.com/2009/10/01/village-of-100-people-diagrams/
>>
>> I'll have data in a MySQL database that will be found via Lasso and  
>> then needs to be output as "people" bars.
>>
>> So, for example I might have data that looks like this:
>>
>> 15 people out of 30 did X
>> and  20 out of 100 did Y
>>
>> In MySQL
>>
>> thing sample size percent
>> X 30 50 -> output 15 people of out of 30
>> Y 100 5 -> output 20 out of 100
>>
>>
>>
>> What I'd like to show is this:
>>
>> For X, a 30 little people icons, with 15 of them in one color and  
>> 15 of them in a different color
>> For Y, a 100 little people icons, with 5 of them in one color and  
>> 95 of them in a different color
>>
>> Has anyone done this before with "people" bars the way I've  
>> described?  Or with different colored stars?  If I can get it  
>> working with stars then I can always have someone create the  
>> differently colored people icons for me.
>>
>> Anyone able to help me with the jQuery for this?
>>
>> Thanks in advance.
>>
>>
>> Note: if you load the page using FireBug in console you will see  
>> (for each row)
>> - the data passed to the function in the form of percent-sample  
>> size with percent being 5 characters and sample size 3 characters
>> - the percent
>> - the sample size
>>
>>
>> You'll see it my demo page at http://www.asktami.com/star-rating/listStars.html 
>>  that it doesn't work if you have a sample size > 5 - I can't  
>> figure out why.
>>
>> Thanks in advance.
>>
>> #############################################################
>> This message is sent to you because you are subscribed to
>> the mailing list <[hidden email]>.
>> To unsubscribe, E-mail to: <[hidden email]>
>> To switch to the DIGEST mode, E-mail to <[hidden email]
>> >
>> To switch to the INDEX mode, E-mail to <[hidden email]
>> >
>> Send administrative queries to  <[hidden email]>
>>
>>
>>
>
>
>
> #############################################################
> This message is sent to you because you are subscribed to
>  the mailing list <[hidden email]>.
> To unsubscribe, E-mail to: <[hidden email]>
> To switch to the DIGEST mode, E-mail to <[hidden email]
> >
> To switch to the INDEX mode, E-mail to <[hidden email]
> >
> Send administrative queries to  <[hidden email]>
>


#############################################################
This message is sent to you because you are subscribed to
  the mailing list <[hidden email]>.
To unsubscribe, E-mail to: <[hidden email]>
To switch to the DIGEST mode, E-mail to <[hidden email]>
To switch to the INDEX mode, E-mail to <[hidden email]>
Send administrative queries to  <[hidden email]>

Reply | Threaded
Open this post in threaded view
|

Re: [OT] need to represent data using people bars vs. stars using jQuery

Tami Williams
In reply to this post by list
What happens if you have a .25 person or a .5 person?

On Sep 23, 2010, at 8:22 PM, Jolle Carlestam wrote:

> Maybe I misunderstand.
> But I don't see the need for jquery here. Some demo code:
>
> <?LassoScript
>
> var('number' = 20); // the found people count, make sure it's an  
> integer value
> var('total' = 30); // the out of value, make sure it's an integer  
> value
> var('countsymbol' = '<img src="/greenpeople.png">');
> var('emptysymbol' = '<img src="/graypeople.png">');
>
> $countsymbol * $number;
> $emptysymbol * ($total - $number);
>
>
> ?>
>
> Tested and working.
>
> HDB
> Jolle
>
> 24 sep 2010 kl. 09.55 skrev Tami Williams:
>
>> Thanks in advance.
>>
>> I've gotten this started (you can see it at http://www.asktami.com/star-rating/listStars.html)
>>  but am running into trouble.
>>
>> This is the inspiration for what I want to do:
>> http://www.visguy.com/2009/10/01/village-of-100-people-diagrams/
>>
>> I'll have data in a MySQL database that will be found via Lasso and  
>> then needs to be output as "people" bars.
>>
>> So, for example I might have data that looks like this:
>>
>> 15 people out of 30 did X
>> and  20 out of 100 did Y
>>
>> In MySQL
>>
>> thing sample size percent
>> X 30 50 -> output 15 people of out of 30
>> Y 100 5 -> output 20 out of 100
>>
>>
>>
>> What I'd like to show is this:
>>
>> For X, a 30 little people icons, with 15 of them in one color and  
>> 15 of them in a different color
>> For Y, a 100 little people icons, with 5 of them in one color and  
>> 95 of them in a different color
>>
>> Has anyone done this before with "people" bars the way I've  
>> described?  Or with different colored stars?  If I can get it  
>> working with stars then I can always have someone create the  
>> differently colored people icons for me.
>>
>> Anyone able to help me with the jQuery for this?
>>
>> Thanks in advance.
>>
>>
>> Note: if you load the page using FireBug in console you will see  
>> (for each row)
>> - the data passed to the function in the form of percent-sample  
>> size with percent being 5 characters and sample size 3 characters
>> - the percent
>> - the sample size
>>
>>
>> You'll see it my demo page at http://www.asktami.com/star-rating/listStars.html 
>>  that it doesn't work if you have a sample size > 5 - I can't  
>> figure out why.
>>
>> Thanks in advance.
>>
>> #############################################################
>> This message is sent to you because you are subscribed to
>> the mailing list <[hidden email]>.
>> To unsubscribe, E-mail to: <[hidden email]>
>> To switch to the DIGEST mode, E-mail to <[hidden email]
>> >
>> To switch to the INDEX mode, E-mail to <[hidden email]
>> >
>> Send administrative queries to  <[hidden email]>
>>
>>
>>
>
>
>
> #############################################################
> This message is sent to you because you are subscribed to
> the mailing list <[hidden email]>.
> To unsubscribe, E-mail to: <[hidden email]>
> To switch to the DIGEST mode, E-mail to <[hidden email]
> >
> To switch to the INDEX mode, E-mail to <[hidden email]
> >
> Send administrative queries to  <[hidden email]>
>


#############################################################
This message is sent to you because you are subscribed to
  the mailing list <[hidden email]>.
To unsubscribe, E-mail to: <[hidden email]>
To switch to the DIGEST mode, E-mail to <[hidden email]>
To switch to the INDEX mode, E-mail to <[hidden email]>
Send administrative queries to  <[hidden email]>

Reply | Threaded
Open this post in threaded view
|

Re: [OT] need to represent data using people bars vs. stars using jQuery

list
In reply to this post by Tami Williams-3
How would you want that represented? In your examples you only had whole people with one people represented by one symbol.
My example can be expanded to allow little people... Or is it called half people?

HDB
Jolle

24 sep 2010 kl. 10.33 skrev Tami Williams:

> What happens if you have a .25 person or a .5 person?
>
> On Sep 23, 2010, at 8:22 PM, Jolle Carlestam wrote:
>
>> Maybe I misunderstand.
>> But I don't see the need for jquery here. Some demo code:
>>
>> <?LassoScript
>>
>> var('number' = 20); // the found people count, make sure it's an integer value
>> var('total' = 30); // the out of value, make sure it's an integer value
>> var('countsymbol' = '<img src="/greenpeople.png">');
>> var('emptysymbol' = '<img src="/graypeople.png">');
>>
>> $countsymbol * $number;
>> $emptysymbol * ($total - $number);
>>
>>
>> ?>
>>
>> Tested and working.
>>
>> HDB
>> Jolle
>>
>> 24 sep 2010 kl. 09.55 skrev Tami Williams:
>>
>>> Thanks in advance.
>>>
>>> I've gotten this started (you can see it at http://www.asktami.com/star-rating/listStars.html) but am running into trouble.
>>>
>>> This is the inspiration for what I want to do:
>>> http://www.visguy.com/2009/10/01/village-of-100-people-diagrams/
>>>
>>> I'll have data in a MySQL database that will be found via Lasso and then needs to be output as "people" bars.
>>>
>>> So, for example I might have data that looks like this:
>>>
>>> 15 people out of 30 did X
>>> and  20 out of 100 did Y
>>>
>>> In MySQL
>>>
>>> thing sample size percent
>>> X 30 50 -> output 15 people of out of 30
>>> Y 100 5 -> output 20 out of 100
>>>
>>>
>>>
>>> What I'd like to show is this:
>>>
>>> For X, a 30 little people icons, with 15 of them in one color and 15 of them in a different color
>>> For Y, a 100 little people icons, with 5 of them in one color and 95 of them in a different color
>>>
>>> Has anyone done this before with "people" bars the way I've described?  Or with different colored stars?  If I can get it working with stars then I can always have someone create the differently colored people icons for me.
>>>
>>> Anyone able to help me with the jQuery for this?
>>>
>>> Thanks in advance.
>>>
>>>
>>> Note: if you load the page using FireBug in console you will see (for each row)
>>> - the data passed to the function in the form of percent-sample size with percent being 5 characters and sample size 3 characters
>>> - the percent
>>> - the sample size
>>>
>>>
>>> You'll see it my demo page at http://www.asktami.com/star-rating/listStars.html that it doesn't work if you have a sample size > 5 - I can't figure out why.
>>>
>>> Thanks in advance.
>>>
>>> #############################################################
>>> This message is sent to you because you are subscribed to
>>> the mailing list <[hidden email]>.
>>> To unsubscribe, E-mail to: <[hidden email]>
>>> To switch to the DIGEST mode, E-mail to <[hidden email]>
>>> To switch to the INDEX mode, E-mail to <[hidden email]>
>>> Send administrative queries to  <[hidden email]>
>>>
>>>
>>>
>>
>>
>>
>> #############################################################
>> This message is sent to you because you are subscribed to
>> the mailing list <[hidden email]>.
>> To unsubscribe, E-mail to: <[hidden email]>
>> To switch to the DIGEST mode, E-mail to <[hidden email]>
>> To switch to the INDEX mode, E-mail to <[hidden email]>
>> Send administrative queries to  <[hidden email]>
>>
>
>
> #############################################################
> This message is sent to you because you are subscribed to
> the mailing list <[hidden email]>.
> To unsubscribe, E-mail to: <[hidden email]>
> To switch to the DIGEST mode, E-mail to <[hidden email]>
> To switch to the INDEX mode, E-mail to <[hidden email]>
> Send administrative queries to  <[hidden email]>
>
>
>



#############################################################
This message is sent to you because you are subscribed to
  the mailing list <[hidden email]>.
To unsubscribe, E-mail to: <[hidden email]>
To switch to the DIGEST mode, E-mail to <[hidden email]>
To switch to the INDEX mode, E-mail to <[hidden email]>
Send administrative queries to  <[hidden email]>

Reply | Threaded
Open this post in threaded view
|

Re: [OT] need to represent data using people bars vs. stars using jQuery

Tami Williams
Sorry, my example didn't take into account that its possible to have  
fractional people.  That's why I felt the jQuery  at http://www.visguy.com/2009/10/01/village-of-100-people-diagrams/
was a good place to start.


On Sep 23, 2010, at 8:46 PM, [hidden email] wrote:

> How would you want that represented? In your examples you only had  
> whole people with one people represented by one symbol.
> My example can be expanded to allow little people... Or is it called  
> half people?
>
> HDB
> Jolle
>
> 24 sep 2010 kl. 10.33 skrev Tami Williams:
>
>> What happens if you have a .25 person or a .5 person?
>>
>> On Sep 23, 2010, at 8:22 PM, Jolle Carlestam wrote:
>>
>>> Maybe I misunderstand.
>>> But I don't see the need for jquery here. Some demo code:
>>>
>>> <?LassoScript
>>>
>>> var('number' = 20); // the found people count, make sure it's an  
>>> integer value
>>> var('total' = 30); // the out of value, make sure it's an integer  
>>> value
>>> var('countsymbol' = '<img src="/greenpeople.png">');
>>> var('emptysymbol' = '<img src="/graypeople.png">');
>>>
>>> $countsymbol * $number;
>>> $emptysymbol * ($total - $number);
>>>
>>>
>>> ?>
>>>
>>> Tested and working.
>>>
>>> HDB
>>> Jolle
>>>
>>> 24 sep 2010 kl. 09.55 skrev Tami Williams:
>>>
>>>> Thanks in advance.
>>>>
>>>> I've gotten this started (you can see it at http://www.asktami.com/star-rating/listStars.html)
>>>>  but am running into trouble.
>>>>
>>>> This is the inspiration for what I want to do:
>>>> http://www.visguy.com/2009/10/01/village-of-100-people-diagrams/
>>>>
>>>> I'll have data in a MySQL database that will be found via Lasso  
>>>> and then needs to be output as "people" bars.
>>>>
>>>> So, for example I might have data that looks like this:
>>>>
>>>> 15 people out of 30 did X
>>>> and  20 out of 100 did Y
>>>>
>>>> In MySQL
>>>>
>>>> thing sample size percent
>>>> X 30 50 -> output 15 people of out of 30
>>>> Y 100 5 -> output 20 out of 100
>>>>
>>>>
>>>>
>>>> What I'd like to show is this:
>>>>
>>>> For X, a 30 little people icons, with 15 of them in one color and  
>>>> 15 of them in a different color
>>>> For Y, a 100 little people icons, with 5 of them in one color and  
>>>> 95 of them in a different color
>>>>
>>>> Has anyone done this before with "people" bars the way I've  
>>>> described?  Or with different colored stars?  If I can get it  
>>>> working with stars then I can always have someone create the  
>>>> differently colored people icons for me.
>>>>
>>>> Anyone able to help me with the jQuery for this?
>>>>
>>>> Thanks in advance.
>>>>
>>>>
>>>> Note: if you load the page using FireBug in console you will see  
>>>> (for each row)
>>>> - the data passed to the function in the form of percent-sample  
>>>> size with percent being 5 characters and sample size 3 characters
>>>> - the percent
>>>> - the sample size
>>>>
>>>>
>>>> You'll see it my demo page at http://www.asktami.com/star-rating/listStars.html 
>>>>  that it doesn't work if you have a sample size > 5 - I can't  
>>>> figure out why.
>>>>
>>>> Thanks in advance.
>>>>
>>>> #############################################################
>>>> This message is sent to you because you are subscribed to
>>>> the mailing list <[hidden email]>.
>>>> To unsubscribe, E-mail to: <[hidden email]>
>>>> To switch to the DIGEST mode, E-mail to <[hidden email]
>>>> >
>>>> To switch to the INDEX mode, E-mail to <[hidden email]
>>>> >
>>>> Send administrative queries to  <[hidden email]>
>>>>
>>>>
>>>>
>>>
>>>
>>>
>>> #############################################################
>>> This message is sent to you because you are subscribed to
>>> the mailing list <[hidden email]>.
>>> To unsubscribe, E-mail to: <[hidden email]>
>>> To switch to the DIGEST mode, E-mail to <[hidden email]
>>> >
>>> To switch to the INDEX mode, E-mail to <[hidden email]
>>> >
>>> Send administrative queries to  <[hidden email]>
>>>
>>
>>
>> #############################################################
>> This message is sent to you because you are subscribed to
>> the mailing list <[hidden email]>.
>> To unsubscribe, E-mail to: <[hidden email]>
>> To switch to the DIGEST mode, E-mail to <[hidden email]
>> >
>> To switch to the INDEX mode, E-mail to <[hidden email]
>> >
>> Send administrative queries to  <[hidden email]>
>>
>>
>>
>
>
>
> #############################################################
> This message is sent to you because you are subscribed to
>  the mailing list <[hidden email]>.
> To unsubscribe, E-mail to: <[hidden email]>
> To switch to the DIGEST mode, E-mail to <[hidden email]
> >
> To switch to the INDEX mode, E-mail to <[hidden email]
> >
> Send administrative queries to  <[hidden email]>
>


#############################################################
This message is sent to you because you are subscribed to
  the mailing list <[hidden email]>.
To unsubscribe, E-mail to: <[hidden email]>
To switch to the DIGEST mode, E-mail to <[hidden email]>
To switch to the INDEX mode, E-mail to <[hidden email]>
Send administrative queries to  <[hidden email]>

Reply | Threaded
Open this post in threaded view
|

Re: [OT] need to represent data using people bars vs. stars using jQuery

list
OK. adjusted example:


<?LassoScript

var('number' = 20.34333);
var('total' = 30);
var('countsymbol' = '<img src="greenpeople.png">');
var('emptysymbol' = '<img src="graypeople.png">');

var('wholepeoplecount' = math_floor($number));
var('semipeoplecount' = math_round($number - decimal($wholepeoplecount), 0.1));
$semipeoplecount;

'<br>';

$countsymbol * $wholepeoplecount;
if($semipeoplecount > 0);
        '<img src="green' + string($semipeoplecount) + 'people.png">';
/if;

$emptysymbol * ($total - $wholepeoplecount);


?>

With this you need 12 images.
greenpeople.png
graypeople.png
green0.1people.png
green0.2people.png
green0.3people.png
green0.4people.png
etc

HDB
Jolle

24 sep 2010 kl. 10.48 skrev Tami Williams:

> Sorry, my example didn't take into account that its possible to have fractional people.  That's why I felt the jQuery  at http://www.visguy.com/2009/10/01/village-of-100-people-diagrams/
> was a good place to start.
>
>
> On Sep 23, 2010, at 8:46 PM, [hidden email] wrote:
>
>> How would you want that represented? In your examples you only had whole people with one people represented by one symbol.
>> My example can be expanded to allow little people... Or is it called half people?
>>
>> HDB
>> Jolle
>>
>> 24 sep 2010 kl. 10.33 skrev Tami Williams:
>>
>>> What happens if you have a .25 person or a .5 person?
>>>
>>> On Sep 23, 2010, at 8:22 PM, Jolle Carlestam wrote:
>>>
>>>> Maybe I misunderstand.
>>>> But I don't see the need for jquery here. Some demo code:
>>>>
>>>> <?LassoScript
>>>>
>>>> var('number' = 20); // the found people count, make sure it's an integer value
>>>> var('total' = 30); // the out of value, make sure it's an integer value
>>>> var('countsymbol' = '<img src="/greenpeople.png">');
>>>> var('emptysymbol' = '<img src="/graypeople.png">');
>>>>
>>>> $countsymbol * $number;
>>>> $emptysymbol * ($total - $number);
>>>>
>>>>
>>>> ?>
>>>>
>>>> Tested and working.
>>>>
>>>> HDB
>>>> Jolle
>>>>
>>>> 24 sep 2010 kl. 09.55 skrev Tami Williams:
>>>>
>>>>> Thanks in advance.
>>>>>
>>>>> I've gotten this started (you can see it at http://www.asktami.com/star-rating/listStars.html) but am running into trouble.
>>>>>
>>>>> This is the inspiration for what I want to do:
>>>>> http://www.visguy.com/2009/10/01/village-of-100-people-diagrams/
>>>>>
>>>>> I'll have data in a MySQL database that will be found via Lasso and then needs to be output as "people" bars.
>>>>>
>>>>> So, for example I might have data that looks like this:
>>>>>
>>>>> 15 people out of 30 did X
>>>>> and  20 out of 100 did Y
>>>>>
>>>>> In MySQL
>>>>>
>>>>> thing sample size percent
>>>>> X 30 50 -> output 15 people of out of 30
>>>>> Y 100 5 -> output 20 out of 100
>>>>>
>>>>>
>>>>>
>>>>> What I'd like to show is this:
>>>>>
>>>>> For X, a 30 little people icons, with 15 of them in one color and 15 of them in a different color
>>>>> For Y, a 100 little people icons, with 5 of them in one color and 95 of them in a different color
>>>>>
>>>>> Has anyone done this before with "people" bars the way I've described?  Or with different colored stars?  If I can get it working with stars then I can always have someone create the differently colored people icons for me.
>>>>>
>>>>> Anyone able to help me with the jQuery for this?
>>>>>
>>>>> Thanks in advance.
>>>>>
>>>>>
>>>>> Note: if you load the page using FireBug in console you will see (for each row)
>>>>> - the data passed to the function in the form of percent-sample size with percent being 5 characters and sample size 3 characters
>>>>> - the percent
>>>>> - the sample size
>>>>>
>>>>>
>>>>> You'll see it my demo page at http://www.asktami.com/star-rating/listStars.html that it doesn't work if you have a sample size > 5 - I can't figure out why.
>>>>>
>>>>> Thanks in advance.
>>>>>
>>>>> #############################################################
>>>>> This message is sent to you because you are subscribed to
>>>>> the mailing list <[hidden email]>.
>>>>> To unsubscribe, E-mail to: <[hidden email]>
>>>>> To switch to the DIGEST mode, E-mail to <[hidden email]>
>>>>> To switch to the INDEX mode, E-mail to <[hidden email]>
>>>>> Send administrative queries to  <[hidden email]>
>>>>>
>>>>>
>>>>>
>>>>
>>>>
>>>>
>>>> #############################################################
>>>> This message is sent to you because you are subscribed to
>>>> the mailing list <[hidden email]>.
>>>> To unsubscribe, E-mail to: <[hidden email]>
>>>> To switch to the DIGEST mode, E-mail to <[hidden email]>
>>>> To switch to the INDEX mode, E-mail to <[hidden email]>
>>>> Send administrative queries to  <[hidden email]>
>>>>
>>>
>>>
>>> #############################################################
>>> This message is sent to you because you are subscribed to
>>> the mailing list <[hidden email]>.
>>> To unsubscribe, E-mail to: <[hidden email]>
>>> To switch to the DIGEST mode, E-mail to <[hidden email]>
>>> To switch to the INDEX mode, E-mail to <[hidden email]>
>>> Send administrative queries to  <[hidden email]>
>>>
>>>
>>>
>>
>>
>>
>> #############################################################
>> This message is sent to you because you are subscribed to
>> the mailing list <[hidden email]>.
>> To unsubscribe, E-mail to: <[hidden email]>
>> To switch to the DIGEST mode, E-mail to <[hidden email]>
>> To switch to the INDEX mode, E-mail to <[hidden email]>
>> Send administrative queries to  <[hidden email]>
>>
>
>
> #############################################################
> This message is sent to you because you are subscribed to
> the mailing list <[hidden email]>.
> To unsubscribe, E-mail to: <[hidden email]>
> To switch to the DIGEST mode, E-mail to <[hidden email]>
> To switch to the INDEX mode, E-mail to <[hidden email]>
> Send administrative queries to  <[hidden email]>
>
>
>



#############################################################
This message is sent to you because you are subscribed to
  the mailing list <[hidden email]>.
To unsubscribe, E-mail to: <[hidden email]>
To switch to the DIGEST mode, E-mail to <[hidden email]>
To switch to the INDEX mode, E-mail to <[hidden email]>
Send administrative queries to  <[hidden email]>

Reply | Threaded
Open this post in threaded view
|

Re: [OT] need to represent data using people bars vs. stars using jQuery

Bil Corry-3
[hidden email] wrote on 9/23/2010 6:12 PM:
> With this you need 12 images.
> greenpeople.png
> graypeople.png
> green0.1people.png
> green0.2people.png
> green0.3people.png
> green0.4people.png
> etc

You can do CSS tricks too, although the control over how it looks degrades across browsers.  The images I used are here:

        http://www.iconarchive.com/icons/aha-soft/people/48/engineer-icon.png
        http://www.iconarchive.com/icons/aha-soft/people/48/user-icon.png
        (source: http://www.iconarchive.com/category/business/people-icons-by-aha-soft.html)


[
var('number' = 4.55);
var('total' = 8);
var('countsymbol' = '<img src="engineer-icon.png">');
var('emptysymbol' = '<img src="user-icon.png">');

var('wholepeoplecount' = math_floor($number));
var('semipeoplecount' = math_round(48.0 * ($number - decimal($wholepeoplecount)), 1));
var('semiemptypeoplecount' = math_round(48.0 * (1.0 - ($number - decimal($wholepeoplecount))), 1));

'<span style="float:left;">';

$countsymbol * $wholepeoplecount;'</span>';
if($semipeoplecount > 0);
        '<span style="display: block; width: '+$semipeoplecount+'px; height: 48px; background: url(engineer-icon.png) no-repeat; float: left;"></span>';
/if;
if($semiemptypeoplecount > 0);
        '<span style="display: block; width: 20px; height: 48px; background: url(user-icon.png) no-repeat -'+$semipeoplecount+'px 0px; float: left;"></span>';
'<span style="float:left;">';
$emptysymbol * ($total - $wholepeoplecount - 1);
'</span>';
else;
'<span style="float:left;">';
$emptysymbol * ($total - $wholepeoplecount);
'</span>';
/if;
]


- Bil

#############################################################
This message is sent to you because you are subscribed to
  the mailing list <[hidden email]>.
To unsubscribe, E-mail to: <[hidden email]>
To switch to the DIGEST mode, E-mail to <[hidden email]>
To switch to the INDEX mode, E-mail to <[hidden email]>
Send administrative queries to  <[hidden email]>

Reply | Threaded
Open this post in threaded view
|

Re: [OT] need to represent data using people bars vs. stars using jQuery

list
Cool!

HDB
Jolle

24 sep 2010 kl. 16.32 skrev Bil Corry:

> [hidden email] wrote on 9/23/2010 6:12 PM:
>> With this you need 12 images.
>> greenpeople.png
>> graypeople.png
>> green0.1people.png
>> green0.2people.png
>> green0.3people.png
>> green0.4people.png
>> etc
>
> You can do CSS tricks too, although the control over how it looks degrades across browsers.  The images I used are here:
>
> http://www.iconarchive.com/icons/aha-soft/people/48/engineer-icon.png
> http://www.iconarchive.com/icons/aha-soft/people/48/user-icon.png
> (source: http://www.iconarchive.com/category/business/people-icons-by-aha-soft.html)
>
>
> [
> var('number' = 4.55);
> var('total' = 8);
> var('countsymbol' = '<img src="engineer-icon.png">');
> var('emptysymbol' = '<img src="user-icon.png">');
>
> var('wholepeoplecount' = math_floor($number));
> var('semipeoplecount' = math_round(48.0 * ($number - decimal($wholepeoplecount)), 1));
> var('semiemptypeoplecount' = math_round(48.0 * (1.0 - ($number - decimal($wholepeoplecount))), 1));
>
> '<span style="float:left;">';
>
> $countsymbol * $wholepeoplecount;'</span>';
> if($semipeoplecount > 0);
> '<span style="display: block; width: '+$semipeoplecount+'px; height: 48px; background: url(engineer-icon.png) no-repeat; float: left;"></span>';
> /if;
> if($semiemptypeoplecount > 0);
> '<span style="display: block; width: 20px; height: 48px; background: url(user-icon.png) no-repeat -'+$semipeoplecount+'px 0px; float: left;"></span>';
> '<span style="float:left;">';
> $emptysymbol * ($total - $wholepeoplecount - 1);
> '</span>';
> else;
> '<span style="float:left;">';
> $emptysymbol * ($total - $wholepeoplecount);
> '</span>';
> /if;
> ]
>
>
> - Bil
>
> #############################################################
> This message is sent to you because you are subscribed to
>  the mailing list <[hidden email]>.
> To unsubscribe, E-mail to: <[hidden email]>
> To switch to the DIGEST mode, E-mail to <[hidden email]>
> To switch to the INDEX mode, E-mail to <[hidden email]>
> Send administrative queries to  <[hidden email]>
>
>
>



#############################################################
This message is sent to you because you are subscribed to
  the mailing list <[hidden email]>.
To unsubscribe, E-mail to: <[hidden email]>
To switch to the DIGEST mode, E-mail to <[hidden email]>
To switch to the INDEX mode, E-mail to <[hidden email]>
Send administrative queries to  <[hidden email]>

Reply | Threaded
Open this post in threaded view
|

Re: [OT] need to represent data using people bars vs. stars using jQuery

Tami Williams
In reply to this post by Bil Corry-3
Nice but doesn't work well with numbers like 4.125 or 4.25 out of 8.  
Basically anything less than .5 doesn't look good.  And stuff like  
4.75 out of 8 puts extra spaces in between the 4.75 and 5 image.

In "var('semipeoplecount' = math_round(48.0 * ($number -  
decimal($wholepeoplecount)), 1));"
- Where are you getting your '48' from?  Is it because the height of  
the image is 48px?

On Sep 24, 2010, at 2:32 AM, Bil Corry wrote:

> [hidden email] wrote on 9/23/2010 6:12 PM:
>> With this you need 12 images.
>> greenpeople.png
>> graypeople.png
>> green0.1people.png
>> green0.2people.png
>> green0.3people.png
>> green0.4people.png
>> etc
>
> You can do CSS tricks too, although the control over how it looks  
> degrades across browsers.  The images I used are here:
>
> http://www.iconarchive.com/icons/aha-soft/people/48/engineer-icon.png
> http://www.iconarchive.com/icons/aha-soft/people/48/user-icon.png
> (source: http://www.iconarchive.com/category/business/people-icons-by-aha-soft.html)
>
>
> [
> var('number' = 4.55);
> var('total' = 8);
> var('countsymbol' = '<img src="engineer-icon.png">');
> var('emptysymbol' = '<img src="user-icon.png">');
>
> var('wholepeoplecount' = math_floor($number));
> var('semipeoplecount' = math_round(48.0 * ($number -  
> decimal($wholepeoplecount)), 1));
> var('semiemptypeoplecount' = math_round(48.0 * (1.0 - ($number -  
> decimal($wholepeoplecount))), 1));
>
> '<span style="float:left;">';
>
> $countsymbol * $wholepeoplecount;'</span>';
> if($semipeoplecount > 0);
> '<span style="display: block; width: '+$semipeoplecount+'px;  
> height: 48px; background: url(engineer-icon.png) no-repeat; float:  
> left;"></span>';
> /if;
> if($semiemptypeoplecount > 0);
> '<span style="display: block; width: 20px; height: 48px;  
> background: url(user-icon.png) no-repeat -'+$semipeoplecount+'px  
> 0px; float: left;"></span>';
> '<span style="float:left;">';
> $emptysymbol * ($total - $wholepeoplecount - 1);
> '</span>';
> else;
> '<span style="float:left;">';
> $emptysymbol * ($total - $wholepeoplecount);
> '</span>';
> /if;
> ]
>
>
> - Bil
>
> #############################################################
> This message is sent to you because you are subscribed to
>  the mailing list <[hidden email]>.
> To unsubscribe, E-mail to: <[hidden email]>
> To switch to the DIGEST mode, E-mail to <[hidden email]
> >
> To switch to the INDEX mode, E-mail to <[hidden email]
> >
> Send administrative queries to  <[hidden email]>
>


#############################################################
This message is sent to you because you are subscribed to
  the mailing list <[hidden email]>.
To unsubscribe, E-mail to: <[hidden email]>
To switch to the DIGEST mode, E-mail to <[hidden email]>
To switch to the INDEX mode, E-mail to <[hidden email]>
Send administrative queries to  <[hidden email]>

Reply | Threaded
Open this post in threaded view
|

Re: [OT] need to represent data using people bars vs. stars using jQuery

Bil Corry-3
It's a proof-of-concept.  Jolle's idea of using pre-made images will give you exact control over how it looks.  But yes, depending on the image you use, if you crop it, it may not look good depending on the image.  The 48 came from the width of the image, essentially if the value is .5, then the amount of the image shown should be half, or 24 px.


- Bil

Tami Williams wrote on 9/24/2010 5:52 PM:

> Nice but doesn't work well with numbers like 4.125 or 4.25 out of 8.  Basically anything less than .5 doesn't look good.  And stuff like 4.75 out of 8 puts extra spaces in between the 4.75 and 5 image.
>
> In "var('semipeoplecount' = math_round(48.0 * ($number - decimal($wholepeoplecount)), 1));"
> - Where are you getting your '48' from?  Is it because the height of the image is 48px?
>
> On Sep 24, 2010, at 2:32 AM, Bil Corry wrote:
>
>> [hidden email] wrote on 9/23/2010 6:12 PM:
>>> With this you need 12 images.
>>> greenpeople.png
>>> graypeople.png
>>> green0.1people.png
>>> green0.2people.png
>>> green0.3people.png
>>> green0.4people.png
>>> etc
>>
>> You can do CSS tricks too, although the control over how it looks degrades across browsers.  The images I used are here:
>>
>>     http://www.iconarchive.com/icons/aha-soft/people/48/engineer-icon.png
>>     http://www.iconarchive.com/icons/aha-soft/people/48/user-icon.png
>>     (source: http://www.iconarchive.com/category/business/people-icons-by-aha-soft.html)
>>
>>
>> [
>> var('number' = 4.55);
>> var('total' = 8);
>> var('countsymbol' = '<img src="engineer-icon.png">');
>> var('emptysymbol' = '<img src="user-icon.png">');
>>
>> var('wholepeoplecount' = math_floor($number));
>> var('semipeoplecount' = math_round(48.0 * ($number - decimal($wholepeoplecount)), 1));
>> var('semiemptypeoplecount' = math_round(48.0 * (1.0 - ($number - decimal($wholepeoplecount))), 1));
>>
>> '<span style="float:left;">';
>>
>> $countsymbol * $wholepeoplecount;'</span>';
>> if($semipeoplecount > 0);
>>     '<span style="display: block; width: '+$semipeoplecount+'px; height: 48px; background: url(engineer-icon.png) no-repeat; float: left;"></span>';
>> /if;
>> if($semiemptypeoplecount > 0);
>>     '<span style="display: block; width: 20px; height: 48px; background: url(user-icon.png) no-repeat -'+$semipeoplecount+'px 0px; float: left;"></span>';
>> '<span style="float:left;">';
>> $emptysymbol * ($total - $wholepeoplecount - 1);
>> '</span>';
>> else;
>> '<span style="float:left;">';
>> $emptysymbol * ($total - $wholepeoplecount);
>> '</span>';
>> /if;
>> ]
>>
>>
>> - Bil
>>


#############################################################
This message is sent to you because you are subscribed to
  the mailing list <[hidden email]>.
To unsubscribe, E-mail to: <[hidden email]>
To switch to the DIGEST mode, E-mail to <[hidden email]>
To switch to the INDEX mode, E-mail to <[hidden email]>
Send administrative queries to  <[hidden email]>