Creating a JQuery plugin for laboratory plate visualization

I develop a LIMS system for a molecular Pathology laboratory and I just build a UI tool for displaying a plate of samples. I thought I would break it out to share. It is still very basic but I hope to add configurations and styles as I get time.

Github: https://github.com/gareth-reid/LabPlate-JqueryPlugin

I use this in conjunction with a shopping cart like tool for scientists to load pick their work lists which is not included in plugin but maybe I will add it.

Usage

JQuery

var plateViewer = $('#modal-sample-plate').plate();
var plateViewer = $('#modal-sample-plate').plate({
    wellActiveCss: 'active-well',
    wellCss: 'well',
    toolTipCss: 'plate-tooltip',
    toolTipTextCss: 'tooltiptext',
    plateErrorCss: 'alert alert-danger',
    sampleCountExceedErrorMsg: 'Sample count exceeds 96 well plate'
});
myPlate.draw(data);

Where data would be passed as a JSON as below. This would be from a controller method and/or AJAX request.

HTML

<div class="plate-container" id="modal-sample-plate"></div>

Example JSON

var data = ‘[“DNA051905″,”DNA051905″,”DNA051905″,”DNA051905″,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”DNA051905″,”DNA051905″,”DNA051905″,”DNA051905″,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”DNA051905″,”DNA051905″,”DNA051905″,”DNA051905″,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”DNA051905″,”DNA051905″,”DNA051905″,”DNA051905″,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”DNA051905″,”DNA051905″,”DNA051905″,”DNA051905″,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”DNA051905″,”DNA051905″,”DNA052731″,”DNA052731″,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”DNA052731″,”DNA052731″,”DNA056644″,”DNA056923″,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”DNA058150″,”DNA056219″,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”,”EMPTY”]’