How to specify a division for cytoscape.js in html? - html

I am trying to use cytoscape.min.js in one of my HTML page for showing interactions. Looking into some examples, I am able to develop a page for the same.
However, I am not able to specify this into a particular division, The "#cy" division is not in the space of proper division. In more detail, when I will develop a page with multiple contents, I want to restrict the interaction view (using cytoscpae) into a particular division in HTML. I guess something to modify in the style of "#cy" division, but not able to do so.
I would like to get any suggestion/help regarding this.
Thanks in advance,
Santosh
My current HTML page is like following:
<!doctype html>
<html>
<head>
<title>Cytoscape example</title>
<script src='cytoscape.min.js'></script>
</head>
<style>
#cy {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
</style>
<body>
<div>
<h1> Interactions </h1>
<h1> Test data </h1>
</div>
<div id="cy"></div>
<script>
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [
// nodes
{ data: { id: 'a', type: "met" } },
{ data: { id: 'b', type: "met" } },
{ data: { id: 'c', type: "prot" } },
{ data: { id: 'd', type: "prot" } },
{ data: { id: 'e', type: "prot" } },
{ data: { id: 'f', type: "prot" } },
// edges
{
data: {
id: 'ab',
source: 'a',
target: 'b'
}
},
{
data: {
id: 'ae',
source: 'a',
target: 'e'
}
},
{
data: {
id: 'cd',
source: 'c',
target: 'd'
}
},
{
data: {
id: 'ef',
source: 'e',
target: 'f'
}
},
{
data: {
id: 'ac',
source: 'a',
target: 'c'
}
},
{
data: {
id: 'be',
source: 'b',
target: 'e'
}
}
],
style: [
{
selector: 'node[type="prot"]',
style: {
'shape': 'circle',
'background-color': 'red',
label: 'data(id)'
}
},
{
selector: 'node[type="met"]',
style: {
'shape': 'square',
'background-color': 'blue',
label: 'data(id)'
}
}]
});
cy.layout({
name: 'circle',
animate: true
}).run();
</script>
</body>
</html>
</html>

Actually, the current code looks fine for me and does the job.
If you want to make the div smaller, you can do like this:
#cy {
width: 500px;
height: 500px;
border: 1px solid black;
}
I suggest you add the border while in development, just to know where the div is. Without the border, the div still works fine, but it might be difficult to tell where it is on the page and click it.

Related

FullCalendar daygrid renders events on bottom

Iam trying to get familiar with FullCalendar. Iam using pure Javascript and my problem is that in daygrid-weekgrid view all events are placed in the bottom, even if i resize the row height. Currently i use the default FullCalendar template. Below there are the respective files and one screenshot of my awful calendar:)
extends layout2
block content
div(id='calendar')
script.
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var initdate = new Date();
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
initialDate: initdate,
height: '100%',
handleWindowResize:true,
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
events: [
{
title: 'All Day Event',
start: '2021-04-01'
},
{
title: 'Long Event',
start: '2021-04-07',
end: '2021-04-10'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2021-04-09T16:00:00'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2021-04-16T16:00:00'
},
{
title: 'Conference',
start: '2021-04-16T19:00:00',
end: '2021-04-20'
},
{
title: 'Meeting',
start: '2021-04-12T10:30:00',
end: '2021-04-12T12:30:00'
},
{
title: 'Lunch',
start: '2021-04-12T12:00:00'
},
{
title: 'Meeting',
start: '2021-04-12T14:30:00'
},
{
title: 'Birthday Party',
start: '2021-04-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2021-04-28'
}
]
});
calendar.updateSize();
calendar.render();
});
layout2
doctype html
html(lang='en')
head
title= title
meta(charset='utf-8')
meta(name='viewport', content='width=device-width, initial-scale=1')
script(src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.3.0/main.min.js")
link(rel="stylesheet", href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css", integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z", crossorigin="anonymous")
script(src="https://code.jquery.com/jquery-3.5.1.slim.min.js", integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj", crossorigin="anonymous")
script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js", integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV", crossorigin="anonymous")
link(rel='stylesheet', href='/stylesheets/centeredforms.css')
body
div(class='container-fluid')
div(class='row')
div(class='col-sm-2')
block sidebar
ul(class='sidebar-nav')
li
a(href='/catalog') Home
li
a(href='/catalog/resources') All Resources
li
a(href='/catalog/books/create') Make a booking
li
a(href='/catalog/bookings') My Bookings
if(role=="admin")
block sidebar
ul(class='sidebar-nav')
li
hr
li
a(href='/catalog/resources/create') Create new Resource
li
a(href='/catalog/users') Get all users
li
div(class='col-sm-10')
block content
CSS style
.sidebar-nav {
margin-top: 20px;
padding: 0;
list-style: none;
}
#calendar {
margin: 40px auto;
}
tr{
height: auto;
}
li{
list-style-type: none;
}
table {
background-color: white;
width: 100%;
}
tr:nth-child(even) {
background-color: #d7d7d7;
}
tr:hover{
color: #6bbaef;
}
form{
text-align:center ;
}
button{
align-self: center;
}
img{
width: 250px;
height: 250px;
}
So the problem was in layout2 file at link(rel='stylesheet', href='/stylesheets/centeredforms.css'), this is my customized stylesheet so, my calendar used this instead of this link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar#5.6.0/main.min.css")
In conclusion replace the cdn stylesheet and you will have a nice functional calendar. Also if you include bootstrap styles then it will be nicer

