Herewith I used Java Script bar chart. To display the chart first load the data to an array 'qtyArray' and chart object to 'qtyBarChart'.
loadData function
function loadData (category,brand)
{
var qtyBarChart = document.getElementById("minChart");
var qtyArray = new Array();
sel_category = category;
$.ajax({
url : "{{route('getCatMinMax')}}",
method: "GET",
dataType:"json",
data :{category:sel_category},
success: function(data)
{
$.each(data, function (i, value)
{
qtyArray[i] = [value.min_qty, value.max_qty, value.actualQty];
drawQtyChart(qtyBarChart, qtyArray);
});
}
});
}
After that I draw the chart by called 'drawQtyChart(qtyBarChart, qtyArray)' function by passing related params.
function drawQtyChart(objChart,values)
{
var i;
for ( i = 0; i <values.length; i++)
{
new Chart(objChart, {
type: 'bar',
data: {
labels: ["Min","Max","Actual"],
datasets: [{
label: 'Qty Min/Max',
data: values[i],
backgroundColor: [
'rgba(160,49,170)',
'rgba(160,49,170)',
'rgba(255,148,29)'
],
borderColor: [
'rgba(160,49,170',
'rgba(160,49,170)',
'rgba(255,148,29)'
],
borderWidth: 1
}]
},
options: {
legend: {
display: false,
labels: {
fontColor: 'rgb(255, 99, 132)'
}
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += Math.round(tooltipItem.yLabel * 100) / 100;
return label;
}
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
callback: function(value, index, values) {
if(parseInt(value) >= 1000){
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} else {
return value;
}
}
}
}]
}
}
});
}
}
But unfortunately tool-tip not displayed always, only mouse hoover displays it. Another issue is I load another chart with different data with 'qtyArray', mouse hoover displays previously loaded chart by 'qtyArray' with their tool-tips. Help me to solve this issue or else if the mouse over tool-tip can be always shown on the chart it is better to solve this prob.
