You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
437 lines
15 KiB
437 lines
15 KiB
5 years ago
|
var servicesURL = {
|
||
|
|
getAllCasesGroupByContinent : 'https://83.212.77.22:9443/services/get_all_cases_group_by_continent.php',
|
||
|
|
getContinents: 'https://83.212.77.22:9443/services/get_continents.php',
|
||
|
|
getGroupByChooseContinent: 'https://83.212.77.22:9443/services/get_group_by_choose_continent_data.php',
|
||
|
|
getCountries: 'https://83.212.77.22:9443/services/get_countries.php',
|
||
|
|
getCountryDataInSpecificDates: 'https://83.212.77.22:9443/services/get_country_data_specific_dates.php',
|
||
|
|
getLastDate: 'https://83.212.77.22:9443/services/get_last_date.php',
|
||
|
|
getContinentsDataInSpecificDates: 'https://83.212.77.22:9443/services/get_continent_data_specific_dates.php',
|
||
|
|
getTotalCasesAndDeaths: 'https://83.212.77.22:9443/services/get_total_cases_deaths.php'
|
||
|
|
}
|
||
|
|
|
||
|
|
var WebCall = {
|
||
|
|
charts: [],
|
||
|
|
renderCasesGroupByContinent: function(elementID){
|
||
|
|
$.get(servicesURL.getAllCasesGroupByContinent).done(function(data){
|
||
|
|
let options={
|
||
|
|
series: [],
|
||
|
|
chart: {
|
||
|
|
width: 600,
|
||
|
|
type: 'pie'
|
||
|
|
},
|
||
|
|
labels: [],
|
||
|
|
responsive: [{
|
||
|
|
breakpoint: 800,
|
||
|
|
options: {
|
||
|
|
chart: {
|
||
|
|
width: 300
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
position: 'bottom'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
|
||
|
|
data.forEach(function(element){
|
||
|
|
options.series.push(parseInt(element.Cases,10));
|
||
|
|
options.labels.push(element.continentExp);
|
||
|
|
});
|
||
|
|
|
||
|
|
WebCall.renderChart(elementID, options);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
initalizeContinentsSelector: function(selectorID){
|
||
|
|
$.get(servicesURL.getContinents).done(function (data) {
|
||
|
|
let selector = $(selectorID);
|
||
|
|
selector.append($("<option>").attr("value", "none").attr("selected", "selected").text("Choose One"));
|
||
|
|
data.forEach(function (element) {
|
||
|
|
selector.append($("<option>").attr("value", element.continentExp).text(element.continentExp));
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
renderAllCountryCasesDeathsByContinent: function (elementCasesID, elementDeathsID, continentValue, event) {
|
||
|
|
$.post(servicesURL.getGroupByChooseContinent, { continent: continentValue, order: 1}).done(function (data) {
|
||
|
|
let casesOptions = {
|
||
|
|
series: [{
|
||
|
|
data: []
|
||
|
|
}],
|
||
|
|
chart: {
|
||
|
|
type: 'bar',
|
||
|
|
// height: height,
|
||
|
|
width: "100%"
|
||
|
|
},
|
||
|
|
plotOptions: {
|
||
|
|
bar: {
|
||
|
|
horizontal: true,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
dataLabels: {
|
||
|
|
// enabled: false
|
||
|
|
enabled: true
|
||
|
|
},
|
||
|
|
xaxis: {
|
||
|
|
categories: [],
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
theme: 'dark',
|
||
|
|
x: {
|
||
|
|
show: true
|
||
|
|
},
|
||
|
|
y: {
|
||
|
|
title: {
|
||
|
|
formatter: function () {
|
||
|
|
return 'Cases'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
casesOptions.chart.height = data.length * 40;
|
||
|
|
data.forEach(function (element) {
|
||
|
|
casesOptions.series[0].data.push(parseInt(element.Cases, 10));
|
||
|
|
casesOptions.xaxis.categories.push(element.countriesAndTerritories);
|
||
|
|
});
|
||
|
|
WebCall.renderChart(elementCasesID, casesOptions);
|
||
|
|
});
|
||
|
|
|
||
|
|
$.post(servicesURL.getGroupByChooseContinent, { continent: continentValue, order: 2 }).done(function (data) {
|
||
|
|
let deathsOptions = {
|
||
|
|
series: [{
|
||
|
|
data: []
|
||
|
|
}],
|
||
|
|
chart: {
|
||
|
|
type: 'bar',
|
||
|
|
width: "100%"
|
||
|
|
},
|
||
|
|
plotOptions: {
|
||
|
|
bar: {
|
||
|
|
horizontal: true,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
dataLabels: {
|
||
|
|
enabled: true
|
||
|
|
},
|
||
|
|
xaxis: {
|
||
|
|
categories: [],
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
theme: 'dark',
|
||
|
|
x: {
|
||
|
|
show: true
|
||
|
|
},
|
||
|
|
y: {
|
||
|
|
title: {
|
||
|
|
formatter: function () {
|
||
|
|
return 'Deaths'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
deathsOptions.chart.height = data.length * 40;
|
||
|
|
data.forEach(function (element) {
|
||
|
|
deathsOptions.series[0].data.push(parseInt(element.Deaths, 10));
|
||
|
|
deathsOptions.xaxis.categories.push(element.countriesAndTerritories);
|
||
|
|
});
|
||
|
|
WebCall.renderChart(elementDeathsID, deathsOptions);
|
||
|
|
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
renderChart: function(elementID, options){
|
||
|
|
let chart = WebCall.findChart(elementID);
|
||
|
|
if (chart){
|
||
|
|
const index = WebCall.charts.indexOf(chart);
|
||
|
|
chart.chartObj.destroy();
|
||
|
|
if (index > -1) {
|
||
|
|
WebCall.charts.splice(index, 1);
|
||
|
|
console.log('Remove Chart');
|
||
|
|
console.log('Length = ' + WebCall.charts.length);
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
console.log('Not found Chart');
|
||
|
|
console.log('Length = ' + WebCall.charts.length);
|
||
|
|
}
|
||
|
|
try{
|
||
|
|
chart = new ApexCharts(document.querySelector(elementID), options);
|
||
|
|
chart.render();
|
||
|
|
WebCall.charts.push(new Chart(chart, elementID));
|
||
|
|
}
|
||
|
|
catch(error){
|
||
|
|
console.log(error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
try{
|
||
|
|
chart = new ApexCharts(document.querySelector(elementID), options);
|
||
|
|
chart.render();
|
||
|
|
WebCall.charts.push(new Chart(chart, elementID));
|
||
|
|
}
|
||
|
|
catch (error) {
|
||
|
|
console.log(error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
updateChart:function(elementID, options){
|
||
|
|
|
||
|
|
},
|
||
|
|
findChart(chartID){
|
||
|
|
return WebCall.charts.find(function(chart, index){
|
||
|
|
return chart.chartID === chartID;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
initalizeCountriesSelector: function (selectorID) {
|
||
|
|
$.get(servicesURL.getCountries).done(function (data) {
|
||
|
|
let selector = $(selectorID);
|
||
|
|
selector.append($("<option>").attr("value", "none").attr("selected", "selected").text("Choose One"));
|
||
|
|
data.forEach(function (element) {
|
||
|
|
selector.append($("<option>").attr("value", element.countriesAndTerritories).text(element.countriesAndTerritories));
|
||
|
|
});
|
||
|
|
|
||
|
|
$(selectorID).select2();
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
return $(selectorID);
|
||
|
|
},
|
||
|
|
renderCasesByCountryAndDate: function (elementID, countryVar, dates) {
|
||
|
|
if (countryVar === "" || countryVar === 'undefined' || countryVar === null || countryVar === 'none'
|
||
|
|
|| dates === "" || dates === 'undefined' || dates === null)
|
||
|
|
{
|
||
|
|
console.log('No data provided...');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let dateArray = dates.split('-');
|
||
|
|
if(dateArray.length < 2){
|
||
|
|
console.log('No data provided...');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let trimedArray = getTrimedStringArray(dateArray);
|
||
|
|
|
||
|
|
// console.log(countryVar);
|
||
|
|
// console.log(trimedArray[0]);
|
||
|
|
// console.log(trimedArray[1]);
|
||
|
|
$.post(servicesURL.getCountryDataInSpecificDates, { from_date: trimedArray[0], until_date: trimedArray[1], country: countryVar}).done(function (data) {
|
||
|
|
// console.log(data);
|
||
|
|
// let dates=[];
|
||
|
|
// for(i=0; i<10; i++){
|
||
|
|
// dates.push('2018-02-12');
|
||
|
|
// }
|
||
|
|
var options = {
|
||
|
|
chart: {
|
||
|
|
type: "area",
|
||
|
|
height: 600,
|
||
|
|
width: "100%",
|
||
|
|
foreColor: "#999",
|
||
|
|
stacked: true,
|
||
|
|
dropShadow: {
|
||
|
|
enabled: true,
|
||
|
|
enabledSeries: [0],
|
||
|
|
top: -2,
|
||
|
|
left: 2,
|
||
|
|
blur: 5,
|
||
|
|
opacity: 0.06
|
||
|
|
}
|
||
|
|
},
|
||
|
|
colors: ['#00E396', '#0090FF'],
|
||
|
|
stroke: {
|
||
|
|
curve: "smooth",
|
||
|
|
width: 3
|
||
|
|
},
|
||
|
|
dataLabels: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: 'Total Deaths',
|
||
|
|
data: []
|
||
|
|
// data: generateDayWiseTimeSeries(0, 18)
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Total Cases',
|
||
|
|
data: []
|
||
|
|
// data: generateDayWiseTimeSeries(0, 18)
|
||
|
|
}],
|
||
|
|
markers: {
|
||
|
|
size: 0,
|
||
|
|
strokeColor: "#fff",
|
||
|
|
strokeWidth: 3,
|
||
|
|
strokeOpacity: 1,
|
||
|
|
fillOpacity: 1,
|
||
|
|
hover: {
|
||
|
|
size: 6
|
||
|
|
}
|
||
|
|
},
|
||
|
|
xaxis: {
|
||
|
|
type: "datetime",
|
||
|
|
axisBorder: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisTicks: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
labels: {
|
||
|
|
offsetX: 14,
|
||
|
|
offsetY: -5
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
enabled: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
padding: {
|
||
|
|
left: -5,
|
||
|
|
right: 5
|
||
|
|
}
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
x: {
|
||
|
|
format: "dd MMM yyyy"
|
||
|
|
},
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
position: 'top',
|
||
|
|
horizontalAlign: 'left'
|
||
|
|
},
|
||
|
|
fill: {
|
||
|
|
type: "solid",
|
||
|
|
fillOpacity: 0.7
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
data.forEach(function (element) {
|
||
|
|
options.series[0].data.push([new Date(element.dateRep).getTime(), element.deaths]);
|
||
|
|
options.series[1].data.push([new Date(element.dateRep).getTime(), element.cases]);
|
||
|
|
});
|
||
|
|
|
||
|
|
WebCall.renderChart(elementID, options);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
renderLastDate(elementID){
|
||
|
|
$.get(servicesURL.getLastDate).done(function (data) {
|
||
|
|
let element = $(elementID);
|
||
|
|
element.html(data);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
renderCasesByContinentAndDate: function (elementID, continentVar, dates) {
|
||
|
|
if (continentVar === "" || continentVar === 'undefined' || continentVar === null || continentVar === 'none'
|
||
|
|
|| dates === "" || dates === 'undefined' || dates === null) {
|
||
|
|
console.log('No data provided...');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let dateArray = dates.split('-');
|
||
|
|
if (dateArray.length < 2) {
|
||
|
|
console.log('No data provided...');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let trimedArray = getTrimedStringArray(dateArray);
|
||
|
|
|
||
|
|
|
||
|
|
$.post(servicesURL.getContinentsDataInSpecificDates, { from_date: trimedArray[0], until_date: trimedArray[1], continent: continentVar }).done(function (data) {
|
||
|
|
console.log(data);
|
||
|
|
|
||
|
|
var options = {
|
||
|
|
chart: {
|
||
|
|
type: "area",
|
||
|
|
height: 600,
|
||
|
|
width: "100%",
|
||
|
|
foreColor: "#999",
|
||
|
|
stacked: true,
|
||
|
|
dropShadow: {
|
||
|
|
enabled: true,
|
||
|
|
enabledSeries: [0],
|
||
|
|
top: -2,
|
||
|
|
left: 2,
|
||
|
|
blur: 5,
|
||
|
|
opacity: 0.06
|
||
|
|
}
|
||
|
|
},
|
||
|
|
colors: ['#00E396', '#0090FF'],
|
||
|
|
stroke: {
|
||
|
|
curve: "smooth",
|
||
|
|
width: 3
|
||
|
|
},
|
||
|
|
dataLabels: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: 'Total Deaths',
|
||
|
|
data: []
|
||
|
|
// data: generateDayWiseTimeSeries(0, 18)
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Total Cases',
|
||
|
|
data: []
|
||
|
|
// data: generateDayWiseTimeSeries(0, 18)
|
||
|
|
}],
|
||
|
|
markers: {
|
||
|
|
size: 0,
|
||
|
|
strokeColor: "#fff",
|
||
|
|
strokeWidth: 3,
|
||
|
|
strokeOpacity: 1,
|
||
|
|
fillOpacity: 1,
|
||
|
|
hover: {
|
||
|
|
size: 6
|
||
|
|
}
|
||
|
|
},
|
||
|
|
xaxis: {
|
||
|
|
type: "datetime",
|
||
|
|
axisBorder: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisTicks: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
labels: {
|
||
|
|
offsetX: 14,
|
||
|
|
offsetY: -5
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
enabled: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
padding: {
|
||
|
|
left: -5,
|
||
|
|
right: 5
|
||
|
|
}
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
x: {
|
||
|
|
format: "dd MMM yyyy"
|
||
|
|
},
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
position: 'top',
|
||
|
|
horizontalAlign: 'left'
|
||
|
|
},
|
||
|
|
fill: {
|
||
|
|
type: "solid",
|
||
|
|
fillOpacity: 0.7
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
data.forEach(function (element) {
|
||
|
|
options.series[0].data.push([new Date(element.dateRep).getTime(), element.Deaths]);
|
||
|
|
options.series[1].data.push([new Date(element.dateRep).getTime(), element.Cases]);
|
||
|
|
});
|
||
|
|
|
||
|
|
WebCall.renderChart(elementID, options);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
renderTotalCasesAndDeaths(casesID, deathsID) {
|
||
|
|
$.get(servicesURL.getTotalCasesAndDeaths).done(function (data) {
|
||
|
|
let totalCases = $(casesID);
|
||
|
|
totalCases.html(data[0].Cases);
|
||
|
|
|
||
|
|
let totalDeaths = $(deathsID);
|
||
|
|
totalDeaths.html(data[0].Deaths);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|