Adjust position of a line chart series label using echarts

i have a angular web application with a line graph (using echarts) with multiple series.
the labels of the series are overlapping, is there a way to adjust their position or size etc to prevent them from over lapping ?
my code:
thisInstance._paidUnpaidSplitGraphOptions = {
title: {
text: 'Paid/Unpaid Claims'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['Unpaid Claims', 'Paid Claims']
},
grid: {
left: '5%',
right: '6%',
bottom: '5%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {
title: "Download Image of Chart"
},
dataZoom: {
yAxisIndex: false,
title: { "zoom": "Zoom Chart", "back": "Remove Zoom" }
},
brush: {
type: ['lineX', 'clear'],
title: {
"lineX": "LineX", "clear": "Clear" }
}
}
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: xAxisData
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Paid Claims',
type: 'line',
stack: 'WWWWWWWW',
label: {
position: 'TopLeft',
normal: {
show: true,
formatter: function (data) {
return thisInstance.GetFormattedValue(data);
},
color: '#151515'
}
},
areaStyle: { normal: {} },
data: paidAmounts
},
{
name: 'Unpaid Claims',
type: 'line',
stack: 'WWWWWWWW',
label: {
normal: {
show: true,
formatter: function (data) {
return thisInstance.GetFormattedValue(data);
},
position: 'BottomRight',
color: '#151515'
}
},
areaStyle: { normal: {} },
data: unPaidAmounts
}
]
}
html code:
<div class="clr-row">
<div class="clr-col-2">
</div>
<div class="clr-col-8">
<div echarts [options]="this._appService.GraphsService._paidUnpaidSplitGraphOptions" class="demo-chart"></div>
</div>
<div class="clr-col-2">
<button class="btn btn-outline btn-sm" (click)="this._appService.ClaimCaptureService.GetHpCodesLagReport()"><clr-icon shape="download"></clr-icon>LAG REPORT</button><br />
<button class="btn btn-success-outline btn-sm" (click)="this._appService.ClaimCaptureService.GetHpCodesAgeReport()"><clr-icon shape="download"></clr-icon>AGE ANALYSIS REPORT</button>
</div>
</div>
What i have tried so far is to change the position of the labels as you can see in the above code t making the one 'TopLeft' and the other 'BottomRight', but this didn't seem to help at all the labels are still overlapping.
below is a screenshot of what it looks like
To move text slightly you can use offset: [0,-15], reference.
However you might want to use the label formatter to mask the labels that are under a certain value.
Example
var data = [
[820, 932, 901, 934, 1290, 330, 320],
[0, 0, 0, 0, 0, 900, 1320]
];
var option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {},
itemStyle: {
},
series: [{
data: data[0],
type: "line",
stack: "stack",
color: 'blue',
areaStyle: {
color: 'blue',
opacity: 0.3
},
label: {
position: "top",
offset: [0, -15],
show: true,
}
},
{
data: data[1],
type: "line",
stack: "stack",
areaStyle: {
color: 'red',
opacity: 0.3
},
label: {
position: "top",
show: true,
formatter: function (params) {
return (params.value === 0) ? "" : params.value;
}
}
}
]
}
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
if (option && typeof option === "object")
myChart.setOption(option, true);
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 90%"></div>
</body>
</html>
Stacked line graph with masked labels
You should try avoidLabelOverlap = true

