doushu5451 2015-11-03 09:41
浏览 46
已采纳

Morris Js和Codeigniter从控制器传递数据

I have the following controller which picks data from my DBase :

function 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 :

[{"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 = "<?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. What is the best way to pass this data from controller to view so that it can display dynamic graphs?

  • 写回答

1条回答 默认 最新

  • doujinyi1267 2015-11-03 09:48
    关注

    You need to ajax the data use $.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];
                            }
                        });
            });
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 3D多模态医疗数据集-视觉问答
  • ¥20 设计一个二极管稳压值检测电路
  • ¥15 内网办公电脑进行向日葵
  • ¥15 如何输入双曲线的参数a然后画出双曲线?我输入处理函数加上后就没有用了,不知道怎么回事去掉后双曲线可以画出来
  • ¥50 WPF Lidgren.Network.Core2连接问题
  • ¥15 soildworks装配体的尺寸问题
  • ¥100 有偿寻云闪付SDK转URL技术
  • ¥30 基于信创PC发布的QT应用如何跨用户启动后输入中文
  • ¥20 非root手机,如何精准控制手机流量消耗的大小,如20M
  • ¥15 远程安装一下vasp