if statement in php not reaching second half, not displaying change on chartjs

I have an if statement where i essentially want the default of between now and 4 days before, until i do a request to change. but the issue is it returns the dates for the first part of the if statement and seems to never acknowledge the second bit. i want the data to display on a chart. in the console log its showing the right dates but not on the actual chart. am I missing something? in the blade:

                            <label for="daterange">Date Range:</label>
                            <input type="date" name="StartDate" id="StartDate"  class="form-control col-md-3"
                                   value=""> to
                            <input type="date" name="EndDate" id="EndDate"  class="form-control col-md-3"
                                   value="">
                        </div>
                        <br>
                    <button id="submitDateRangeForm">Submit</button>

in the controller:

if (!$request->input('StartDate') && !$request->input('EndDate')) {
        $startDate = Carbon::now()->subDays(4);
        $endDate = Carbon::now();
    } else {
        $startDate = Carbon::parse($request->input('StartDate'));
        $endDate =Carbon::parse($request->input('EndDate'));
    }
    $data = Activity::findBy(
        $startDate,
        $endDate
    );
    return response()->json($data);

UPDATE: this is the chartjs i am working with. It is attached to a form where i can pick start and end dates. the data is being pulled from a sql stored procedure. the chart must update without reloding the page, which it does. but currently the data will appear from the 1st sept to the 8th sept (what is shown in the first part of the if statement) but when i change the dates it wont show the new dates but the the dates set in the first half of the if statement. the console will show the data for the dates ive picked so im not sure why it isnt populating the chart

the chartjs:

$('#submitDateRangeForm').click(function(e) {
        e.preventDefault();
        $.ajax({
            url: "",
            type: 'GET',
            data:{
                'StartDate': $("#StartDate").val(),
                'EndDate': $("#EndDate").val()
                // StartDate: this.StartDate,
                // EndDate: this.EndDate
            },
                // $("#dateRangeForm").serialize()
            success: function(result) {
                // let json = JSON.parse(result)
                console.log(result)
                var ctx = document.getElementById("recentActivityChart").getContext('2d');
                var recentActivityChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels:  [@foreach($data as $a)
                                '',
                            @endforeach
                        ],
                        datasets: [{
                            label: 'hours',
                            data: [
                                @foreach($data as $b)
                                    '',
                                @endforeach
                            ],
                            barThickness: 12,
                            fill: true,
                            backgroundColor: "rgba(54, 162, 235, 1)",
                            borderColor: "rgba(54, 162, 235, 1)",
                            borderWidth: 1,
                        }]
                    },
                    options: {
                        animation: {
                            duration: 1000,
                            easing: "linear",
                        },
                        responsive: true,
                        maintainAspectRatio: true,
                        legend: {
                            display: false,
                            position: 'bottom',
                            usePointStyle: true,
                            labels: {
                                fontColor: "grey",
                                usePointStyle: true,
                            },
                        },
                        scales: {
                            yAxes: [{
                                gridLines: {
                                    display: true,
                                    borderDash: [8, 4],
                                },
                                scaleLabel:{
                                    display: true,
                                    labelString: 'hours',
                                },
                                ticks: {
                                    beginAtZero: false,
                                }
                            }],
                            xAxes: [{
                                gridLines: {
                                    scaleShowVerticalLines: false,
                                    display: false,
                                },
                                ticks: {
                                    beginAtZero: false,
                                }
                            }]
                        },
                    }
                });
            }
        });
    });

It has to update without reloading the page which works fine, but for some reason the correct date-ranges aren't being pulled through, i suspect i wrote my if statement wrong.