Develop Reference

daterangepicker not folding open with bootstrap in Laravel 7

I've been working on a reporting engine, have all the graphs working using Ajax and jquery to update the page. I wanted to add a date range picker and went to Date Range Picker Examples
I am able to get it so it has the icon and the dates populate when the page loads. But when I click on the field it doesn't open to giving the option to select. I took the sample code and was able to get it to work with only it on the page. In the console, I don't see any errors. I'm just getting into jquery etc so I'm perplexed at why this isn't working.
HTML Content
<div class="row justify-content-center">
<div class="col-auto">
<h1>Report for {{ $labels['Company'] }}</h1>
</div>
</div>
<div class="col-4 float-right">
<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
<i class="fa fa-calendar"></i>
<span></span> <i class="fa fa-caret-down"></i>
</div>
</div>
<div class=" justify-content-around bg-white">
<div class="d-flex justify-content-around bg-white">
<div class="card text-center border-0">
<div class="card-body">
<div class="test rounded-circle font-weight-bolder col-xs" id="impressions"></div>
<h6 class="card-subtitle mb-2 text-muted pt-2 align-content-center">Impressions</h6>
</div>
</div>
<div class="card text-center border-0">
<div class="card-body ">
<div class="test rounded-circle font-weight-bolder col-xs" id="clicks"></div>
<h6 class="card-subtitle mb-2 text-muted pt-2 align-content-center">Clicks</h6>
</div>
</div>
<div class="card text-center border-0">
<div class="card-body">
<div class="test rounded-circle font-weight-bolder col-xs" id="cpm"></div>
<h6 class="card-subtitle mb-2 text-muted pt-2 align-content-center">eCPM</h6>
</div>
</div>
<div class="card text-center border-0">
<div class="card-body">
<div class="test rounded-circle font-weight-bolder col-xs" id="cost"></div>
<h6 class="card-subtitle mb-2 text-muted pt-2 align-content-center">Cost</h6>
</div>
</div>
<div class="card text-center border-0">
<div class="card-body">
<div class="test rounded-circle font-weight-bolder col-xs" id="cpc"></div>
<h6 class="card-subtitle mb-2 text-muted pt-2 align-content-center">CPC</h6>
</div>
</div>
<div class="card text-center border-0">
<div class="card-body">
<div class="test rounded-circle font-weight-bolder col-xs" id="ctr"></div>
<h6 class="card-subtitle mb-2 text-muted pt-2 align-content-center">CTR</h6>
</div>
</div>
</div>
</div>
<div class="card-body">
<canvas id="myAreaChart" width="100%" height="30"></canvas>
</div>
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Dashboard</div>
<div class="card-body">
</div>
</div>
</div>
</div>
Script section
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" >
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js" ></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script type="text/javascript">
$(function () {
var start = moment().subtract(29, 'days');
var end = moment();
function cb(start, end) {
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
$(".rangeArea").load("reportRange", function() {
$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, cb);
})
cb(start, end);
});
( function ( $ ) {
var charts = {
init: function () {
// -- Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#292b2c';
this.ajaxGetPostMonthlyData();
},
ajaxGetPostMonthlyData: function () {
var urlPath = 'http://' + window.location.hostname + ':8000/admin/comp/get-post-chart-data/'+{{$labels['orgid']}};
var request = $.ajax( {
method: 'GET',
url: urlPath
} );
request.done( function ( response ) {
$("#ctr").html(response.totals.ctr);
$("#cpc").html(response.totals.cpc);
$("#cost").html(response.totals.cost);
$("#cpm").html(response.totals.cpm);
$("#clicks").html(response.totals.clicks);
$("#impressions").html(response.totals.impressions);
charts.createCompletedJobsChart( response );
});
},
/**
* Created the Completed Jobs Chart
*/
createCompletedJobsChart: function ( response ) {
console.log(response);
var days = new Array();
var clicks = new Array();
var impressions = new Array();
$.each(response.totalByDate, function (index, value){
days.push(value['days']);
clicks.push(value['clicks']);
impressions.push(value['impressions']);
});
var daysFiltered = days.filter(e => e != null);
var clicksFiltered = clicks.filter(e => e != null);
var impressionsFiltered = impressions.filter(e => e != null);
console.log(impressions);
var data = {
labels: daysFiltered,
datasets: [{
fill: false,
type: 'bar',
label: 'Impressions',
pointHoverRadius: 5,
pointHitRadius: 5,
lineTension: 0,
yAxisID: 'impressionID',
data: impressionsFiltered,
borderColor: "#993333",
// borderDash: [5, 5],
backgroundColor: "#993333",
pointBackgroundColor: "#993333",
pointBorderColor: "#993333",
pointHoverBackgroundColor: "#993333",
pointHoverBorderColor: "#993333",
order:2
}, {
fill: false,
type: 'line',
pointHoverRadius: 5,
pointHitRadius: 5,
lineTension: 0,
yAxisID: 'clicksID',
label: 'Clicks',
data: clicksFiltered,
borderColor: "#55bae7",
// borderDash: [5, 5],
backgroundColor: "#55bae7",
pointBackgroundColor: "#55bae7",
pointBorderColor: "#55bae7",
pointHoverBackgroundColor: "#55bae7",
pointHoverBorderColor: "#e755ba",
order: 1
}]
};
var option = {
maintainAspectRatio: true,
responsive: true,
bezierCurveTension: 0,
scales: {
xAxes: [{
display: true,
ticks: {
maxTicksLimit: 3,
fontSize: 10
}
}],
yAxes: [{
position: 'left',
'id': 'impressionID',
display: true,
ticks: {
steps: 100,
stepValue: 5,
max: 800,
callback: (label, index, labels) => {
return label ;
}
}
}, {
position: 'right',
'id': 'clicksID',
display: true,
ticks: {
steps: 1,
stepValue: 1,
precision: 0,
max: 5,
callback: (label, index, labels) => {
return label ;
}
}
},
]
}
};
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: option
});
}
};
charts.init();
} )( jQuery );
</script>

