Add markers radius with pulse animation on click

Add markers radius with pulse animation on click - javascript

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

Related

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>

Not able to nest divs elemnets using JQUERY

In the starred code is the nested div elements, I have read XML file which has news articles. I want to read and add those to this nested format using jquery.
<div id="for-you-feed" class="container" style="justify-content: center;">
<div class="row view-group " id="rowview">
**
<div class="item grid-group-item col-xs-4 col-lg-4 col-md-6 col-sm-12">
<div class=" thumbnail card border-light" style="width: 20rem; ">
<div class="img-event ">
<img class="group list-group-image img-fluid " src="https://timesofindia.indiatimes.com/photo/74745223.cms " alt=" " />
</div>
<div class="caption card-body ">
<h4 class="group card-title inner list-group-item-heading ">
Hyderabad: Buses with same number plates seized</h4>
<p class="group inner list-group-item-text ">
The transport authorities, under the guidance of deputy transport commissioner Papa Rao, seized four buses that belo</p>
<div class="row ">
<div id="footer1" class="col-xs-12 col-md-6 ">
<p class="lead ">
$21.000</p>
</div>
<div id="footer2" class="col-xs-12 col-md-6 ">
<a class="btn btn-success " href="http://www.jquery2dotnet.com ">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
**
</div>
My code of jquery is below
$(document).ready(function() {
$.get("https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Ftimesofindia.indiatimes.com%2Frssfeeds%2F-2128816011.cms&api_key=mkzfaqsb5gtninv1pddoke81vwmjlyfiissiitvd", function(data, status) {
//$("#rowview").empty();
for (i in data.items) {
console.log(data.items[i].thumbnail);
console.log(data.items[i].title);
console.log(data.items[i].link);
console.log(data.items[i].description);
console.log(data.items[i].description.slice(pos + 4));
var pos = data.items[i].description.indexOf("</a>"),
$divitem = $("</div>").attr('class', 'item grid-group-item col-xs-4 col-lg-4 col-md-6 col-sm-12');
var $divthumb = $("</div>").attr({ "class": 'thumbnail card border-light', style: 'width: 20rem' }),
$divimg = $("</div>").attr('class', 'img-event '),
$imggrp = $("</img>").attr({ "class": 'group list-group-image img-fluid ', src: data.items[i].thumbnail }),
$divcaption = $("</div>").attr('class', 'caption card-body'),
$headcard = $("</h4>").text(data.items[i].title).attr('class', 'group card-title inner list-group-item-heading'),
$paracard = $("</p>").attr('class', 'group inner list-group-item-text').text(data.items[i].description.slice(pos + 4)),
$divrow = $("</div>").attr('class', 'row'),
$divfooter1 = $("</div>").attr({ "class": 'col-xs-12 col-md-6', id: 'footer1' }),
$lead = $("</p>").attr('class', 'lead').text('$21.000'),
$divfooter2 = $("</div>").attr({ "class": 'col-xs-12 col-md-6', id: 'footer2' }),
$atag = $("</a>").attr({ class: 'btn btn-success', href: 'http://www.jquery2dotnet.com' }).text("Add to cart");
$("#rowview").append($divitem.append($divthumb.append([$divimg.append($imggrp), $divcaption.append([$headcard, $paracard, $divrow.append([$divfooter1.append($lead), $divfooter2.append($atag)])])])));
// $($divthumb).append([$divimg, $divcaption]);
//$($divimg).append($imggrp);
// $(divthumb).append(divcaption);
//$($divcaption).append([$headcard, $paracard, $divrow]);
// $(divcaption).append(paracard);
//$(divcaption).append(divrow);
//$($divrow).append([$divfooter1, $divfooter2]);
//$($divfooter1).append($lead);
//$(divrow).append(divfooter2);
// $($divfooter2).append($atag);
// $(".view-group").append($divitem);
}
});
});
I'm not getting the response on my website. I even tried the code in the comments, but didn't work.

