Home
DCR library is JavaScript library for the DCR graphs. It provides basic functionalities for loading the DCR graphs anywhere and use them, update them or create a new DCR graph with it. DCR library is utilizing jQuery library and XML to JSON App to easily manipulate the graph and its properties without those files DCR library will not work.
Kind: global {Intro}
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo App</title>
</head>
<body>
<script src="jquery.js"></script>
<script src="xml2json.js"></script>
<script src="DCR.js"></script>
<script>
// We can create Apps with the DCR library and can fill out the missing functionalities of DCR Library with these Apps.
// Example plugin to display Events by Roles in list items fashion
;(function (DCR) {
DCR.fn.showEventsByRoles = function (reqContainer) {
$('#'+reqContainer).append('<h4>Roles</h4>');
var outPut = '<ul>';
for (var i = 0; i < this.Roles.length; i++) {
var curRoleNEvents = this.getEventsByRole(this.Roles[i]);
outPut += '<li>'+this.Roles[i]+'</li>';
if(curRoleNEvents.length>0){
outPut += '<ul>';
for (var j = 0; j < curRoleNEvents.length; j++) {
outPut += '<li>'+curRoleNEvents[j].custom.label+'</li>';
};
outPut += '</ul>';
}
};
outPut += '</ul>';
$('#'+reqContainer).append(outPut);
}
})(DCR)
// Basic Demo application HTML structure and how to include the Library files:
$(document).ready(function () {
var myApp = new DCR();
$('#loadGraph').on('click', function () {
var fileXML = $('#xmlInput').val();
if(fileXML==" " || fileXML == ""){
alert('Invalid Input');
return;
}
myApp.loadXML(fileXML).showEventsByRoles("result");
// graph will reset first by default by this function just in case user clicks several time
// so each time new graph is to be laoded properly
});
})
</script>
<textarea id="xmlInput"></textarea>
<input type="submit" id="loadGraph" value="Load DCR Graph" />
<div id="result"></div>
</body>
</html>