Bar chart is not displaying propely
code is here
reference
Aspx page
$(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;
}
//

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
}
}
});
}
});
Ramesh PalanivelPosted Apr 19, 2017, 2:21 AM