Chartjs-Update my chartjs form without refreshing page

by

0👍

✅

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/

0👍

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>

  1. Have the form prevent it’s default behavior – ie, don’t submit.
    Can I make a <button> not submit a form?

  2. 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)">

  1. 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/

Leave a comment