Commit fc23c458 by Phạm Văn Đoan

code chức năng hiển thị biểu đồ lịch sử lượt nghe

parent 2dc4bf3a
......@@ -400,6 +400,7 @@ $config['csrf_exclude_uris'] = array(
'backend/cmsRanking/listByDailyAjax',
'backend/cmsRanking/listByWeeklyAjax',
'backend/cmsRanking/listByMonthlyAjax',
'backend/cmsRanking/getTrackHistoryAjax',
'backend/cmsTrack/listTrackAjax',
'backend/cmsArtist/listArtistAjax',
......
......@@ -21,6 +21,7 @@ class CmsRanking extends CI_Controller
$this->load->model('report_views_daily_model');
$this->load->model('report_views_weekly_model');
$this->load->model('report_views_monthly_model');
$this->load->model('crawler_listen_history_model');
}
public function listByDaily()
......@@ -151,18 +152,6 @@ class CmsRanking extends CI_Controller
break;
}
/*if ($type == 'week') {
$week = trim($array_time[0]);
$year = trim($array_time[1]);
$filename = 'Weekly-tuan' . (($week < 10) ? '0'.$time : $time);
$reports = $this->track_model->getReportWeekly($week, $year);
} elseif ($type == 'month') {
$month = trim($array_time[0]);
$year = trim($array_time[1]);
$filename = 'Monthly-' . (($month < 10) ? '0'.$time : $time);
$reports = $this->track_model->getReportMonthly($month, $year);
}*/
$count_views = [];
foreach ($reports as $key => $result) {
$list_user = $this->track_model->getUserByTrack($result['track_id']);
......@@ -303,4 +292,30 @@ class CmsRanking extends CI_Controller
}
}
/**
* Hàm xử lý lấy dữ liệu lịch sử lượt nghe của bài hát dựa vào ID
*/
public function getTrackHistoryAjax()
{
$track_id = $this->input->post('track_id');
$track_title = $this->input->post('track_title');
$histories = $this->crawler_listen_history_model->getByTrackId($track_id);
$data = [];
if ($histories) {
foreach ($histories as $key => $track) {
$data[$key]['date'] = $track['date_log'];
$data[$key]['zing'] = intval($track['zing_count']);
$data[$key]['nct'] = intval($track['nct_count']);
$data[$key]['keeng'] = intval($track['keeng_count']);
}
}
$response['response'] = $data;
$response['track_title'] = $track_title;
$this->load->view('backend/ajax/cms_ranking/history_chart_view', $response);
}
}
\ No newline at end of file
<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
class Crawler_listen_history_model extends CI_Model
{
protected $_table = 'crawler_listen_histories';
public function __construct()
{
parent::__construct();
date_default_timezone_set("Asia/Ho_Chi_Minh");
}
/**
* Lấy lịch sử lượt nghe của bài hát theo ID
*
* @param $track_id
* @return mixed
*/
public function getByTrackId($track_id)
{
$this->db->select($this->_table . '.*');
$this->db->from($this->_table);
$this->db->where($this->_table . '.track_id', $track_id);
$this->db->order_by($this->_table . '.date_log', 'asc');
$query = $this->db->get();
return $query->result_array();
}
}
/* End of file welcome.php */
/* Location: ./application/controllers/welcome.php */
\ No newline at end of file
......@@ -2,6 +2,9 @@
$CI = & get_instance();
$controller = $CI->router->fetch_class();
$action = $CI->router->fetch_method();
?>
<!DOCTYPE html>
<html lang="en">
......@@ -30,11 +33,7 @@ $action = $CI->router->fetch_method();
<link rel="stylesheet" href="<?php echo base_url().'public/assets/css/pagination.css' ?>"/>
<!-- inline styles related to this page -->
<style>
body {
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
</style>
<style> body { font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; } </style>
<!-- ace settings handler -->
<script src="<?php echo base_url().'public/assets/js/ace-extra.min.js' ?>"></script>
......@@ -46,16 +45,22 @@ $action = $CI->router->fetch_method();
<script src="<?php echo base_url().'public/assets/js/chosen.jquery.min.js' ?>"></script>
<script src="<?php echo base_url().'public/fckeditor/ckfinder/ckfinder.js' ?>"></script>
<?php if ($controller == 'cmsRanking' && $action == 'listByDaily'): ?>
<!-- Styles -->
<style> #chartdiv { width: 100%; height: 500px; } </style>
<!-- Resources -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<?php endif; ?>
</head>
<body class="no-skin">
<div id="navbar" class="navbar navbar-default">
<!-- Giu cho menu tai khoan co dinh -->
<script type="text/javascript">
try {
ace.settings.check('navbar', 'fixed')
} catch (e) {
}
try { ace.settings.check('navbar', 'fixed') } catch (e) { }
</script>
<div class="navbar-container" id="navbar-container">
<button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
......
<!-- Chart code -->
<script>
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Increase contrast by taking evey second color
//chart.colors.step = 2;
chart.colors.list = [
am4core.color("#ee2c74"),
am4core.color("#2daaed"),
am4core.color("#f9ab2e")
];
// Add data
//chart.data = generateChartData();
chart.data = <?php echo json_encode($response) ?>;
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 50;
// Create series
function createAxisAndSeries(field, name, opposite, bullet) {
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
if(chart.yAxes.indexOf(valueAxis) != 0){
valueAxis.syncWithAxis = chart.yAxes.getIndex(0);
}
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = field;
series.dataFields.dateX = "date";
series.strokeWidth = 2;
series.yAxis = valueAxis;
series.name = name;
series.tooltipText = "{name}: [bold]{valueY}[/]";
series.tensionX = 0.8;
series.showOnInit = true;
var interfaceColors = new am4core.InterfaceColorSet();
switch(bullet) {
case "triangle":
var bullet = series.bullets.push(new am4charts.Bullet());
bullet.width = 12;
bullet.height = 12;
bullet.horizontalCenter = "middle";
bullet.verticalCenter = "middle";
var triangle = bullet.createChild(am4core.Triangle);
triangle.stroke = interfaceColors.getFor("background");
triangle.strokeWidth = 2;
triangle.direction = "top";
triangle.width = 12;
triangle.height = 12;
break;
case "rectangle":
var bullet = series.bullets.push(new am4charts.Bullet());
bullet.width = 10;
bullet.height = 10;
bullet.horizontalCenter = "middle";
bullet.verticalCenter = "middle";
var rectangle = bullet.createChild(am4core.Rectangle);
rectangle.stroke = interfaceColors.getFor("background");
rectangle.strokeWidth = 2;
rectangle.width = 10;
rectangle.height = 10;
break;
default:
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.stroke = interfaceColors.getFor("background");
bullet.circle.strokeWidth = 2;
break;
}
valueAxis.renderer.line.strokeOpacity = 1;
valueAxis.renderer.line.strokeWidth = 2;
valueAxis.renderer.line.stroke = series.stroke;
valueAxis.renderer.labels.template.fill = series.stroke;
valueAxis.renderer.opposite = opposite;
}
createAxisAndSeries("zing", "Zing", false, "circle");
createAxisAndSeries("nct", "NCT", true, "triangle");
createAxisAndSeries("keeng", "Keeng", true, "rectangle");
// Add legend
chart.legend = new am4charts.Legend();
// Add cursor
chart.cursor = new am4charts.XYCursor();
}); // end am4core.ready()
</script>
<!-- HTML -->
<div id="chartdiv"></div>
\ No newline at end of file
......@@ -6,6 +6,7 @@
<!--<th style="text-align: center">#ID</th>-->
<th style="text-align: center">Ảnh</th>
<th style="text-align: center"><i class="fa fa-music color-red"></i> Tên bài hát</th>
<th style="text-align: center"><i class="fa fa-line-chart color-red"></i> Lịch sử</th>
<th style="text-align: center"><i class="fa fa-microphone color-red"></i> Ca sĩ</th>
<th style="text-align: center"><i class="fa fa-headphones color-red"></i> Zing</th>
<th style="text-align: center"><i class="fa fa-headphones color-red"></i> NCT</th>
......@@ -21,6 +22,11 @@
<!--<td style="text-align: center">#<?php /*echo $data['track_id']; */?></td>-->
<td style="text-align: center"><img src="<?php echo MyHelper::getArtByTrack($data['art']); ?>" style="max-width: 50px; max-height: 50px"></td>
<td style="text-align: left"><?php echo $data['name_song'] . ' (#' . $data['track_id'] . ')'; ?></td>
<td style="text-align: center">
<a href="javascript:void(0)" onclick="showHistory(<?php echo $data['track_id']?>, '<?php echo $data['name_song'] ?>')">
<i class="fa fa-line-chart color-red"></i>
</a>
</td>
<td style="text-align: left"><?php echo $data['all_name']; ?></td>
<td style="text-align: right"><?php echo number_format($data['views_zing'], 0, ',', '.'); ?></td>
<td style="text-align: right"><?php echo number_format($data['views_nct'], 0, ',', '.'); ?></td>
......
......@@ -52,7 +52,27 @@
<div id="div-response"></div>
</div>
</div>
<!-- modal -->
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" id="modal-track-chart">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" style="padding: 10px !important;">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Lịch sử lượt nghe bài: <span id="track_title" style="color: red;"></span>
<img src="">
</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12" id="div-history-chart"></div>
</div>
</div>
<!--<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Đóng</button>
</div>-->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script type="text/javascript">
//Thuc hien viec ve bieu do$data
$(document).ready(function() {
......@@ -130,4 +150,25 @@
$('#btn-export').attr('href', href);
}
function showHistory(track_id, track_title) {
$('#data-loading').show();
$.ajax({
type: "POST",
url: '<?php echo base_url("backend/cmsRanking/getTrackHistoryAjax"); ?>',
data: {
csrf_name: '<?php echo $this->security->get_csrf_hash(); ?>',
track_id: track_id,
track_title: track_title
},
dataType: "HTML",
cache: false,
success: function(data) {
$('#track_title').html(track_title);
$('#div-history-chart').html(data);
$('#modal-track-chart').modal('show');
}
}).done(function () {
$('#data-loading').hide();
});
}
</script>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment