Develop Reference

I can't show the values of my database in a graph using chartjs

I'm trying to practice with chartjs, so I've downloaded some code from the Internet to adapt it to my needs.
I need to display the number of patients who were born in a specific month based on their dates of birth as well as their year of birth.
The issue is that I have searched for every way to display the information that I have in my database in the graph and I can't find the way, since the code of the graphs is in an external javascript file.
I have been trying to solve this for a long time, please, I would really appreciate it if someone could help me
table Pacients
CREATE TABLE `pacients` (
`id` int(11) NOT NULL,
`first_name` varchar(30) COLLATE utf8_spanish_ci NOT NULL,
`last_name` varchar(30) COLLATE utf8_spanish_ci NOT NULL,
`document_name` varchar(20) COLLATE utf8_spanish_ci NOT NULL,
`document_numb` int(12) NOT NULL,
`phone` int(16) NOT NULL,
`sex` varchar(10) COLLATE utf8_spanish_ci NOT NULL,
`pregncy` varchar(2) COLLATE utf8_spanish_ci NOT NULL,
`date_birth` date NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci;
INSERT INTO `pacients` (`id`, `first_name`, `last_name`, `document_name`, `document_numb`, `phone`, `sex`, `pregnancy`, `date_birth`) VALUES
(6, 'marta', 'mangue', 'DNI', 655, 222987665, 'Feminine', '', '2021-12-28', '', '', ''),
(7, 'Mayo', 'Esono', 'DNI', 5769, 551233234, 'Masculine', '', '2021-10-25', '', '', ''),
(40, 'Celso', 'NUESTRA', 'Passport', OF4334, 4343, 'Masculine', '', '2021-11-19', '', '', ''),
(41, 'Nathan', 'Narby Esimi', 'passport', P001111, 654890, 'Masculine', '', '2021-12-28', '', '', '');
chart.js
var myChart = new Chart(ctxGreen, {
type: 'line',
data: data,
options: gradientChartOptionsConfigurationWithTooltipGreen
});
This is where I would like my information to appear
var chart_labels = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
var chart_data = [100, 70, 90, 70, 85, 60, 75, 60, 90, 80, 110, 100];
var ctx = document.getElementById("chartBig1").getContext('2d');
var gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
gradientStroke.addColorStop(1, 'rgba(72,72,176,0.1)');
gradientStroke.addColorStop(0.4, 'rgba(72,72,176,0.0)');
gradientStroke.addColorStop(0, 'rgba(119,52,169,0)'); //purple colors
var config = {
type: 'line',
data: {
labels: chart_labels,
datasets: [{
label: "My First dataset",
fill: true,
backgroundColor: gradientStroke,
borderColor: '#d346b1',
borderWidth: 2,
borderDash: [],
borderDashOffset: 0.0,
pointBackgroundColor: '#d346b1',
pointBorderColor: 'rgba(255,255,255,0)',
pointHoverBackgroundColor: '#d346b1',
pointBorderWidth: 20,
pointHoverRadius: 4,
pointHoverBorderWidth: 15,
pointRadius: 4,
data: chart_data,
}]
},
options: gradientChartOptionsConfigurationWithTooltipPurple
};
var myChartData = new Chart(ctx, config);
$("#polio").click(function() {
var data = myChartData.config.data;
data.datasets[0].data = chart_data;
data.labels = chart_labels;
myChartData.update();
});
$("#sarampion").click(function() {
var chart_data = [80, 120, 105, 110, 95, 105, 90, 100, 80, 95, 70, 120];
var data = myChartData.config.data;
data.datasets[0].data = chart_data;
data.labels = chart_labels;
myChartData.update();
});
$("#paludismo").click(function() {
var chart_data = [60, 80, 65, 130, 80, 105, 90, 130, 70, 115, 60, 130];
var data = myChartData.config.data;
data.datasets[0].data = chart_data;
data.labels = chart_labels;
myChartData.update();
});
var ctx = document.getElementById("CountryChart").getContext("2d");
var gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
gradientStroke.addColorStop(1, 'rgba(29,140,248,0.2)');
gradientStroke.addColorStop(0.4, 'rgba(29,140,248,0.0)');
gradientStroke.addColorStop(0, 'rgba(29,140,248,0)'); //blue colors
index.php this is the php file where the graph is displayed
<?php include("plantillas/header.php"); ?>
<section class="panelControl">
<div class="container">
<div class="row">
<div class="col-12 titulo-panel">
<h2 class="card-title">Administration panel</h2>
<p>Check patient statistics</p>
<div class="container">
<div class="content">
<div class="row">
<div class="col-12">
<div class="card custom-card">
<div class="card-header ">
<div class="row">
<div class="col-sm-6 text-left">
<h5 class="card-category">Pacients</h5>
<h2 class="card-title">Statistics of registered patients</h2>
</div>
<div class="col-sm-6">
<div class="btn-group btn-group-toggle float-right" data-toggle="buttons">
<label class="btn btn-sm btn-primary btn-simple active" id="Poliomyelitis">
<input type="radio" name="options" checked>
<span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">Poliomyelitis</span>
<span class="d-block d-sm-none">
<i class="tim-icons icon-single-02"></i>
</span>
</label>
<label class="btn btn-sm btn-primary btn-simple" id="Measles">
<input type="radio" class="d-none d-sm-none" name="options">
<span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">Measles</span>
<span class="d-block d-sm-none">
<i class="tim-icons icon-gift-2"></i>
</span>
</label>
<label class="btn btn-sm btn-primary btn-simple" id="Malaria">
<input type="radio" class="d-none" name="options">
<span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">Malaria</span>
<span class="d-block d-sm-none">
<i class="tim-icons icon-tap-02"></i>
</span>
</label>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="chart-area">
<canvas id="chartBig1"></canvas>
</div>
</div>
</div>
</div>
</div>
I have searched for solutions by looking at various tutorials but so far I have not found any that help me

Add markers radius with pulse animation on click

I trying to add markers to the mapbox-gl-js. Every marker needs to have its own icon.
The code:
// General params
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [28.834527783897784, 45.340983787852906],
zoom: 16,
pitch: 60,
bearing: 7,
antialias: true
});
// Language
mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js');
map.addControl(new MapboxLanguage({
defaultLanguage: 'ru'
}));
// On load
map.on('load', () => {
// Insert the layer beneath any symbol layer.
const layers = map.getStyle().layers;
const labelLayerId = layers.find(
(layer) => layer.type === 'symbol' && layer.layout['text-field']
).id;
// Places JSON
const geojson = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'properties': {
'iconSize': [40, 40],
'icon': 'house',
'url': '1',
'description':
`
<div class="text ff--open-sans">
<h5 class="mb-1 fw--700">Продажа квартиры</h5>
<img src="/design/map_1/images/flat.jpg" class="img--responsive border-radius">
<p class="mb-2 mt-1">
Продается с мебелью и техникой,заходи и живи.
</p>
<span class="fs--14 color--dark">Характеристики</span>
<div class="d-flex color--gray gutter-y-5 fs--13 flex-column">
<div class="d-flex mb-0">
<span>Агенство</span>
<span class="mx-2">—</span>
<span class="color--dark">Капитал</span>
</div>
<div class="d-flex mb-0">
<span>Комнаты</span>
<span class="mx-2">—</span>
<span class="color--dark"> 2 </span>
</div>
<div class="d-flex mb-0">
<span>Этаж</span>
<span class="mx-2">—</span>
<span class="color--dark"> 3 </span>
</div>
<div class="d-flex mb-0">
<span>Ремонт</span>
<span class="mx-2">—</span>
<span class="color--dark"> Евро </span>
</div>
</div>
</div>
`
},
'geometry': {
'type': 'Point',
'coordinates': [28.83342580788326, 45.3389572391001]
},
},
{
'type': 'Feature',
'properties': {
'icon': 'flat',
'description':
`
<div class="text ff--open-sans">
<h5 class="mb-1 fw--700">Продажа квартиры</h5>
<img src="/design/map_1/images/flat.jpg" class="img--responsive border-radius">
<p class="mb-2 mt-1">
Продается с мебелью и техникой,заходи и живи.
</p>
<span class="fs--14 color--dark">Характеристики</span>
<div class="d-flex color--gray gutter-y-5 fs--13 flex-column">
<div class="d-flex mb-0">
<span>Агенство</span>
<span class="mx-2">—</span>
<span class="color--dark">Капитал</span>
</div>
<div class="d-flex mb-0">
<span>Комнаты</span>
<span class="mx-2">—</span>
<span class="color--dark"> 2 </span>
</div>
<div class="d-flex mb-0">
<span>Этаж</span>
<span class="mx-2">—</span>
<span class="color--dark"> 3 </span>
</div>
<div class="d-flex mb-0">
<span>Ремонт</span>
<span class="mx-2">—</span>
<span class="color--dark"> Евро </span>
</div>
</div>
</div>
`
},
'geometry': {
'type': 'Point',
'coordinates': [28.820403408543825, 45.35615240244837]
}
},
]
};
// Add places on map
map.addSource('places', {
'type': 'geojson',
'data': geojson
});
// Add 3D 'building' layer
map.addLayer(
{
'id': 'add-3d-buildings',
'source': 'composite',
'source-layer': 'building',
'filter': ['==', 'extrude', 'true'],
'type': 'fill-extrusion',
'minzoom': 15,
'paint': {
'fill-extrusion-color': '#aaa',
// Use an 'interpolate' expression to
// add a smooth transition effect to
// the buildings as the user zooms in.
'fill-extrusion-height': [
'interpolate',
['linear'],
['zoom'],
15,
0,
15.05,
['get', 'height']
],
'fill-extrusion-base': [
'interpolate',
['linear'],
['zoom'],
15,
0,
15.05,
['get', 'min_height']
],
'fill-extrusion-opacity': 0.6
}
},
labelLayerId
);
// Set building number labels color
map.setPaintProperty('building-number-label', 'text-color', 'black');
// Set building number labels size
map.setLayoutProperty('building-number-label', 'text-size', 16);
// Custom html for places on the map.
for (const marker of geojson.features) {
// Create a DOM element for each marker.
const el = document.createElement('div');
const ico = marker.properties.icon;
// console.log(marker.geometry.coordinates)
// var circle = mapboxgl.circleMarker(marker.geometry.coordinates, {radius: 100}).addTo(map);
el.className = `map-marker marker-icon-${ico}`;
el.style.width = `30px`;
el.style.height = `30px`;
// Add markers to the map.
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.addTo(map);
// Custom html marker
$(el).each(function(){
$(this).html('<div class="js-show-property marker-content" data-url="'+marker.properties.url+'"><div class="pin bounce"><div class="icon"></div></div><div class="pulse"></div></div>');
});
// Add active marker
el.addEventListener('click', () =>{
$(el).toggleClass("active");
});
}
});
But it`s all on CSS. And when I zoom map the circle of the marker doesn't have a true size. I try to make it on Mapbox js options.
The problem is to add to each marker radius circle by click with pulsing animation and icon inside the marker.
Help, please!

I advise you to use layers to create your markers. Here is an example of a Marker using this principle with a pulsation effect.
https://docs.mapbox.com/mapbox-gl-js/example/add-image-animated/
You can add a layer for the pulse and another one at the same place for the icon. You won't have to worry about the size of your markers.
// ...
map.addLayer({
'id': 'layer-with-pulsing-dot',
'type': 'symbol',
'source': 'dot-point',
'layout': {
'icon-image': 'pulsing-dot',
'icon-allow-overlap': true // important for display
}
});
map.addLayer({
'id': 'myicon2',
'type': 'symbol',
'source': 'dot-point',
'layout': {
'icon-image': 'bicycle-15',
'icon-allow-overlap': true // important for display
}
});
//...
Example updated
I have improved the example to meet the demand more precisely. I added a second point for a really useful example.
See the code : https://codepen.io/cladjidane/pen/GRErYqO

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>

Responsive not working in D3 Funnel Chart

I tried to d3 funnel chart with responsive in all device.I used bootstrap panel and inside d3 funnel chart.Funnel chart created but not look in responsive device.Once i resized my device or responsive mobile in console is not look.
This is desktop image[enter image description here][1]
This is mobile device in console
[enter image description here][2]
[1]: https://i.stack.imgur.com/DPrGC.png
[2]: https://i.stack.imgur.com/RJEu8.png
Bootstrap coding
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="panel panel-primary ">
<div class="panel-heading ">
<h3 class="panel-title text-uppercase">Candidate By Status</h3>
</div>
<div class="panel-body ">
<div class="funnelPanel">
<div id="funnelContainer"></div>
</div>
</div>
</div>
</div>
D3 Funnel coding...
var data1 = [
['I', 12],
['T', 4],
['L', 25],
['C', 15],
['A', 12],
['T', 4]
];
const options1 = {
chart: {
width: 200,
height: 450,
bottomWidth: 1 / 2,
bottomPinch: 1,
curve: {
enabled: true,
height: 20,
shade: -0.4
}
},
block: {
dynamicSlope: true,
dynamicHeight: true,
highlight: true,
minHeight: 50,
fill: {
type: 'gradient',
}
}
}
const funnel = new D3Funnel("#funnelContainer");
funnel.draw(data1, options1);
d3.select('#funnelContainer svg')
.attr('transform', 'translate(0)rotate(270)')
How to fixed funnel chart width and height for responsive with all device.

How to use waitMe loader with AngularJs app

I'm using waitMe (http://vadimsva.github.io/waitMe/) loading for my angular js application. Here's how I have added it into my project.
<link href="lib/css/waitMe.css" rel="stylesheet"> <script src="lib/js/waitMe.js"></script>
And here the javascript code for the waiting message.
$('#login-box-body').waitMe({
effect: 'bounce',
text: '',
bg: 'rgba(255,255,255,0.7)',
color: '#000',
maxSize: '',
waitTime: -1,
source: 'img.svg',
textPos: 'vertical',
fontSize: '',
onClose: function (el) {
}
});
And this is the div which i have used in the javascript message generator.
<div class="login-box-body">
<div class="wrapper">
<form class="form-signin">
<h2 class="form-signin-heading">Sign In</h2>
<div style="text-align: center">
But when I press the button, nothing appears, no error message too. What's the reason for this ? Am i missing something here ?

Issue is here $('#login-box-body').waitMe({. You can fix it in below two ways:
Change #login-box-body to .login-box-body in JavaScript
JavaScript:
$('.login-box-body').waitMe({
effect: 'bounce',
text: '',
bg: 'rgba(255,255,255,0.7)',
color: '#000',
maxSize: '',
waitTime: -1,
source: 'img.svg',
textPos: 'vertical',
fontSize: '',
onClose: function (el) {
}
});
HTML:
<div class="login-box-body">
<div class="wrapper">
<form class="form-signin">
<h2 class="form-signin-heading">Sign In</h2>
<div style="text-align: center">
Change <div class="login-box-body"> to <div id="login-box-body">
JavaScript:
$('#login-box-body').waitMe({
effect: 'bounce',
text: '',
bg: 'rgba(255,255,255,0.7)',
color: '#000',
maxSize: '',
waitTime: -1,
source: 'img.svg',
textPos: 'vertical',
fontSize: '',
onClose: function (el) {
}
});
HTML:
<div id="login-box-body">
<div class="wrapper">
<form class="form-signin">
<h2 class="form-signin-heading">Sign In</h2>
<div style="text-align: center">