Percentage bar in Datatables

Percentage bar in Datatables

BoogaBooga Posts: 7Questions: 1Answers: 0

In this code I am trying to display a percentage or progress bar inside a TD in Datatables, but totally lost.

Any help please?

`<script type="text/javascript">
var ProjectUID;
ExecuteOrDelayUntilScriptLoaded(getProjectUIDProperty, "sp.js");
function getProjectUIDProperty() {
var ctx = new SP.ClientContext.get_current();
this.web = ctx.get_web();
this.props = this.web.get_allProperties();
ctx.load(this.web);
ctx.load(this.props);
ctx.executeQueryAsync(Function.createDelegate(this, gotProperty), Function.createDelegate(this, failedGettingProperty));
}
function gotProperty() {
ProjectUID = this.props.get_item('MSPWAPROJUID');
LoadProjectData();
}
function failedGettingProperty() {
alert('Error: ' + args.get_message());
}
function LoadProjectData() {
var data = $.ajax({url: _spPageContextInfo.siteAbsoluteUrl + "/_api/ProjectData/Projects(guid'"+ ProjectUID +"')?"
+ "$select=Description,ProjectOwnerName,ProjectPercentCompleted,ProjectState,Progress,ProjectPhase,Scale,ProjectPriority,Programme",
type: "GET",
dataType: "json",
headers: {Accept: "application/json;odata=verbose" }
});
data.done(function (data,textStatus, jqXHR){
if (data.d.results == undefined) {
data.d.results = new Array();
data.d.results[0] = new Object();
data.d.results[0].Description = data.d.Description;
data.d.results[0].ProjectOwnerName = data.d.ProjectOwnerName;
data.d.results[0].ProjectPercentCompleted = data.d.ProjectPercentCompleted;
data.d.results[0].ProjectState = data.d.ProjectState;
data.d.results[0].Progress = data.d.Progress;
data.d.results[0].ProjectPhase = data.d.ProjectPhase;
data.d.results[0].Scale = data.d.Scale;
data.d.results[0].ProjectPriority = data.d.ProjectPriority;
data.d.results[0].Programme = data.d.Programme;
}
$('#Projectfield').dataTable( {
"bDestroy": true,
"bAutoWidth": false,
"bFilter": false,
"bInfo": false,
"bProcessing": true,
"bPaginate": false,
"bSort": false,
"aaData": data.d.results,
"aoColumns": [
{ "mData": "Description", className:"textCenterDescription" },
{ "mData": "ProjectOwnerName", className:"textCenter" },
{ "mData": "ProjectPercentCompleted", className:"textCenter" },
{ "mData": "ProjectState", className:"textCenter" },
{ "mData": "Progress", className:"textCenter" },
{ "mData": "ProjectPhase", className:"textCenter" },
{ "mData": "Scale", className:"textCenter" },
{ "mData": "ProjectPriority", className:"textCenter" },
{ "mData": "Programme", className:"textCenter" }
],
"aoColumnDefs": [

                             { "mRender": function (data, type, full) {
                                percentBar('round','#fff', '#FF9CAB', '#FF0033', '#FF9CAB', 0, 'solid');
                             }, 

                             "aTargets": [2]
                             },

                             { "mRender": function (data, type, full) {
                                return parseFloat(data).toFixed(0) + "%";
                             },

                             "aTargets": [2]
                             },
                             { "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) 
                                {
                                   if (sData == 'In progress') { 
                                      $(nTd).html('<div class="pill-inprogress">'+sData+'</div>');
                                   } else if (sData == 'Completed') { 
                                      $(nTd).html('<div class="pill-completed">'+sData+'</div>').css('color', 'white');  
                                   } else if (sData == 'Cancelled') { 
                                      $(nTd).html('<div class="pill-closed">'+sData+'</div>').css('color', 'white');   
                                   } else if (sData == 'Closed - Premature') { 
                                      $(nTd).html('<div class="pill-closed">'+sData+'</div>').css('color', 'white'); 
                                   } else if (sData == 'Closed - Planned') { 
                                      $(nTd).html('<div class="pill-closed">'+sData+'</div>').css('color', 'white');
                                   } else if (sData == 'On Hold') { 
                                      $(nTd).html('<div class="pill-onhold">'+sData+'</div>').css('color', '#666666'); 
                                   } else if (sData == 'Not Started') { 
                                      $(nTd).html('<div class="pill-notstarted">'+sData+'</div>'); 
                                   } else { 
                                      $(nTd).css('background-color', 'white'); 
                                   }
                                },
                             "aTargets": [3]
                             },

                             { "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) 
                                {
                                   if (sData == 'On Schedule') { 
                                      $(nTd).html('<div class="pill-onschedule">'+sData+'</div>');
                                   } else if (sData == 'Overdue') { 
                                      $(nTd).html('<div class="pill-overdue">'+sData+'</div>').css('color', 'white'); 
                                   } else if (sData == 'Late') { 
                                      $(nTd).html('<div class="pill-late">'+sData+'</div>'); 
                                   } else if (sData == 'Done') { 
                                      $(nTd).html('<div class="pill-done">'+sData+'</div>').css('color', 'white'); 
                                   } else if (sData == 'On Hold') { 
                                      $(nTd).html('<div class="pill-onhold">'+sData+'</div>').css('color', '#666666'); 
                                   } else if (sData == 'Not Started') { 
                                      $(nTd).html('<div class="pill-notstarted">'+sData+'</div>'); 
                                   } else { 
                                      $(nTd).css('background-color', 'white'); 
                                   }
                                },
                             "aTargets": [4]
                             }

                          ],
                          });
    });
    data.fail(function (jqXHR,textStatus,errorThrown){
        //alert("Error retrieving project data: " + jqXHR.responseText);
    });

}
</script>`

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    Thats a lot of code to dig through to try understanding what is wrong. Please post a link to your page or a test case showing what you are doing so we can help debug.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Maybe this example will help.

    Kevin

  • BoogaBooga Posts: 7Questions: 1Answers: 0
    edited March 2023

    Hi!

    Thanks for the reply, unfortunately this JS is part of a Project Site in Project Online, willing to share but not possible.

    The TD has the value of the percentage, my problem is how to render the progress or perfentage bar in the lines 1 and 2 of the code formatted part.

    The rest of the code works perfect.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735
    Answer ✓

    With columns.render you always need to return something. Maybe you need this:

                             { "mRender": function (data, type, full) {
                                return percentBar('round','#fff', '#FF9CAB', '#FF0033', '#FF9CAB', 0, 'solid');
                             },
    

    If this doesn't help then please build a simple test with an example of your data and with the percentBar so we can see what you have to help debug.

    Kevin

  • BoogaBooga Posts: 7Questions: 1Answers: 0

    Finally tried the HTML5 approach:

        `{ data: 'sData',
           render: function (data, type, row, meta) 
             {
               return type === 'display' ? '<progress value="' + data + '" max="100"></progress>&nbsp;&nbsp;' + data + '%': data;
             },
          "aTargets": [2]
          },`
    

    With this result:

  • BoogaBooga Posts: 7Questions: 1Answers: 0
    edited March 2023

    Hi! Willing to give it a try to percentBar in the following CodePen:

    https://codepen.io/Boogaweb/pen/QWVaRdV

    Any suggestion on rendering the bar? JS code related is on lines 69 to 81. Basically, the current percentage value is 61 as displayed in the html but no bar is rendered with percentBar. The goal is to have it like this https://codepen.io/RedJokingInn/pen/jMZeQN

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735
    edited March 2023

    I see you are trying to use this plugin. I hadn't seen it before.

    Your test case has a couple of errors. Look in the browser's console. I don't have a codepen account so any changes I would make won't be saved. Fix the errors and we can take another look. Maybe consider moving your test case to https://live.datatables.net/ or https://jsfiddle.net/ that doesn't require an account to save changes.

    Also you are trying to use createdCell for the percentageBars. You need to use columns.render as the docs state and as shown in the working example.

    Kevin

  • BoogaBooga Posts: 7Questions: 1Answers: 0
    edited March 2023

    Moved to: https://live.datatables.net/mehaxeqe/1/edit?html,css,js,console,output

    For column [2] (% Complete) I am using the below to render 61 to a percentBar:

     {
       "mRender": function (data, type, full) {
       return DataTable.render.percentBar(data,'round','#fff', '#FF9CAB', '#FF0033', '#FF9CAB', 0, 'solid');
        },
        "aTargets": [2]
      },
    
  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    The test case isn't loading any data nor initializing Datatables. You might need to simulate the data instead of trying an ajax request.

    The working example looks like this:

    {
          targets: 4,
          render: $.fn.dataTable.render.percentBar('round','#fff', '#FF9CAB', '#FF0033', '#FF9CAB', 0, 'solid')
    }
    

    You have this:

                                     { "mRender": function (data, type, full) {
                                         return DataTable.render.percentBar(data,'round','#fff', '#FF9CAB', '#FF0033', '#FF9CAB', 0, 'solid');
                                     },
                                     "aTargets": [2]
                                     },
    

    One problem is you have the columns.targets in a separate object from columns.render. You don't want to use the columns.render function but use it like the working example. Change your code like the working example.

    Kevin

  • BoogaBooga Posts: 7Questions: 1Answers: 0

    Changed the code as per the working example. Sorry, not being an experienced JS developer… How do I make datatables to be rendered?

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    Sorry, not being an experienced JS developer

    We all have to start somewhere :smile:

    How do I make datatables to be rendered?

    You will need to call the LoadProjectData() function. Also note that you have removed the jQuery and Datatables libraries from the HTML tab. I added those back and placed the call to LoadProjectData() here:
    https://live.datatables.net/mehaxeqe/3/edit

    The test case still doesn't run due to missing components. You can replace the ajax call and use Javascript sourced data like this example.

    Kevin

  • BoogaBooga Posts: 7Questions: 1Answers: 0
    edited March 2023

    Cool, let me work on it, thanks so much!

Sign In or Register to comment.