SharePoint & jQuery

There are a couple of OOTB option available I would recommend you to try this before you want to code for it.

1. Create new view select the columns you want to display then GroupBy based on 'Status' column.
2. As mentioned in your comments filter the column to show 'Count'.

Conside first option if your interested in-build Expand/Collapse in addition to the total count.

Code option:

• Achieve this using CSR - Refer MSDN code samples, CSR basics and code

If you want to output the results to a table using jQuery, the following code for your reference:

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {    
    var listName="CIW";

    var requestUri = _spPageContextInfo.webAbsoluteUrl +
                  "/_api/Web/Lists/getByTitle('"+listName+"')/items?$select=Status";

    //execute AJAX request
    $.ajax({
        url: requestUri,
        type: "GET",
        headers: { "ACCEPT": "application/json;odata=verbose" },
        success: function (data) {
            var completedCount=0,inProgressCount=0,notStartedCount=0,cancelledCount=0;

            for(var i=0;i<data.d.results.length;i++){
                var item=data.d.results[i];
                if(item.Status=="Completed"){
                    completedCount++;
                }else if(item.Status=="In Progress"){
                    inProgressCount++;
                }else if(item.Status=="Not Started"){
                    notStartedCount++;
                }else if(item.Status=="Cancelled"){
                    cancelledCount++;
                }
            }
            var html="<table border='1' cellspacing='0' cellpadding='0'><thead><tr><th>Status</th><th>Count</th></tr></thead>";
            html+="<tbody><tr><td>Completed</td><td>"+completedCount+"</td></tr>";
            html+="<tr><td>In Progress</td><td>"+inProgressCount+"</td></tr>";
            html+="<tr><td>Not Started</td><td>"+notStartedCount+"</td></tr>";
            html+="<tr><td>Cancelled</td><td>"+cancelledCount+"</td></tr></tbody></table>";
            $("#CIWCount").html(html);
        },
        error: function () {
            //alert("Failed to get details");                
        }
    });
});
</script>
<div id="CIWCount"></div>