在不刷新页面的情况下更新我的 chartjs 表单

Question

I have a form that when i submit changes the data of my charts using the dates put in:

<form action="{{route('home')}}" method="get" id="">
                        <div>
                            <label for="daterange">Date Range:</label>
                            <input type="date" name="StartDate" id="StartDate"  class="form-control col-md-3"
                                   value="{{isset($searchParams['StartDate']) ? $searchParams['StartDate'] : Carbon\Carbon::now()->subDays(10)->format('yy-m-d')}}"> to
                            <input type="date" name="EndDate" id="EndDate"  class="form-control col-md-3"
                                   value="{{isset($searchParams['EndDate']) ? $searchParams['EndDate'] : Carbon\Carbon::now()->subDays(5)->format('yy-m-d')}}">
                        </div>
                        <br>
                        <div>
                            <label for="shortcuts">shortcuts:</label>
                            <a class="btn btn-sm btn-white" href="#">This Week</a>
                            <a class="btn btn-sm btn-white" href="#">This Month</a>
                        </div>
                        <button type="submit" class="btn btn-md btn-white ml-4 mr-1">filter</button>
                    </form>

i have about 4 chartjs charts, I want to be able to change the date ranges of the charts without refreshing the page. I've been advised to use an ajax call but im not quite sure how to properly implement it.

var ctx = document.getElementById("Chart").getContext('2d');
        var recentActivityChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels:  [
                    @foreach($data as $a)
                        '{{$a->StartDate}}',
                    @endforeach
                ],
                datasets: [{
                    label: 'hours',
                    data: [
                        @foreach($data as $b)
                            '{{$b->Duration}}',
                        @endforeach
                    ],
                    barThickness: 12,
                    fill: true,
                    backgroundColor: "rgba(54, 162, 235, 1)",
                    borderColor: "rgba(54, 162, 235, 1)",
                    borderWidth: 1,
                }]
            },
        });

Answer 1

I can't give you code based off of what you gave me. But here's the basic principle:

1. Set up your canvas

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');

</script>

2. Have the form prevent it's default behavior - ie, don't submit.
   Can I make a <button> not submit a form?

3. Have your button trigger an AJAX call using Jquery. JQuery Get is the most basic implementation for learning. Check out jquery: https://api.jquery.com/jQuery.get/

<button onclick="doJSFunction(ctx)">

4. With the response data, format it in a way that your chart js can use. I'm sure that the chartJS library has a refresh or update or draw new chart type of method.

In your doJSFunction, do something like this:

 $.get( "/yourChartData", { startDate: "12-20-2020", endDate: "12-31-2020" } ) .done(function( data ) { var myChart = new Chart(ctx, { type: 'bar', data: { // ALL OF THIS EITHER GETS FILLED IN BY OR CHANGED BY YOUR RESPONSE DATA labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } }

}); });

Edit: here is the chartJS for drawing a new chart. hhttps://www.chartjs.org/docs/latest/

Answer 2

UPDATE: the best way to this is to have use iframes. set up your form to like so

<form action="{{route('chart.home')}}" method="get" id="" target="Charts">
                            <div>
                                <label for="daterange">Date Range:</label>
                                <input type="date" name="StartDate" id="StartDate"  class="form-control col-md-3"
                                       value="{{isset($searchParams['StartDate']) ? $searchParams['StartDate'] : Carbon\Carbon::now()->subDay(7)->format('yy-m-d')}}"> to
                                <input type="date" name="EndDate" id="EndDate"  class="form-control col-md-3"
                                       value="{{isset($searchParams['EndDate']) ? $searchParams['EndDate'] : Carbon\Carbon::now()->format('yy-m-d')}}">
                            </div>
                            <br>
                            <button type="submit"  class="btn btn-sm btn-white">filter</button>

where you would place your canvas, replace is with an iframe like so:

<iframe  name="Charts" id="iframe" src="{{route('chart.home')}}"></iframe>

this will populate whatever you're submitting within this iframe.

In your blade of charthome.blade.php, put your chartjs. on form submission your chartjs will update and display in your iframe without reloading the page!

This version does not require ajax calls or prevent defaults so it is a lot easier to and requires less code and knowhow. for more information on iframes check out

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe https://css-tricks.com/snippets/html/post-data-to-an-iframe/