Determining which chart the user has clicked on

I'm using chart.js to draw multiple line charts. And when the user clicks on one of these charts, I need to know which chart it was. In order to catch the click of the user, I've added events: ['click'] in the options of the chart, as well as a onClick: clicked to call the function clicked when the user has clicked on the chart. Now I have this:
let chLine = document.getElementById("chLine");
let chartData = {
labels: ['l1', 'l2', 'l3', 'l4', 'l5', 'l6', 'l7', 'l8', 'l9'],
datasets: [
{
label: 'c1',
data: [0.3, 0.4, 0.5, 0.35, 0.2, 0.5, 0.4, 0.55, 0.6],
backgroundColor: 'transparent',
borderColor: '#e6194b',
borderWidth: 1,
pointBackgroundColor: '#e6194b'
},
{
label: 'c2',
data: [0.7, 0.5, 0.2, 0.4, 0.6, 0.1, 0.88, 0.35, 0.45],
backgroundColor: 'transparent',
borderColor: '#3cb44b',
borderWidth: 1,
pointBackgroundColor: '#3cb44b'
}
]
}
if (chLine) {
new Chart(chLine,{
type: 'line',
data: chartData,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
position: 'top',
labels: {
boxWidth: 5
}
},
events: ['click'],
onClick: clicked
}
}
);
}
function clicked(c, i) {
console.log(c, i)
}
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<div class="row my-3">
<div class="col">
<h4>Chart</h4>
</div>
</div>
<div class="row my-2">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<canvas id="chLine" height="100"></canvas>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script src="test.js"></script>
</body>
</html>
And every time I click on a chart, it gives an array containing information about each chart and also an object containing information about the click event. But I can't seem to find information to conclude which chart was clicked. How can I do this?

Inside the clicked function you can use getElementAtEvent(c) & _datasetIndex; to get the index of the chart data.After that use that index to get the data which is used to draw that line chart. In this example another field is added to the data and on click that name field is consoled. In this case you need to click on the chart circle
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<div class="container">
<div class="row my-3">
<div class="col">
<h4>Chart</h4>
</div>
</div>
<div class="row my-2">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<canvas id="chLine" height="100"></canvas>
</div>
</div>
</div>
</div>
</div>
let chLine = document.getElementById("chLine");
let chartData = {
labels: ['l1', 'l2', 'l3', 'l4', 'l5', 'l6', 'l7', 'l8', 'l9'],
datasets: [{
name: 'First Chart',
label: 'c1',
data: [0.3, 0.4, 0.5, 0.35, 0.2, 0.5, 0.4, 0.55, 0.6],
backgroundColor: 'transparent',
borderColor: '#e6194b',
borderWidth: 1,
pointBackgroundColor: '#e6194b'
},
{
name: 'Second Chart',
label: 'c2',
data: [0.7, 0.5, 0.2, 0.4, 0.6, 0.1, 0.88, 0.35, 0.45],
backgroundColor: 'transparent',
borderColor: '#3cb44b',
borderWidth: 1,
pointBackgroundColor: '#3cb44b',
id: '1',
}
]
}
if (chLine) {
var myLineChart = new Chart(chLine, {
type: 'line',
data: chartData,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
position: 'top',
labels: {
boxWidth: 5
}
},
events: ['click'],
onClick: clicked
}
});
}
function clicked(c, i, x) {
let getDataSetIndex = this.getElementAtEvent(c)[0]._datasetIndex;
console.log(chartData.datasets[getDataSetIndex].name)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<div class="container">
<div class="row my-3">
<div class="col">
<h4>Chart</h4>
</div>
</div>
<div class="row my-2">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<canvas id="chLine" height="100"></canvas>
</div>
</div>
</div>
</div>
</div>

PieChart for every row in dynamically created table

I have a dynamically created table and on click of view button in each row a modal opens that have the pie chart with no of leaves taken by people till date in categories like sick, vacation, maternity, paternity for the particular year.on click of 1st button the pie chart shows up https://imgur.com/a/wpNa3 but but if I click on any button other than 1st then I get a blank page.https://imgur.com/a/jcZjE .Why blank page is appearing??please help me.
<td>
<button type="button" class="btn btn-default btn-sm view" data-toggle="modal" data-target="#{{pl.id}}_3"><i class="fa fa-eye" aria-hidden="true" style="color:black"></i></button>
<!-- Modal -->
<div class="modal fade" id= "{{pl.id}}_3" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><b>{{pl.employee.emp_name|title }}</b> Leave Details</h4>
</div>
<div class="modal-body">
<p>Applied leave from {{pl.start_date}} to {{pl.end_date}} for {{ pl.end_date|timeuntil:pl.start_date }} </p>
<p>Leave applied on : {{pl.date_created}}</p>
<p><div id="container" class="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
My jquery Code:
$(document).on('click','.view', function(e){
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Total number of leaves applied till now'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Sick Leaves',
y: 56.33
}, {
name: 'Casual Leaves',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Vacation Leaves',
y: 10.3
}, {
name: 'Maternity Leaves',
y: 4.77
}, {
name: 'Paternity Leaves',
y: 0.91
}]
}]
});
});
I am using classname on click due to duplicacy in Id's but still its not workin g..Where am I doing wrong?

