Codeigniter/JS：从数据库中获取数据

Question

我的 codeigniter 中有 javascript，它可以创建实时图表。我从数据库中获取数据。 我需要实时图表，它将每隔 x 秒从数据库中获取数据，并将其绘制到图表中。

我有这个：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
    google.charts.load('current', {packages: ['corechart', 'line']});
    google.charts.setOnLoadCallback(drawBasic);
    function drawBasic() {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'X');
        data.addColumn('number', 'Dogs');

        var options = {
            hAxis: {
                title: 'Time'
            },
            vAxis: {
                title: 'Popularity'
            }
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

        setInterval(function() {
            grepData();

            data.addRows([
                [prvni, druha]
            ]);
            chart.draw(data, options);

        }, 6000);

        function grepData(){
            <?php
            $vyber = $this->db->query('SELECT id, percent FROM cpu_stats ORDER BY id DESC LIMIT 1;');
            foreach ($vyber->result_array() as $row)
                {

            ?>
            prvni = <?php echo $row->id;?>;
            druha = <?php echo $row->percent;?>;<?php
        }?>
        }
    }


</script>

问题是，查询只会获取一次数据。当我在函数中编写第二个查询时，它将两次获取数据。当我删除查询并只写prvni++; druha++ 时，图形将起作用。

对不起我的英语。

Answer 1

Codeigniter 是 MVC（模型-视图-控制器）框架。在 View 中使用数据库查询是一种不好的做法。

为了动态绘制图形点，您需要每隔X 秒运行一次AJAX。 AJAX 会调用控制器中的一个方法，然后控制器会调用模型中的一个方法，然后模型将与数据库通信并将结果返回给控制器，然后控制器再次将结果返回给视图。

Answer 2

哦，谢谢。现在我得到了这个

<script>
    $(document).ready(function () {

        google.charts.load('current', {packages: ['corechart', 'line']});
        google.charts.setOnLoadCallback(drawBasic);

        var prvni = 0;
        var druha = 0;
        function drawBasic() {
            var data = new google.visualization.DataTable();
            data.addColumn('number', 'X');
            data.addColumn('number', 'Y');
            var options = {
                vAxis: {
                    title: 'Vytíženost (%)'
                }
            };
            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(data, options);

            function refreshData() {
                data.addRows([ [prvni, druha] ]);
                chart.draw(data, options);
                prvni++;
                //druha++;
            }

            function load_data(query) {

                $.ajax({
                    url: "<?php echo base_url(); ?>main/selectStats",
                    method: "POST",
                    data: {query: query},
                    success: function (select) {
                        druha = select;
                        refreshData();
                    },
                    error: function () {
                        alert("BAD");
                    }
                })
            }

            setInterval(function () {
                load_data();
                //refreshData();
            }, 1000);
        }
    });
</script>

当我使用 alert(druha);在成功部分，我可以看到它的价值。但是图表不起作用。我什么时候会使用 druha++；而不是 druha = select;，图形工作.. 一些维修技巧？