How to increase size of this font in Chart.js?

I need some help.I'm trying to increase font-size for this badges, and I have no idea how to do that. Maybe can you help me? I have tried before fontSize but doesn't affect the style.
Badges:
Here is my code:
<script>
new Chart(document.getElementById("doughnut-chart"), {
type: 'doughnut',
data: {
labels: {!!$labels->toJson()!!},
innerHeight: "50%",
datasets: [
{
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: {!!$values->toJson()!!},
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
left: 35,
right: 0,
top: 0,
bottom: 0
}
},
legend: {
display: true,
position: 'right',
labels: {
fontColor: "#000080",
boxWidth: 25,
fontSize: 25,
}
},
</script>

Collapsed list overflowing

I am working on a school project and I just ran into a problem with a which is collapsed into an input box (I will apply filter list later on) but when this list shows it overflows out of my landing screen and just looks bad. Does anyone have any suggestions to work this out I´m trying to imitate this page (notice how you can click on the input box and the list won't show until the user types something) I did my best to imitate it in my code?
This is an image of my HTML.
$(document).ready(function() {
var header = $('#landing_home');
var backgrounds = new Array(
'url(Recursos/imagenes_bg/bridge.jpeg)', 'url(Recursos/imagenes_bg/lake.jpeg)', 'url(Recursos/imagenes_bg/mountain.jpg)', 'url(Recursos/imagenes_bg/river.jpeg)', 'url(Recursos/imagenes_bg/villa.jpeg)'
);
var current = 0;
//Fuente para animar el fondo: https://stackoverflow.com/questions/53547736/animate-changing-backgrounds , yo hice la pregunta por eso esta mi codigo ahi.
function nextBackground() {
header.animate({
opacity: 0.5
}, 0);
current++;
current = current % backgrounds.length;
//header.fadeTo("slow", 0.5)
header.css('background-image', backgrounds[current]).animate({
opacity: 1
}, 'slow');
//header.fadeTo("slow", 1)
}
setInterval(nextBackground, 7000);
header.css('background-image', backgrounds[0]).animate({
opacity: 1
}, 'slow');
});
body,
html {
height: 100%;
}
.logo {
width: 75%;
height: 75%;
opacity: 1;
}
.home {
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.9;
}
.text_home {
color: white;
font-size: 400%;
font-weight: 500;
text-align: center;
text-shadow: 1px 1px 10px #000000;
}
.form_home {
text-align: center;
}
.form_home input[type=text] {
width: 75%;
box-shadow: 1px 1px 10px #000000;
padding: 8px;
text-align: justify;
font-size: 200%;
}
.form_list {
font-size: 150%;
}
.list-group {
display: block;
margin: 0 auto;
}
.home_jumbo {
background-color: #B1B1B1;
}
<!DOCTYPE html>
<html>
<head>
<title>Trip Guru</title>
<meta charset="utf-8" />
<link href="main.css" rel="stylesheet" />
<link href="Content/bootstrap-grid.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="home" id="landing_home">
<nav class="navbar bg-transparent sticky-top">
<a class="navbar-brand" href="index.html"><img src="Recursos/Logo/logo_white.png" class="logo" /></a>
</nav>
<h1 class="text_home"> Decubre tu siguiente destino </h1>
<div class="form_home">
<input type="text" class="form_home" placeholder="Buscar" data-toggle="collapse" data-target="#paises" />
</div>
<ul class="list-group collapse text-center w-75 form_list" id="paises">
<li class="list-group-item">Rusia</li>
<li class="list-group-item">Corea del Sur</li>
<li class="list-group-item">Japón</li>
<li class="list-group-item">Costa Rica</li>
<li class="list-group-item">Dubai</li>
<li class="list-group-item">Suecia</li>
<li class="list-group-item">Alemania</li>
<li class="list-group-item">Francia</li>
<li class="list-group-item">Brasil</li>
<li class="list-group-item">China</li>
</ul>
</div>
<div class="jumbotron-fluid home_jumbo">
<h1 class="display-1">It overflows here</h1>
</div>
<script src="main_script.js"></script>
<script src="scripts/jquery-3.3.1.min.js"></script>
<script src="scripts/bootstrap.js"></script>
<!--Bootstrap JS-->
</body>
</html>
If I understand correct you just need to insert this part, on the open part:
max-height: 500px;
overflow-y: auto;
this will create a limitation in the size and makes the overflow only in the vertical
I just solved it using this. It hiddes when it overflows vertically and lets you scroll.
.list-group {
cursor:pointer;
height:30%;
display: block;
margin: 0 auto;
overflow-x: hidden;
overflow-y: scroll;
}
If you need autocomplete
const input = $('#autocomplete');
const dropdown = $('#dropdown');
const countries = [{
name: 'Afghanistan',
code: 'AF'
},
{
name: 'Åland Islands',
code: 'AX'
},
{
name: 'Albania',
code: 'AL'
},
{
name: 'Algeria',
code: 'DZ'
},
{
name: 'American Samoa',
code: 'AS'
},
{
name: 'AndorrA',
code: 'AD'
},
{
name: 'Angola',
code: 'AO'
},
{
name: 'Anguilla',
code: 'AI'
},
{
name: 'Antarctica',
code: 'AQ'
},
{
name: 'Antigua and Barbuda',
code: 'AG'
},
{
name: 'Argentina',
code: 'AR'
},
{
name: 'Armenia',
code: 'AM'
},
{
name: 'Aruba',
code: 'AW'
},
{
name: 'Australia',
code: 'AU'
},
{
name: 'Austria',
code: 'AT'
},
{
name: 'Azerbaijan',
code: 'AZ'
},
{
name: 'Bahamas',
code: 'BS'
},
{
name: 'Bahrain',
code: 'BH'
},
{
name: 'Bangladesh',
code: 'BD'
},
{
name: 'Barbados',
code: 'BB'
},
{
name: 'Belarus',
code: 'BY'
},
{
name: 'Belgium',
code: 'BE'
},
{
name: 'Belize',
code: 'BZ'
},
{
name: 'Benin',
code: 'BJ'
},
{
name: 'Bermuda',
code: 'BM'
},
{
name: 'Bhutan',
code: 'BT'
},
{
name: 'Bolivia',
code: 'BO'
},
{
name: 'Bosnia and Herzegovina',
code: 'BA'
},
{
name: 'Botswana',
code: 'BW'
},
{
name: 'Bouvet Island',
code: 'BV'
},
{
name: 'Brazil',
code: 'BR'
},
{
name: 'British Indian Ocean Territory',
code: 'IO'
},
{
name: 'Brunei Darussalam',
code: 'BN'
},
{
name: 'Bulgaria',
code: 'BG'
},
{
name: 'Burkina Faso',
code: 'BF'
},
{
name: 'Burundi',
code: 'BI'
},
{
name: 'Cambodia',
code: 'KH'
},
{
name: 'Cameroon',
code: 'CM'
},
{
name: 'Canada',
code: 'CA'
},
{
name: 'Cape Verde',
code: 'CV'
},
{
name: 'Cayman Islands',
code: 'KY'
},
{
name: 'Central African Republic',
code: 'CF'
},
{
name: 'Chad',
code: 'TD'
},
{
name: 'Chile',
code: 'CL'
},
{
name: 'China',
code: 'CN'
},
{
name: 'Christmas Island',
code: 'CX'
},
{
name: 'Cocos (Keeling) Islands',
code: 'CC'
},
{
name: 'Colombia',
code: 'CO'
},
{
name: 'Comoros',
code: 'KM'
},
{
name: 'Congo',
code: 'CG'
},
{
name: 'Congo, The Democratic Republic of the',
code: 'CD'
},
{
name: 'Cook Islands',
code: 'CK'
},
{
name: 'Costa Rica',
code: 'CR'
},
{
name: 'Cote D\'Ivoire',
code: 'CI'
},
{
name: 'Croatia',
code: 'HR'
},
{
name: 'Cuba',
code: 'CU'
},
{
name: 'Cyprus',
code: 'CY'
},
{
name: 'Czech Republic',
code: 'CZ'
},
{
name: 'Denmark',
code: 'DK'
},
{
name: 'Djibouti',
code: 'DJ'
},
{
name: 'Dominica',
code: 'DM'
},
{
name: 'Dominican Republic',
code: 'DO'
},
{
name: 'Ecuador',
code: 'EC'
},
{
name: 'Egypt',
code: 'EG'
},
{
name: 'El Salvador',
code: 'SV'
},
{
name: 'Equatorial Guinea',
code: 'GQ'
},
{
name: 'Eritrea',
code: 'ER'
},
{
name: 'Estonia',
code: 'EE'
},
{
name: 'Ethiopia',
code: 'ET'
},
{
name: 'Falkland Islands (Malvinas)',
code: 'FK'
},
{
name: 'Faroe Islands',
code: 'FO'
},
{
name: 'Fiji',
code: 'FJ'
},
{
name: 'Finland',
code: 'FI'
},
{
name: 'France',
code: 'FR'
},
{
name: 'French Guiana',
code: 'GF'
},
{
name: 'French Polynesia',
code: 'PF'
},
{
name: 'French Southern Territories',
code: 'TF'
},
{
name: 'Gabon',
code: 'GA'
},
{
name: 'Gambia',
code: 'GM'
},
{
name: 'Georgia',
code: 'GE'
},
{
name: 'Germany',
code: 'DE'
},
{
name: 'Ghana',
code: 'GH'
},
{
name: 'Gibraltar',
code: 'GI'
},
{
name: 'Greece',
code: 'GR'
},
{
name: 'Greenland',
code: 'GL'
},
{
name: 'Grenada',
code: 'GD'
},
{
name: 'Guadeloupe',
code: 'GP'
},
{
name: 'Guam',
code: 'GU'
},
{
name: 'Guatemala',
code: 'GT'
},
{
name: 'Guernsey',
code: 'GG'
},
{
name: 'Guinea',
code: 'GN'
},
{
name: 'Guinea-Bissau',
code: 'GW'
},
{
name: 'Guyana',
code: 'GY'
},
{
name: 'Haiti',
code: 'HT'
},
{
name: 'Heard Island and Mcdonald Islands',
code: 'HM'
},
{
name: 'Holy See (Vatican City State)',
code: 'VA'
},
{
name: 'Honduras',
code: 'HN'
},
{
name: 'Hong Kong',
code: 'HK'
},
{
name: 'Hungary',
code: 'HU'
},
{
name: 'Iceland',
code: 'IS'
},
{
name: 'India',
code: 'IN'
},
{
name: 'Indonesia',
code: 'ID'
},
{
name: 'Iran, Islamic Republic Of',
code: 'IR'
},
{
name: 'Iraq',
code: 'IQ'
},
{
name: 'Ireland',
code: 'IE'
},
{
name: 'Isle of Man',
code: 'IM'
},
{
name: 'Israel',
code: 'IL'
},
{
name: 'Italy',
code: 'IT'
},
{
name: 'Jamaica',
code: 'JM'
},
{
name: 'Japan',
code: 'JP'
},
{
name: 'Jersey',
code: 'JE'
},
{
name: 'Jordan',
code: 'JO'
},
{
name: 'Kazakhstan',
code: 'KZ'
},
{
name: 'Kenya',
code: 'KE'
},
{
name: 'Kiribati',
code: 'KI'
},
{
name: 'Korea, Democratic People\'S Republic of',
code: 'KP'
},
{
name: 'Korea, Republic of',
code: 'KR'
},
{
name: 'Kuwait',
code: 'KW'
},
{
name: 'Kyrgyzstan',
code: 'KG'
},
{
name: 'Lao People\'S Democratic Republic',
code: 'LA'
},
{
name: 'Latvia',
code: 'LV'
},
{
name: 'Lebanon',
code: 'LB'
},
{
name: 'Lesotho',
code: 'LS'
},
{
name: 'Liberia',
code: 'LR'
},
{
name: 'Libyan Arab Jamahiriya',
code: 'LY'
},
{
name: 'Liechtenstein',
code: 'LI'
},
{
name: 'Lithuania',
code: 'LT'
},
{
name: 'Luxembourg',
code: 'LU'
},
{
name: 'Macao',
code: 'MO'
},
{
name: 'Macedonia, The Former Yugoslav Republic of',
code: 'MK'
},
{
name: 'Madagascar',
code: 'MG'
},
{
name: 'Malawi',
code: 'MW'
},
{
name: 'Malaysia',
code: 'MY'
},
{
name: 'Maldives',
code: 'MV'
},
{
name: 'Mali',
code: 'ML'
},
{
name: 'Malta',
code: 'MT'
},
{
name: 'Marshall Islands',
code: 'MH'
},
{
name: 'Martinique',
code: 'MQ'
},
{
name: 'Mauritania',
code: 'MR'
},
{
name: 'Mauritius',
code: 'MU'
},
{
name: 'Mayotte',
code: 'YT'
},
{
name: 'Mexico',
code: 'MX'
},
{
name: 'Micronesia, Federated States of',
code: 'FM'
},
{
name: 'Moldova, Republic of',
code: 'MD'
},
{
name: 'Monaco',
code: 'MC'
},
{
name: 'Mongolia',
code: 'MN'
},
{
name: 'Montserrat',
code: 'MS'
},
{
name: 'Morocco',
code: 'MA'
},
{
name: 'Mozambique',
code: 'MZ'
},
{
name: 'Myanmar',
code: 'MM'
},
{
name: 'Namibia',
code: 'NA'
},
{
name: 'Nauru',
code: 'NR'
},
{
name: 'Nepal',
code: 'NP'
},
{
name: 'Netherlands',
code: 'NL'
},
{
name: 'Netherlands Antilles',
code: 'AN'
},
{
name: 'New Caledonia',
code: 'NC'
},
{
name: 'New Zealand',
code: 'NZ'
},
{
name: 'Nicaragua',
code: 'NI'
},
{
name: 'Niger',
code: 'NE'
},
{
name: 'Nigeria',
code: 'NG'
},
{
name: 'Niue',
code: 'NU'
},
{
name: 'Norfolk Island',
code: 'NF'
},
{
name: 'Northern Mariana Islands',
code: 'MP'
},
{
name: 'Norway',
code: 'NO'
},
{
name: 'Oman',
code: 'OM'
},
{
name: 'Pakistan',
code: 'PK'
},
{
name: 'Palau',
code: 'PW'
},
{
name: 'Palestinian Territory, Occupied',
code: 'PS'
},
{
name: 'Panama',
code: 'PA'
},
{
name: 'Papua New Guinea',
code: 'PG'
},
{
name: 'Paraguay',
code: 'PY'
},
{
name: 'Peru',
code: 'PE'
},
{
name: 'Philippines',
code: 'PH'
},
{
name: 'Pitcairn',
code: 'PN'
},
{
name: 'Poland',
code: 'PL'
},
{
name: 'Portugal',
code: 'PT'
},
{
name: 'Puerto Rico',
code: 'PR'
},
{
name: 'Qatar',
code: 'QA'
},
{
name: 'Reunion',
code: 'RE'
},
{
name: 'Romania',
code: 'RO'
},
{
name: 'Russian Federation',
code: 'RU'
},
{
name: 'RWANDA',
code: 'RW'
},
{
name: 'Saint Helena',
code: 'SH'
},
{
name: 'Saint Kitts and Nevis',
code: 'KN'
},
{
name: 'Saint Lucia',
code: 'LC'
},
{
name: 'Saint Pierre and Miquelon',
code: 'PM'
},
{
name: 'Saint Vincent and the Grenadines',
code: 'VC'
},
{
name: 'Samoa',
code: 'WS'
},
{
name: 'San Marino',
code: 'SM'
},
{
name: 'Sao Tome and Principe',
code: 'ST'
},
{
name: 'Saudi Arabia',
code: 'SA'
},
{
name: 'Senegal',
code: 'SN'
},
{
name: 'Serbia and Montenegro',
code: 'CS'
},
{
name: 'Seychelles',
code: 'SC'
},
{
name: 'Sierra Leone',
code: 'SL'
},
{
name: 'Singapore',
code: 'SG'
},
{
name: 'Slovakia',
code: 'SK'
},
{
name: 'Slovenia',
code: 'SI'
},
{
name: 'Solomon Islands',
code: 'SB'
},
{
name: 'Somalia',
code: 'SO'
},
{
name: 'South Africa',
code: 'ZA'
},
{
name: 'South Georgia and the South Sandwich Islands',
code: 'GS'
},
{
name: 'Spain',
code: 'ES'
},
{
name: 'Sri Lanka',
code: 'LK'
},
{
name: 'Sudan',
code: 'SD'
},
{
name: 'Suriname',
code: 'SR'
},
{
name: 'Svalbard and Jan Mayen',
code: 'SJ'
},
{
name: 'Swaziland',
code: 'SZ'
},
{
name: 'Sweden',
code: 'SE'
},
{
name: 'Switzerland',
code: 'CH'
},
{
name: 'Syrian Arab Republic',
code: 'SY'
},
{
name: 'Taiwan, Province of China',
code: 'TW'
},
{
name: 'Tajikistan',
code: 'TJ'
},
{
name: 'Tanzania, United Republic of',
code: 'TZ'
},
{
name: 'Thailand',
code: 'TH'
},
{
name: 'Timor-Leste',
code: 'TL'
},
{
name: 'Togo',
code: 'TG'
},
{
name: 'Tokelau',
code: 'TK'
},
{
name: 'Tonga',
code: 'TO'
},
{
name: 'Trinidad and Tobago',
code: 'TT'
},
{
name: 'Tunisia',
code: 'TN'
},
{
name: 'Turkey',
code: 'TR'
},
{
name: 'Turkmenistan',
code: 'TM'
},
{
name: 'Turks and Caicos Islands',
code: 'TC'
},
{
name: 'Tuvalu',
code: 'TV'
},
{
name: 'Uganda',
code: 'UG'
},
{
name: 'Ukraine',
code: 'UA'
},
{
name: 'United Arab Emirates',
code: 'AE'
},
{
name: 'United Kingdom',
code: 'GB'
},
{
name: 'United States',
code: 'US'
},
{
name: 'United States Minor Outlying Islands',
code: 'UM'
},
{
name: 'Uruguay',
code: 'UY'
},
{
name: 'Uzbekistan',
code: 'UZ'
},
{
name: 'Vanuatu',
code: 'VU'
},
{
name: 'Venezuela',
code: 'VE'
},
{
name: 'Viet Nam',
code: 'VN'
},
{
name: 'Virgin Islands, British',
code: 'VG'
},
{
name: 'Virgin Islands, U.S.',
code: 'VI'
},
{
name: 'Wallis and Futuna',
code: 'WF'
},
{
name: 'Western Sahara',
code: 'EH'
},
{
name: 'Yemen',
code: 'YE'
},
{
name: 'Zambia',
code: 'ZM'
},
{
name: 'Zimbabwe',
code: 'ZW'
}
];
input.on('input', () => {
dropdown.html('');
countries.map((country) => {
if (country.name.toLowerCase().includes(input.val().toLowerCase())) {
dropdown.append(`
<div class="list-group-item">
${country.name}
</div>
`);
}
});
$('.list-group-item').on('click', (e) => {
input.val(e.target.innerText);
dropdown.html('');
});
});
.dropdown-wrapper {
max-height: 300px;
overflow: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<input id="autocomplete" class="form-control">
<div class="dropdown-wrapper">
<div id="dropdown" class="list-group">
</div>

how to call ajax function to update the Highcharts graph dynamically?

I am using Highcharts to plot the graph of temperature vs time. I am having a JSON file wherein data from the backend keep updates the JSON file. I want to call ajax function such that the graphs automatically generates with respect to time. How to do that? I am new to high charts, please help me.
You can use Series.addPoint method.
http://api.highcharts.com/highcharts/Series.addPoint
Here is a example of using Highcharts with live data with GET HTTP requests.
const options = {
chart: {
type: 'spline'
},
title: {
text: 'Live Bitcoin Price'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Price (USD)'
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Live Bitcoint Price [USD]',
data: []
}]
}
const chart = Highcharts.chart('container', options)
// Data
const getData = () => {
setInterval(() => {
window.fetch('https://api.cryptonator.com/api/ticker/btc-usd').then((response) => {
return response.json()
}).then((data) => {
chart.series[0].addPoint({ x: data.timestamp * 1000, y: Number(data.ticker.price) })
})
}, 3000)
}
getData()
#import 'https://code.highcharts.com/css/highcharts.css';
.highcharts-background {
fill: #222;
}
.highcharts-title,
.highcharts-axis-title {
fill: #DDD;
}
.highcharts-credits,
.highcharts-credits:hover {
fill: #222;
}
body {
background-color: #222;
margin 0 !important;
}
#container {
margin: 0;
padding: 0;
border: 0;
background-color: #222;
min-height: 400px;
height:95%;
width:95%;
position:absolute;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Live example:
https://jsfiddle.net/xpfkx91w/