$(document).

ready(function(){
var mainCat;
var secCat;
var startDate;
var endDate;
var username = $("#user").val();
var graph = document.getElementById('graph');

//reset option secondaryCategory on selection of mainCategory

$("#outcomeReport_mainCategory").change(function(){
$("#outcomeReport_secondaryCategory").val("");
});
//on change of secondaryCategory selection get new data
$("#outcomeReport_secondaryCategory").change(function(){
mainCat = $("#outcomeReport_mainCategory").val();
secCat = $("#outcomeReport_secondaryCategory").val();
startDate = $("#outcomeReport_startDate").val();
endDate = $("#outcomeReport_endDate").val();

//if main category equels total then reset input elemets

if (mainCat=='Total') {
$("#outcomeReport_secondaryCategory").val("");
$("#outcomeReport_startDate").val("");
$("#outcomeReport_endDate").val("");
}
//execute ajax request that will get income data based on
//main category,secondary category, start date selection, end date
selection
$.getJSON("database/getOutcomeReport.php",
{'username':username,'mainCat':mainCat,'secCat':secCat,'startDate':startDate,'endDa
te':endDate}, function (result) {
//if main category was selected hide chart
if (!mainCat) {
graph.innerHTML="";
}else{
graph.innerHTML = "<canvas id=\"buyers\" width=\"600\"
height=\"400\"></canvas>";
}
//proccess the retured data (json format) and create array that the
chart will understand
var labels = [],data=[];
for (var i in result.records) {
labels.push(result.records[i].date);
data.push(result.records[i].total);
}
//create data set for charts.js
var tempData = {
labels : labels,
datasets : [{
fillColor : "rgba(208, 0, 44, 0.6)",
strokeColor : " rgba(180, 0, 44, 1)",
pointColor : "#fff",
pointStrokeColor : "#9DB86D",
data : data
}]
};
//select canvas element that will hold the graph
buyers = document.getElementById('buyers').getContext('2d');
 //create bar chart
new Chart(buyers).Bar(tempData);

});
});

});