Bar chart is not displaying propely
code is here
reference
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="../Scripts/Chart.js"></script>
Aspx page
<body>
<canvas id="chartMonthlyBookingSales" </canvas>
</body>
<script type="text/javascript">
$(document).ready(function () {
ShowCurrentTime();
// HSCProgressPer();
// getchartdata();
// HSCDestination();
// HSCBooking();
// ss();
});
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
//<img src="~/Images/ajax-loader.gif" />
function ShowCurrentTime() {
debugger;
$.ajax({
type: "get",
url: "dashboard.aspx/GetJSONMonthlyBookingSales",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function(response) {
alert(response.d);
}
});
}
function OnSuccess(response) {
MonthlyBookingSales(response.d);
console.log(response.d);
}
function MonthlyBookingSales(data) {
debugger;
var MonthName = [];
var ColorR = [];
var BookingCount = [];
// var Color = [];
for (var i = 0; i < data.length; i++) {
MonthName.push(data[i].Month);
BookingCount.push(data[i].BookingTotal);
ColorR.push(getRandomColor());
}
var barChartData = {
labels: MonthName,
datasets: [
{
label: "Total",
data: BookingCount,
backgroundColor: ColorR
}
]
}
var ctx1 = document.getElementById("chartMonthlyBookingSales").getContext("2d");
ctx1.canvas.height = 80;
var chart = new Chart(ctx1,
{
type: 'bar',
data: barChartData,
options:
{
scales: {
xAxes: [{
ticks: {
maxRotation: 90,
autoSkip: false
}
}]
},
title:
{
display: true,
text: ""
},
responsive: true,
maintainAspectRatio: true,
legend: {
display: false
}
}
});
}
});
</script>