Update code and it is working. Hope it helps.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sidebar demo</title>
<script
src="https://code.jquery.com/jquery-3.5.0.min.js"
integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
crossorigin="anonymous"></script>
</head>
<body>
<div id="rowview"> </div>
<script>
$(document).ready(function() {
$.get("https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Ftimesofindia.indiatimes.com%2Frssfeeds%2F-2128816011.cms&api_key=mkzfaqsb5gtninv1pddoke81vwmjlyfiissiitvd", function(data, status) {
for (i in data.items) {
console.log(data.items[i].thumbnail);
console.log(data.items[i].title);
console.log(data.items[i].link);
console.log(data.items[i].description);
console.log(data.items[i].description.slice(pos + 4));
var pos = data.items[i].description.indexOf("</a>"),
$divitem = $("<div>").attr('class', 'item grid-group-item col-xs-4 col-lg-4 col-md-6 col-sm-12');
var $divthumb = $("<div>").attr({ "class": 'thumbnail card border-light', style: 'width: 20rem' }),
$divimg = $("<div>").attr('class', 'img-event '),
$imggrp = $("<img>").attr({ "class": 'group list-group-image img-fluid ', src: data.items[i].thumbnail }),
$divcaption = $("<div>").attr('class', 'caption card-body'),
$headcard = $("<h4>").text(data.items[i].title).attr('class', 'group card-title inner list-group-item-heading'),
$paracard = $("<p>").attr('class', 'group inner list-group-item-text').text(data.items[i].description.slice(pos + 4)),
$divrow = $("<div>").attr('class', 'row'),
$divfooter1 = $("<div>").attr({ "class": 'col-xs-12 col-md-6', id: 'footer1' }),
$lead = $("<p>").attr('class', 'lead').text('$21.000'),
$divfooter2 = $("<div>").attr({ "class": 'col-xs-12 col-md-6', id: 'footer2' }),
$atag = $("<a>").attr({ class: 'btn btn-success', href: 'http://www.jquery2dotnet.com' }).text("Add to cart");
$("#rowview").append($divitem.append($divthumb.append([$divimg.append($imggrp), $divcaption.append([$headcard, $paracard, $divrow.append([$divfooter1.append($lead), $divfooter2.append($atag)])])])));
// $($divthumb).append([$divimg, $divcaption]);
//$($divimg).append($imggrp);
// $(divthumb).append(divcaption);
//$($divcaption).append([$headcard, $paracard, $divrow]);
// $(divcaption).append(paracard);
//$(divcaption).append(divrow);
//$($divrow).append([$divfooter1, $divfooter2]);
//$($divfooter1).append($lead);
//$(divrow).append(divfooter2);
// $($divfooter2).append($atag);
// $(".view-group").append($divitem);
}
});
});
</script>
</body>
</html>

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.

grocery cart on Angular

I create add-to-cart app.
Want to click each item and add it to cart.
But firstly I need to click button 'add to cart' and increase its value with every click.
As I added ng-repeat, I don't know how to write a function that will be responsible for adding separate item.
angular.module('TransactionApp', [])
.controller('TransactionsCtrl', function($scope) {
$scope.title = 'Online-store';
$scope.itemsArray = [
{ price: 50, name: "Whey protein", img: 'img/item-1.png', quantity: 0},
{ price: 60, name: "Protein bar", img: 'img/item-2.png', quantity: 0 },
{ price: 35, name: "BCAA", img: 'img/item-3.png', quantity: 0 },
{ price: 50, name: "Whey protein", img: 'img/item-1.png', quantity: 0 },
{ price: 60, name: "Protein bar", img: 'img/item-2.png', quantity: 0 },
{ price: 80, name: "BCAA", img: 'img/item-3.png', quantity: 0 }
];
// $scope.count = 0;
$scope.addTo = function(){
}
});
here is html:
<h2 class="title">{{title}} <i class="em em-shopping_bags"></i></h2>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-2 col-sm-6">
<div class="card" style="width: 18rem;" ng-repeat='item in itemsArray'>
<img class="card-img-top" ng-src={{item.img}} alt="Card image cap">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">{{item.name}}</p>
<p class="price">{{ item.price | currency }}</p>
<i class="em em-shopping_trolley"></i> Add to cart <span class="number">{{ item.quantity }}</span>
</p>
</div>
</div>
</div>
</div>
</div>

Pass the item to controller with addTo(item):
<a href="#" class="btn btn-warning" ng-click="addTo(item)">
<i class="em em-shopping_trolley"></i>
Add to cart
<span class="number">{{ item.quantity }}</span>
</a>
after your addTo accepts a parameter:
$scope.addTo = function(item){ // 'item' is a reference to an element in itemsArray
item.quantity++;
}

I believe each of your item in view has its own Add to Cart Button against it and I also believe you want to increase the quantity property of each of the item each time a user clicks the button against that item.
For that all you have to do is pass the item to addTo() method like :-
<i class="em em-shopping_trolley"></i> Add to cart <span class="number">{{ item.quantity }}</span>
and modify the method definition in controller
$scope.addTo = function(var item){
item.quantity++;
}

Develop Reference

JavaScript is the programming language of the Web.

Add markers radius with pulse animation on click - javascript

Related

daterangepicker not folding open with bootstrap in Laravel 7

Not able to nest divs elemnets using JQUERY

Determining which chart the user has clicked on

Responsive not working in D3 Funnel Chart

grocery cart on Angular

Categories

Resources