CodeIgniter 和 Google 图表 - 基于 mysql 值的下拉菜单
CodeIgniter and Google charts - dropdown based on mysql values
我正在使用代码点火器、google 图表以及 php 和 MySQL 来显示图表。它使用固定查询工作。我正在尝试添加一个下拉菜单以根据所选选项(sql 列 "status")显示图表
这是我到目前为止所拥有的。我如何修改它以接受下拉值?
model.php
public function get_chart_data()
{
$query = $this->db->get($this->db_mgmt);
$this->db->select('rating, COUNT(rating) AS Count');
$this->db->from('db_mgmt');
$this->db->where('status =', $status);
$this->db->group_by('rating');
$query = $this->db->get();
$results['chart'] = $query->result();
}
controller.php
$this->load->model('model', 'chart');
public function index() {
$results = $this->chart->get_chart_data();
$data['chart'] = $results['chart'];
$this->load->view('index.php', $data);
}
view.php
<?php
foreach ($chart as $object) {
$open_all[] = "['".$object->rating."', ".$object->Count."]";
}
?>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart_open);
function drawChart_open() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Rating');
data.addColumn('number', 'Count');
data.addRows([
<?php echo implode(",", $open_all);?>
]);
var options = {
pieSliceText: 'value-and-percentage',
};
var chart = new google.visualization.PieChart(document.getElementById('open_div'));
chart.draw(data, options);
}
<div id="open_div" class="chart"></div>
提前致谢!
更新:
我已经使用 ajax 尝试了以下方法,但它似乎不起作用。我绝对确定我在这里做错了什么,但不确定在哪里。在 chrome 中使用 Inspect 也不会给出任何错误。
model.php
public function fetch_result($status)
{
$query = $this->db->get($this->db_mgmt);
$this->db->select('rating, COUNT(status) AS Status_Count');
$this->db->from('db__mgmt');
$this->db->where('status =', $status);
$this->db->group_by('rating');
$query = $this->db->get();
return $query;
}
controller.php
$this->load->model('model', 'chart');
public function mychart() {
if(!empty($_POST["val"])) {
$val=$_POST["val"];
$result_new=$this->chart->fetch_result($val);
$array = array();
$cols = array();
$rows = array();
$cols[] = array("id"=>"","label"=>" Rating","pattern"=>"","type"=>"string");
$cols[] = array("id"=>"","label"=>"Count","pattern"=>"","type"=>"number");
foreach ($result_new as $object) {
$rows[] = array("c"=>array(array("v"=>$object->risk_rating,"f"=>null),array("v"=>(int)$object->Status_Count,"f"=>null)));
}
$array = array("cols"=>$cols,"rows"=>$rows);
echo json_encode($array);
}
}
view.php
function drawChart_open_all(num) {
var PieChartData = $.ajax({
type: "POST",
url: "<?php echo base_url(); ?>" + "dashboard/chart/mychart",
data:'val='+num,
dataType:"json"
}).responseText;
alert(PieChartData);
// Create the data table.
var data = new google.visualization.DataTable(PieChartData);
var options = {
pieSliceText: 'value-and-percentage',
};
var chart = new google.visualization.PieChart(document.getElementById('open_new'));
chart.draw(data, options);
}
<div><span> <b>Pie Chart<br /><br /></span></div>
<form>
<select name="status" onchange="drawChart_open_all(this.value)">
<option value="WIP">WIP</option>
<option value="Close">Close</option>
</select>
</form>
<div id="open_new" class="chart"></div>
提前致谢!!
我 认为 最简单的方法是发送一个带有 <option>
值
的 GET 请求
首先,回到你的第一个版本。
接下来,在您的 onchange
事件中发送值
function drawChart_open_all(num) {
location = "<?php echo base_url(); ?>" + "dashboard/chart/mychart?option=" + num;
}
然后在模型中--
get_chart_data()
您应该能够使用 --
访问该值
$_GET['option']
使用它来修改您的查询
这是一个具有类似概念的旧答案——不同之处在于它使用 POST 与 GET
以及一个 <form>
和一个 <input type="submit">
按钮来发送请求
How to pass JavaScript variables to PHP?
我设法找出问题所在,最后使用了ajax。 @WhiteHat 解决方案也朝着正确的方向发展。谢谢!
model.php
public function fetch_result($status)
{
$query = $this->db->get($this->db_mgmt);
$this->db->select('rating, COUNT(status) AS status_count');
$this->db->from('db_mgmt');
$this->db->where('status =', $status);
$this->db->group_by('rating');
$query = $this->db->get();
$results_new = $query->result(); // <-- Forgot to add this!
return $results_new;
}
controller.php
$this->load->model('model', 'chart');
public function mychart() {
if(!empty($_POST['option'])) {
$val = $_POST['option'];
$result_new=$this->chart->fetch_result($val);
$array = array();
$cols = array();
$rows = array();
$cols[] = array("id"=>"","label"=>" Rating","pattern"=>"","type"=>"string");
$cols[] = array("id"=>"","label"=>"Count","pattern"=>"","type"=>"number");
foreach ($result_new as $object) {
$rows[] = array("c"=>array(array("v"=>(string)$object->rating),array("v"=>(int)$object->status_count)));
}
$array = array("cols"=>$cols,"rows"=>$rows);
echo json_encode($array);
}
}
view.php
function drawChart_open_all(status) {
var PieChartData = $.ajax({
type: 'POST',
url: "<?php echo base_url(); ?>" + "dashboard/chart/mychart",
data: { 'option':status }, // <-- kept as option instead of val
dataType:"json",
global: false, // <-- Added
async:false, // <-- Added
success: function(data){ // <-- Added
return data; // <-- Added
},
error: function(xhr, textStatus, error){
console.log(xhr.statusText);
console.log(textStatus);
console.log(error);
}
}).responseText;
// Create the data table.
var data = new google.visualization.DataTable(PieChartData);
var options = { pieSliceText: 'value-and-percentage', };
var chart = new google.visualization.PieChart(document.getElementById('open_new'));
chart.draw(data, options);
}
<div><span> <b>Pie Chart<br /><br /></span></div>
<form>
<select name="status" onchange="drawChart_open_all(this.value)">
<option value="WIP">WIP</option>
<option value="Close">Close</option>
</select>
</form>
<div id="open_new" class="chart"></div>
我正在使用代码点火器、google 图表以及 php 和 MySQL 来显示图表。它使用固定查询工作。我正在尝试添加一个下拉菜单以根据所选选项(sql 列 "status")显示图表 这是我到目前为止所拥有的。我如何修改它以接受下拉值?
model.php
public function get_chart_data()
{
$query = $this->db->get($this->db_mgmt);
$this->db->select('rating, COUNT(rating) AS Count');
$this->db->from('db_mgmt');
$this->db->where('status =', $status);
$this->db->group_by('rating');
$query = $this->db->get();
$results['chart'] = $query->result();
}
controller.php
$this->load->model('model', 'chart');
public function index() {
$results = $this->chart->get_chart_data();
$data['chart'] = $results['chart'];
$this->load->view('index.php', $data);
}
view.php
<?php
foreach ($chart as $object) {
$open_all[] = "['".$object->rating."', ".$object->Count."]";
}
?>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart_open);
function drawChart_open() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Rating');
data.addColumn('number', 'Count');
data.addRows([
<?php echo implode(",", $open_all);?>
]);
var options = {
pieSliceText: 'value-and-percentage',
};
var chart = new google.visualization.PieChart(document.getElementById('open_div'));
chart.draw(data, options);
}
<div id="open_div" class="chart"></div>
提前致谢!
更新:
我已经使用 ajax 尝试了以下方法,但它似乎不起作用。我绝对确定我在这里做错了什么,但不确定在哪里。在 chrome 中使用 Inspect 也不会给出任何错误。
model.php
public function fetch_result($status)
{
$query = $this->db->get($this->db_mgmt);
$this->db->select('rating, COUNT(status) AS Status_Count');
$this->db->from('db__mgmt');
$this->db->where('status =', $status);
$this->db->group_by('rating');
$query = $this->db->get();
return $query;
}
controller.php
$this->load->model('model', 'chart');
public function mychart() {
if(!empty($_POST["val"])) {
$val=$_POST["val"];
$result_new=$this->chart->fetch_result($val);
$array = array();
$cols = array();
$rows = array();
$cols[] = array("id"=>"","label"=>" Rating","pattern"=>"","type"=>"string");
$cols[] = array("id"=>"","label"=>"Count","pattern"=>"","type"=>"number");
foreach ($result_new as $object) {
$rows[] = array("c"=>array(array("v"=>$object->risk_rating,"f"=>null),array("v"=>(int)$object->Status_Count,"f"=>null)));
}
$array = array("cols"=>$cols,"rows"=>$rows);
echo json_encode($array);
}
}
view.php
function drawChart_open_all(num) {
var PieChartData = $.ajax({
type: "POST",
url: "<?php echo base_url(); ?>" + "dashboard/chart/mychart",
data:'val='+num,
dataType:"json"
}).responseText;
alert(PieChartData);
// Create the data table.
var data = new google.visualization.DataTable(PieChartData);
var options = {
pieSliceText: 'value-and-percentage',
};
var chart = new google.visualization.PieChart(document.getElementById('open_new'));
chart.draw(data, options);
}
<div><span> <b>Pie Chart<br /><br /></span></div>
<form>
<select name="status" onchange="drawChart_open_all(this.value)">
<option value="WIP">WIP</option>
<option value="Close">Close</option>
</select>
</form>
<div id="open_new" class="chart"></div>
提前致谢!!
我 认为 最简单的方法是发送一个带有 <option>
值
首先,回到你的第一个版本。
接下来,在您的 onchange
事件中发送值
function drawChart_open_all(num) {
location = "<?php echo base_url(); ?>" + "dashboard/chart/mychart?option=" + num;
}
然后在模型中--
get_chart_data()
您应该能够使用 --
访问该值
$_GET['option']
使用它来修改您的查询
这是一个具有类似概念的旧答案——不同之处在于它使用 POST 与 GET
以及一个 <form>
和一个 <input type="submit">
按钮来发送请求
How to pass JavaScript variables to PHP?
我设法找出问题所在,最后使用了ajax。 @WhiteHat 解决方案也朝着正确的方向发展。谢谢!
model.php
public function fetch_result($status)
{
$query = $this->db->get($this->db_mgmt);
$this->db->select('rating, COUNT(status) AS status_count');
$this->db->from('db_mgmt');
$this->db->where('status =', $status);
$this->db->group_by('rating');
$query = $this->db->get();
$results_new = $query->result(); // <-- Forgot to add this!
return $results_new;
}
controller.php
$this->load->model('model', 'chart');
public function mychart() {
if(!empty($_POST['option'])) {
$val = $_POST['option'];
$result_new=$this->chart->fetch_result($val);
$array = array();
$cols = array();
$rows = array();
$cols[] = array("id"=>"","label"=>" Rating","pattern"=>"","type"=>"string");
$cols[] = array("id"=>"","label"=>"Count","pattern"=>"","type"=>"number");
foreach ($result_new as $object) {
$rows[] = array("c"=>array(array("v"=>(string)$object->rating),array("v"=>(int)$object->status_count)));
}
$array = array("cols"=>$cols,"rows"=>$rows);
echo json_encode($array);
}
}
view.php
function drawChart_open_all(status) {
var PieChartData = $.ajax({
type: 'POST',
url: "<?php echo base_url(); ?>" + "dashboard/chart/mychart",
data: { 'option':status }, // <-- kept as option instead of val
dataType:"json",
global: false, // <-- Added
async:false, // <-- Added
success: function(data){ // <-- Added
return data; // <-- Added
},
error: function(xhr, textStatus, error){
console.log(xhr.statusText);
console.log(textStatus);
console.log(error);
}
}).responseText;
// Create the data table.
var data = new google.visualization.DataTable(PieChartData);
var options = { pieSliceText: 'value-and-percentage', };
var chart = new google.visualization.PieChart(document.getElementById('open_new'));
chart.draw(data, options);
}
<div><span> <b>Pie Chart<br /><br /></span></div>
<form>
<select name="status" onchange="drawChart_open_all(this.value)">
<option value="WIP">WIP</option>
<option value="Close">Close</option>
</select>
</form>
<div id="open_new" class="chart"></div>