Skip to content

Instantly share code, notes, and snippets.

@BekNaji

BekNaji/apexchart-tenders.php

Last active March 24, 2021 06:20
Show Gist options
  • Save BekNaji/35eef69906b12b3c497c91ed05473b58 to your computer and use it in GitHub Desktop.
Save BekNaji/35eef69906b12b3c497c91ed05473b58 to your computer and use it in GitHub Desktop.
Download ZIP
Candlestick - apexchart
Raw
apexchart-tenders.php
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Статистика тендеров</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>-->
<script src="apex-chart.js"></script>
<script src="dayjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<style>
th {
background: white;
position: sticky;
top: 0; /* Don't forget this, required for the stickiness */
cursor:pointer;
}
</style>
</head>
<body style="background-color: #cccccc">
<div class="container">
<div class="row">
<div class="col-md-10 offset-md-1">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-6">
<h3>Статистика тендеров </h3>
</div>
<div class="col-md-6">
<select class="form-control" id="filter">
<option value="day">День</option>
<option value="week" selected>Неделя</option>
<option value="month">Месяц</option>
</select>
</div>
</div>
<hr>
<div id="chart"></div>
<div id="sub-chart" ></div>
</div>
</div>
<br>
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<h4>Данные (<span id="total"></span>)</h4>
</div>
</div>
<hr>
<table id="myTable" class="table table-striped table-bordered table-fixed" style="width: auto; overflow-x: scroll">
<thead>
<tr style="text-align: center">
<th>#</th>
<th>Дата</th>
<th>Открытие</th>
<th>Максимальная сумма</th>
<th>Минимальная сумма</th>
<th>Закрытие</th>
<th style="width: 150px">Общая сумма</th>
<th>Объем в тоннах</th>
</tr>
</thead>
<tbody class="fbody">
</tbody>
</table>
</div>
</div>
<br><br>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var seriesData = new Array();
var seriesDataLinear = new Array();
getData = function (filter) {
$.ajax({
url: 'proccess.php',
type: 'post',
data: {filter: filter},
success: function (res) {
var arr = JSON.parse(res);
seriesData = arr['series_data'];
seriesDataLinear = arr['series_data_linear'];
renderChart(seriesData);
renderSubChart(seriesDataLinear);
$('.fbody').html(table(arr));
}
});
}
getData('week'); // default
$('#filter').change(function () {
seriesData = new Array();
seriesDataLinear = new Array();
renderChart(seriesData);
renderSubChart(seriesDataLinear);
getData($(this).val());
});
/* render table */
var table = function (data) {
var html = '';
var count = 1;
for(var i = 0; i < data['series_data'].length; i++)
{
html += '<tr style="text-align: center">';
html += '<td>' + count + '</td>';
if(data['filter'] == 'month') html += '<td>' + dayjs(data['series_data'][i]['x']).format('MMMM YYYY') + '</td>';
else if(data['filter'] == 'week') html += '<td>' + dayjs(data['series_data'][i]['x']).format('MMMM DD YYYY')+'</td>';
else html += '<td>' + dayjs(data['series_data'][i]['x']).format('DD MMMM YYYY') + '</td>';
for(var k = 0; k < data['series_data'][i]['y'].length; k++ )
{
html += '<td>' + formatNumber(data['series_data'][i]['y'][k]) + '</td>';
}
let date = dayjs(data['series_data'][i]['x']).format('DD-MM-YYYY');
html += '<td>' + formatNumber(data['total_price'][date]) + '</td>';
html += '<td>' + data['total_weight'][date]+ '</td>';
html += '<tr>';
count++;
}
$('#total').text(count-1);
return html;
}
/* chart */
var options = {
noData: {
text: 'Загружается ...'
},
series: [{
name: 'test',
data: seriesData,
}],
chart: {
background: '',
type: 'candlestick',
height: 290,
id: 'candles',
zoom: {
enabled: true,
type: 'x',
resetIcon: {
offsetX: -10,
offsetY: 0,
fillColor: '#001A43',
strokeColor: '#001A43'
},
selection: {
background: '#90CAF9',
border: '#0D47A1'
}
}
},
// plotOptions: {
// candlestick: {
// colors: {
// upward: '#181D25',
// downward: '#7C9FD5'
// },
// wick: {
// useFillColor: true,
// },
// bar: {
// horizontal: false
// }
// }
// },
tooltip: {
enabled: true,
autoSelected: 'zoom'
},
xaxis: {
type: 'category',
labels: {
formatter: function(val) {
let filter = $('#filter').val();
if(filter == 'month') return dayjs(val).format('MMM YYYY');
return dayjs(val).format('MMM DD')
},
}
},
yaxis: {
labels: {
formatter: function (value) {
let val = value.toString();
return val.split(".")[0];
}
},
},
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
/* sub chart */
var optionsBar = {
noData: {
text: 'Загружается...'
},
series: [{
name: 'Объем в тоннах',
data: seriesDataLinear
}],
chart: {
id : 'sub-candles',
zoom: {
enabled: true,
type: 'x',
resetIcon: {
offsetX: -10,
offsetY: 0,
fillColor: '#fff',
strokeColor: '#37474F'
},
selection: {
background: '#90CAF9',
border: '#0D47A1'
}
},
height: 160,
type: 'bar',
brush: {
enabled: true,
target: 'candles'
},
selection: {
enabled: true,
xaxis: {
min: new Date(dayjs(globalThis.from).format('YYYY MM DD')).getTime(),
max: new Date(dayjs(globalThis.to).format('YYYY MM DD')).getTime()
},
fill: {
color: '#ccc',
opacity: 0.4
},
stroke: {
color: '#0D47A1',
}
},
},
tooltip: {
enabled: true,
autoSelected: 'zoom'
},
xaxis: {
type: 'category',
labels: {
show: false,
formatter: function(val) {
let filter = $('#filter').val();
if(filter == 'month') return dayjs(val).format('MMMM YYYY');
return dayjs(val).format('MMMM DD');
}
},
},
yaxis: {
labels: {
show: true
}
}
}
var chartBar = new ApexCharts(document.querySelector("#sub-chart"), optionsBar);
chartBar.render();
/* update chart */
renderChart = function(data)
{
ApexCharts.exec('candles','updateOptions',{
series: [{
data: data,
}],
});
}
/* update sub chart */
renderSubChart = function(data)
{
ApexCharts.exec('sub-candles','updateOptions',{
series: [{
data: data,
}],
});
}
});
</script>
<script>
$('th').click(function(){
var table = $(this).parents('table').eq(0)
var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
this.asc = !this.asc
if (!this.asc){rows = rows.reverse()}
for (var i = 0; i < rows.length; i++){ table.append(rows[i]) }
})
function comparer(index) {
console.log(index);
return function(a, b) {
var search = ['Май','Июнь','Июль','Август ','Сентябрь','Октябрь','Ноябрь','Декабрь','Январь','Февраль'];
var replace = ['May','June','July','August','September','October','November','December','January','February'];
valA = getCellValue(a, index), valB = getCellValue(b, index)
if(index != 1) { valA = getCellValue(a, index).replaceAll(' ',''), valB = getCellValue(b, index).replaceAll(' ','') }
else{ valA = replaceCumulative(valA,search,replace), valB = replaceCumulative(valB,search,replace); }
console.log(valA);
return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
}
}
function getCellValue(row, index){ return $(row).children('td').eq(index).text() }
function replaceCumulative(str, find, replace) {
for (var i = 0; i < find.length; i++)
str = str.replace(new RegExp(find[i],"g"), replace[i]);
return Date.parse(str);
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment