Quering on the list item collection after being loaded

I'm a newbie to SharePoint and JavaScript.

I have a requirement where in I have to get the count of list column and bind to an HTML element.

Example:

Red,Blue,Green are the columns and i have to get the count of "Red" columns ,"Blue" column and "Green" columns that are filled after loading the items.

//To get the context
var context = new SP.ClientContext.get_current();

//To get the list
var pwh_list = pmh_context.get_web().get_lists().getByTitle('test');

//Query for the list
var pwh_query = new SP.CamlQuery();

//Specifying the xml for the query.
pwh_query.set_viewXml("<GroupBy Collapse='True'><FieldRef Name='Vertical' /></GroupBy><OrderBy> <FieldRef Name='Vertical' Ascending='True' /></OrderBy>");

//Get the items based on the query
var pwh_items = pwh_list.getItems(pwh_query);

//Loading the items
context.load(awh_items);
context.executeQueryAsync(pmh_SuccessItems, pmh_Failitems);

function pmh_SuccessItems()
{
    //Get the count of "Red","Blue","Green" columns
}

function pmh_Failitems()
{

}

These counts have to be bound to the HTML table.

Kindly help.