在codeigniter + d3.js图表​​

时间:2016-12-02 09:56:16

标签: jquery filter filtering checkboxlist

我想按日期范围+公司名称过滤我的MSQL数据。 我可以完美地获得具有日期范围的图表。 我目前的问题是我也会按公司名称过滤。 我无法按组列出公司并进行过滤 公司名称+日期范围。 有人可以查看我的代码,请给我帮助。谢谢!

我的控制器

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');
    }
});

1 个答案:

答案 0 :(得分:0)

&#34;函数get_performance($ start_date,$ end_date,$ compnay_name)&#34;

相关问题