Update Chart JS data dynamically and add new data, remove old data from chart

Question

I'm building a Visitor Chart using Morris.Line chart which is meant to show and update date when admin select new time, I attach my chart JS code below, which is show last 30 days data on page load, I have a labels array which I need to change to whatever the admin select is, and after every X number of items it removes the previous so that the graph is essentially a timeline showing real-time stats

<script src="js/jquery.min.js"></script>
<script src="js/raphael/raphael.min.js"></script>
<script src="js/morris.js/morris.min.js"></script>
<script>
    $(document).ready(function(){
        $(window).on('load', function(){
            $.ajax({
                url:'functions.php',
                type:'post',
                data:{getdefaultgraph:'true'},
                success:function(responce){
                    subscribeUser(responce);
                }
            });
        });
        
        //on time base change
        $('#timebase').on('change', function(){
            var time = $('#timebase').val();
            $.ajax({
                url:'functions.php',
                type:'post',
                data:{gettimebase:'true', timedata:time},
                success:function(responce){
                    subscribeUser(responce);
                }
            });
        });
        
        //on plateform base change
        $('#plateform').on('change', function(){
            var platform = $('#plateform').val();
            $.ajax({
                url:'functions.php',
                type:'post',
                data:{getplatformbase:'true', browser:platform},
                success:function(responce){
                    console.log(responce);
                    subscribeUser(responce);
                }
            });
        });
    
        function subscribeUser(responce){
            var data = JSON.parse(responce);
            data.forEach(val => {
                for(let key in val) Number.isNaN(+val[key]) || (val[key] = +val[key])
            });
            //console.log(data);
            "use strict";
            // LINE CHART
            var line = new Morris.Line({
                element: 'line-chart',
                resize: true,
                data:data,
                xkey: 'x',
                ykeys: ['y'],
                labels: ['Subscribe'],
                lineColors: ['#3c8dbc'],
                hideHover: 'auto'
            });
            line.update();
        }
    });
</script>

HTML Code

<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="chart-sec">
            <div class="row">
                <div class="col-md-6 col-sm-6">
                    <h1 class="heading">Subsriber Trends</h1>
                </div>
                <div class="col-md-3 col-sm-3 col-xs-3">
                    <select name="" id="timebase" class="form-control">
                        <option value="1">1 hour</option> 
                        <option value="24">24 hour</option>
                        <option selected value="30">30 days</option>
                    </select>
                </div>
                <div class="col-md-3 col-sm-3 col-xs-3">
                    <select name="" id="plateform" class="form-control">
                        <option  selected value="all">All Platforms</option>
                        <option value="Chrome">Chrome</option>
                        <option value="Firefox">Firefox</option>
                    </select>
                </div>
            </div>
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="box-body chart-responsive">
                    <div class="chart" id="line-chart" style="height: 300px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>