DHTMLX Multiple Gantt Chart Filter (Uncaught ReferenceError: )

Hello everyone I created 3 different filter (Initialize from select/Checkboxes Mode/Zooming Filter) for my Gantt Chart using DHTMLX based from this tutorial :

http://ift.tt/2poFPAC

Whenever I check any of this filter from Initialize from select & Zooming Filter, an

"Uncaught ReferenceError: designations_value is not defined"

error will appear, but when I check any filter from the Checkboxes mode then check any option from any other filters. it will work. Why is this happening?

My code :

1) Initialize from select

index.html

<select id="department" style="width:200px;" mode="checkbox">
                                <option value="ALL" selected="1" >ALL</option>
                                <option value="ARTIST">ARTIST</option>
                                <option value="ADMIN">ADMIN</option>
                                <option value="LEAD">LEAD</option>
                                <option value="HR">HR</option>
                                <option value="PRODUCTION">PRODUCTION</option>
                                <option value="MANAGEMENT">MANAGEMENT</option>
                                <option value="TECHNOLOGY">TECHNOLOGY</option>
                            </select>

javascript :

<script>
            var myCombo;
            function checkbox_department() {
                var department_value = {'ALL': true};

                myCombo = dhtmlXComboFromSelect("department");
                myCombo.attachEvent("onCheck", function(value, state){
                    var values = myCombo.getChecked();
                    department_value = {};
                    for(var i = 0; i < values.length; i++){
                        department_value[values[i]] = true;
                        console.log(value);
                    }
                    gantt.render();
                });

                // filter gantt by value of the scope variable
                gantt.attachEvent("onBeforeTaskDisplay", function (id, task) {
                    if(department_value['ALL'])
                        return true;

                    return !!department_value[task.job_category];
                });
            }
        </script>

2)Checkboxes Mode :

index.html :

    <div id="designation_zone"></div>

javascript :

    <script>
                var myCombo2;
                function checkbox_designations() {
                    myCombo2 = new dhtmlXCombo("designation_zone", "combo", 230, "checkbox");
                    myCombo2.load("static/json/designations.json");
                    myCombo2.enableFilteringMode(true);
                    myCombo2.attachEvent("onCheck", function(value, state){
                        var values = myCombo2.getChecked();
                        designations_value = {};
                        for(var j = 0; j < values.length; j++){
                            designations_value[values[j]] = true;
                            console.log(value);
                        }
                        gantt.render();
                    });

                    // filter gantt by value of the scope variable
                    gantt.attachEvent("onBeforeTaskDisplay", function (id, task) {
                        if(designations_value['ALL'])
                            return true;

                        return !!designations_value[task.job_title];
                    });
                }
            </script>

3) Date Zooming Filter (year/month/week/day) :

index.html :

<div class="controls_bar" style="color: white;">
                                    <strong> Filtering: &nbsp; </strong>
                                    <strong> Zooming: &nbsp; </strong>
                                    <label>
                                        <input name="scales" onclick="zoom_tasks(this)" type="radio" value="hour">
                                        <span>Hours</span>
                                    </label>
                                    <label>
                                        <input name="scales" onclick="zoom_tasks(this)" type="radio" value="day">
                                        <span>Days</span>
                                    </label>
                                    <label>
                                        <input name="scales" onclick="zoom_tasks(this)" type="radio" value="week">
                                        <span>Weeks</span>
                                    </label>
                                    <label>
                                        <input name="scales" onclick="zoom_tasks(this)" type="radio" value="month">
                                        <span>Months</span>
                                    </label>
                                </div>

javascript :

<script type="text/javascript">
    function zoom_tasks(node){
        switch (node.value) {
            case "hour":
                    gantt.config.scale_unit = "day";
                    gantt.config.date_scale = "%d %M";

                    gantt.config.scale_height = 30;
                    gantt.config.min_column_width = 50;
                    gantt.config.subscales = [
                          {unit:"hour", step:1, date:"%H:%i"}
                    ];

                break;

                case "day":
                    gantt.config.scale_unit = "week";
                    gantt.config.date_scale = "Week : %W";
                    gantt.config.subscales = [
                          {unit:"day", step:1, date:"%d %M"}
                    ];
                    gantt.config.scale_height = 30;
                    gantt.config.min_column_width = 70;
                break;

            case "week":
                    gantt.config.scale_unit = "month";
                    gantt.config.date_scale = "%F, %Y";
                     gantt.config.subscales = [
                          {unit:"week", step:1, date:"Week : %W"}
                    ];

                    gantt.config.scale_height = 30;
                    gantt.config.min_column_width = 70;
                break;

            case "month":
                gantt.config.scale_unit = "month";
                gantt.config.date_scale = "%F, %Y";
                 gantt.config.subscales = [
                 ];

                gantt.config.scale_height = 30;
                gantt.config.min_column_width = 1;
                break;

        }
        gantt.render();
    }
    </script>