How to take data into piechart from database?

I have a dynamically created table and on click of view button in each row a modal opens that have the pie chart with no of leaves taken by people till date in categories like sick, vacation, maternity, paternity for the particular year.Please help me how to take data from database..and on click of 1st button the pie chart shows up
but if I click on any button other than 1st then I get a blank page.
<td>
<button type="button" class="btn btn-default btn-sm view" data-toggle="modal" data-target="#{{pl.id}}_3"><i class="fa fa-eye" aria-hidden="true" style="color:black"></i></button>
<!-- Modal -->
<div class="modal fade" id= "{{pl.id}}_3" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><b>{{pl.employee.emp_name|title }}</b> Leave Details</h4>
</div>
<div class="modal-body">
<p>Applied leave from {{pl.start_date}} to {{pl.end_date}} for {{ pl.end_date|timeuntil:pl.start_date }} </p>
<p>Leave applied on : {{pl.date_created}}</p>
<p><div id="container" class="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
My jquery Code:
$(document).on('click','.view', function(e){
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Total number of leaves applied till now'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Sick Leaves',
y: 56.33
}, {
name: 'Casual Leaves',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Vacation Leaves',
y: 10.3
}, {
name: 'Maternity Leaves',
y: 4.77
}, {
name: 'Paternity Leaves',
y: 0.91
}]
}]
});
});

Modal fade has some time delay so you have to call your function by using set time out
create a new function and call it setTimeout(function(){ myFunc(); }, 500); This will work on your modal.

Add a class to highcharts pie chart section

I have a highchart pie chart and a table to the right of the pie chart which displays the data in table form.
I would like to link the table with the pie chart so that when I hover over a row in the table it will be as if I am hovering over the pie chart segment.
I believe to do this I would need to add a class to the pie chart segment/path that I can then call using JS when hovering over the table row.
What would be the best way to either achieve this?
(I know it's possible to have a basic legend attached to the pie chart but because I need the table to be in a bootstrap column to the right along with some other data the legend isn't enough :) ).
Here is the current chart setup:
<!-- in Page JS -->
<script>
$(function () {
$('#results_donut').highcharts({
chart: {
type: 'pie'
},
title: {
text: false
},
credits: {
enabled: false
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
},
shadow: false,
},
series: {
states: {
hover: {
enabled: false
}
},
point: {
events: {
mouseOver: function () {
this.options.oldColor = this.color;
this.graphic.attr("fill", "#F8464A");
},
mouseOut: function () {
this.graphic.attr("fill", this.options.oldColor);
}
}
},
}
},
tooltip: {
enabled: false,
formatter: function() {
return this.point.name + ': ' + this.y +' %';
},
style: {
fontFamily: 'Open Sans',
fontWeight: '300',
letterSpacing: '0.03em',
fontSize: '14px'
},
},
series: [{
name: 'Failure Reasons',
innerSize: '50%',
data: [["Brakes",74.6],["Seatbelts", 19.4]],
}],
});
});
</script>
And here is the view code:
<div class="row">
<div class="col-xs-12 col-sm-6">
<div id="results_donut"></div>
</div>
<div class="col-xs-12 col-sm-6 result-figures">
<div class="row failure-reasons">
<div class="col-xs-12">
<h4>Failure Reasons</h4>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<table class="table table-condensed table-hover">
<tbody>
<tr>
<td class="col-xs-6 text-uppercase failure-name">Brakes</td>
<td class="col-xs-2">74.6%</td>
<td class="col-xs-4 text-center">
<a class="transition" href="#">View Details</a>
</td>
</tr>
<tr>
<td class="col-xs-6 text-uppercase failure-name">Seatbelts</td>
<td class="col-xs-2">19.4%</td>
<td class="col-xs-4 text-center">
<a class="transition" href="#">View Details</a>
</td>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>