Morris Js和Codeigniter从控制器传递数据
[英]Morris Js and Codeigniter pass data from a controller
问题描述
I have the following controller which picks data from my DBase : 
我有以下控制器从我的DBase中选择数据：
function chart_js() { 函数chart_js（）{
$rows = '';
$query = "SELECT clnt_id,date_added FROM job_card ORDER BY date_added DESC LIMIT 0, 5";
$result = $this->db->query($query);
$total_rows = $result->num_rows;
if ($result) {
$rows = $result->result_array();
}
print json_encode($rows, JSON_NUMERIC_CHECK);
}
And passes it to json_encode in the following format : 并将其以以下格式传递给json_encode：
[{"clnt_id": 10, "date_added": "2015-11-02 12:28:01"}, {"clnt_id": 11, "date_added": "2015-11-01 07:06:56"} , {"clnt_id": 9, "date_added": "2015-10-30 22:14:48"}, {"clnt_id": 7, "date_added": "2015-10-30 06:15:55"}, {"clnt_id": 10, "date_added": "2015-10-30 06:03:50"}]
The data above is the exact format of how the data is returned. 上面的数据是返回数据的确切格式。 I have used the above data to plot a static line graph and it worked very well. 我已经使用以上数据绘制了静态折线图，并且效果很好。 Below is my view : 以下是我的看法：
<body class="nav-md">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-bar-chart-o fa-fw"></i> Account Registrations Past 7 days
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div id="acctregs" style="height: 300px;"></div>
</div>
<!-- /.panel-body -->
</div>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script>
$(document).ready(function () {
var acct_regs = [{"clnt_id": 10, "date_added": "2015-11-02 12:28:01"}, {"clnt_id": 11, "date_added": "2015-11-01 07:06:56"}
, {"clnt_id": 9, "date_added": "2015-10-30 22:14:48"}, {"clnt_id": 7, "date_added": "2015-10-30 06:15:55"}, {"clnt_id"
: 10, "date_added": "2015-10-30 06:03:50"}];
var acctregs = new Morris.Line({
// ID of the element in which to draw the chart.
element: 'acctregs',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: acct_regs,
// The name of the data record attribute that contains x-values.
xkey: 'date_added',
// A list of names of data record attributes that contain y-values.
ykeys: ['clnt_id'],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
labels: ['Value'],
dateFormat: function (x) {
return new Date(x).toString().split("00:00:00")[0];
}
});
});
</script>
</body>
However when I try to retrieve this data from the controller which interacts with the Dbase by replacing the var acct_regs to : 但是，当我尝试通过将var acct_regs替换为：从与Dbase交互的控制器中检索此数据时：
var acct_regs = "<?php echo site_url('operations/char_js'); ?>";
I get the following error : 我收到以下错误：
TypeError: a is undefined
...,h,i,j,k,l;return"number"==typeof a?a:(c=a.match(/^(\d+) Q(\d)$/),e=a.match(/^(\...
from morris.min.js. 来自morris.min.js。 What is the best way to pass this data from controller to view so that it can display dynamic graphs? 将数据从控制器传递到视图以使其能够显示动态图的最佳方法是什么？
1 个解决方案
解决方案1
1 已采纳 2015-11-03 09:48:40
You need to ajax the data use $.getJSON 您需要使用$.getJSON来处理数据
Try: 尝试：
$.getJSON("<?php echo site_url('operations/char_js'); ?>", function (json) {
var acctregs = new Morris.Line({
// ID of the element in which to draw the chart.
element: 'acctregs',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: json,
// The name of the data record attribute that contains x-values.
xkey: 'date_added',
// A list of names of data record attributes that contain y-values.
ykeys: ['clnt_id'],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
labels: ['Value'],
dateFormat: function (x) {
return new Date(x).toString().split("00:00:00")[0];
}
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.