0
MSQLデータを日付範囲+会社名でフィルタリングしたいと思います。 日付範囲のグラフを完全に取得できます。 私の現在の問題は、私も会社名でフィルタリングすることです。 グループで会社を掲載してフィルタを作成することができません 会社名+日付範囲。 誰かが私のコードを見て、私に助けを与えることができました。ありがとう！codeigniter + d3.jsグラフにajaxチェックボックスフィルタリング+日付範囲を追加
私のコントローラ
public function get_chart_data() {
if (isset($_POST['start']) AND isset($_POST['end'])) {
$start_date = $_POST['start'];
$end_date = $_POST['end'];
$company_name = $_POST['company_name'];
$results = $this->chart_model->get_performance($start_date, $end_date, $company_name);
if ($results === NULL) {
echo json_encode('No record found');
} else {
print_r(json_encode($results));
}
} else {
echo json_encode('Date must be selected.');
}
}
私のモデル
function get_performance($start_date, $end_date,$compnay_name) {
$sql = $this->db->select_sum('performance_profit', 'total')
->select_max('performance_date', 'day_date')
->from('performance')
->where('performance_company', $company_name)
->where('performance_date >=', $start_date)
->where('performance_date <=', $end_date)
->group_by('DATE(performance_date)')
->order_by('DATE(performance_date)', 'DESC');
//->limit(1);
$query = $this->db->get($ql);
if ($query->num_rows() > 0) {
$data = array();
foreach ($query->result_array() as $key => $value) {
$data[$key]['label'] = $value['day_date'];
$data[$key]['value'] = $value['total'];
//$data[$key->company_id] = $value['company_id']
}
return $data;
}
return NULL;
}
私の見解
//company select
<select name="company_name" onchange="showdrop()" id="company_name">
//company list
</select>
//Sugar moment and Date Picker display
<input type="text" name="range" id="range"></a>
//Graph display
<figure id="chart"></figure>
私のAJAX/jQueryの
$(function() {
// Set the default dates, uses sugarjs' methods
var startDate = Date.create().addDays(-6), // 6 days ago
endDate = Date.create(); // today
var range = $('#range');
var company_name = $("#company_name").val();
// Show the dates in the range input
range.val(startDate.format('{MM}/{dd}/{yyyy}') + '-' + endDate.format('{MM}/{dd}/{yyyy}'));
// Load chart
ajaxLoadChart(startDate,endDate);
range.daterangepicker({
startDate: startDate,
endDate: endDate,
ranges: {
'Today': ['today', 'today'],
'Yesterday': ['yesterday', 'yesterday'],
'Last 7 Days': [Date.create().addDays(-6), 'today'],
'Last 30 Days': [Date.create().addDays(-29), 'today']
// You can add more entries here
}
},function(start, end){
ajaxLoadChart(start, end);
});
// The tooltip shown over the chart
var tt = $('<div class="ex-tooltip">').appendTo('body'),
topOffset = -32;
var data = {
"xScale": "time",
"yScale": "linear",
"main": [{
className: ".stats",
"data": []
}]
};
var opts = {
paddingLeft: 50,
paddingTop: 20,
paddingRight: 10,
axisPaddingLeft: 25,
tickHintX: 9, // How many ticks to show horizontally
dataFormatX: function(x) {
// This turns converts the timestamps coming from
// ajax.php into a proper JavaScript Date object
return Date.create(x);
},
tickFormatX: function(x) {
// Provide formatting for the x-axis tick labels.
// This uses sugar's format method of the date object.
return x.format('{MM}/{dd}');
},
"mouseover": function(d, i) {
var pos = $(this).offset();
tt.text(d.x.format('{Month} {ord}') + ', Nbre Device: ' + d.y)
.css({top: topOffset + pos.top,left: pos.left})
.show();
},
"mouseout": function(x) {
tt.hide();
}
};
// Create a new xChart instance, passing the type
// of chart a data set and the options object
var chart = new xChart('line-dotted', data, '#chart', opts);
// Function for loading data via AJAX and showing it on the chart
function ajaxLoadChart(startDate, endDate) {
// If no data is passed (the chart was cleared)
if (!startDate || !endDate) {
chart.setData({
"xScale": "time",
"yScale": "linear",
"main": [{
className: ".stats",
data: []
}]
});
return;
}
// Otherwise, issue an AJAX request
$.post('http://index.php/get_chart_data', {
start: startDate.format('{yyyy}-{MM}-{dd}'),
end: endDate.format('{yyyy}-{MM}-{dd}'),
company_name:company_name
}, function(data) {
if ((data.indexOf("No record found") > -1) || (data.indexOf("Date must be selected.") > -1)) {
$('#msg').html('<span style="color:red;">' + data + '</span>');
$('#placeholder').hide();
chart.setData({
"xScale": "time",
"yScale": "linear",
"main": [{
className: ".stats",
data: []
}]
});
} else {
$('#msg').empty();
$('#placeholder').show();
var set = [];
$.each(data, function() {
set.push({
x: this.label,
y: parseInt(this.value, 10)
});
});
chart.setData({
"xScale": "time",
"yScale": "linear",
"main": [{
className: ".stats",
data: set
}]
});
}
}, 'json');
}
});