Display data between a range of dates using Highcharts in Wordpress

I imagine you want to pass dates in highcharts and update your graph. if this is the example here:

$(function () {
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container'
    },
    
    series: [{
      name : "mantequila",
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }]
  });
  
  
  $('#button').click(function() {
    //validamos las fechass
    var fecha_inicio = $('#inicio').val();
    var fecha_fin = $('#fin').val();
    $.ajax({
      url: "https://jsonplaceholder.typicode.com/posts/",
      method: "GET",
      data: { fecha_inicio: fecha_inicio, fecha_fin: fecha_fin }
    }).done(function(data) {
      /* en mi caso esta en duro pero si recibes los valores deberian ser todos 
      as series por tanto deberia ser algo como 
      chart.serie = data.serie*/ 
      chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 
        148.5, 216.4, 194.1, 95.6, 
        54.4, 29.9, 71.5, 106.4] );
      });
      
      
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
fecha inicio<input type="text" id="inicio" name="inicio"/>
fecha fin <input type="text" id="fin" name="fin"/>
<button id="button">Agregar Fecha</button>

    $('#button').click(function() {
    //validamos las fechass
    var fecha_inicio = $('#inicio').val();
    var fecha_fin = $('#fin').val();
        $.ajax({
        url: "https://jsonplaceholder.typicode.com/posts/",
        method: "GET",
        data: { fecha_inicio: fecha_inicio, fecha_fin: fecha_fin }
      }).done(function(data) {
      /* en mi caso esta en duro pero si recibes los valores deberian ser todos 
       as series por tanto deberia ser algo como 
       chart.serie = data.serie*/ 
        chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 
                                 148.5, 216.4, 194.1, 95.6, 
                                 54.4, 29.9, 71.5, 106.4] );
      });


    });
});

link if you want to refresh in wordpres through your code is the following (I have not tried it just by logic):

<script 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<input type="date" name="fechaini" style="width: 50%; display: inline-block;"><input type="date" name="fechafin" style="width: 50%; display: inline-block;">
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto;"></div>
<?php
$fecha_inicio = isset($_GET['fecha_inicio']) ? $_GET['fecha_inicio'] : '2017-05-28'
$fecha_fin = isset($_GET['fecha_fin']) ? $_GET['fecha_fin'] : '2017-06-01'
?>

<script>
[insert_php]
$fecha_inicio = isset($_GET['fecha_inicio']) ? $_GET['fecha_inicio'] : '2017-05-28'
$fecha_fin = isset($_GET['fecha_fin']) ? $_GET['fecha_fin'] : '2017-06-01'
global $wpdb;
$arregloDatos = [];
//parametro1
$arregloDatos[] = $wpdb->query( "SELECT * FROM nombre_de_tabla WHERE nombre_campo LIKE '%parametro1%'AND fecha_created BETWEEN '$fecha_inicio' AND '$fecha_fin'" );
//parametro2
$arregloDatos[] = $wpdb->query( "SELECT * FROM nombre_de_tabla WHERE nombre_campo LIKE '%parametro2%'AND fecha_created BETWEEN '$fecha_inicio' AND '$fecha_fin'" );
//parametro3
$arregloDatos[] = $wpdb->query( "SELECT * FROM nombre_de_tabla WHERE nombre_campo LIKE '%parametro3%'AND fecha_created BETWEEN '$fecha_inicio' AND '$fecha_fin'" );
//parametro4
$arregloDatos[] = $wpdb->query( "SELECT * FROM nombre_de_tabla WHERE nombre_campo LIKE '%parametro4%'AND fecha_created BETWEEN '$fecha_inicio' AND '$fecha_fin'");
//parametro5
$arregloDatos[]= $wpdb->query( "SELECT * FROM nombre_de_tabla WHERE nombre_campo LIKE '%parametro5%' AND fecha_created BETWEEN '$fecha_inicio' AND '$fecha_fin'" );
//arreglo a cadena separados por comas
$totalGrafico = implode(",", $arregloDatos);
[/insert_php]


$(function () {
$('#container').highcharts({
    title: {
        text: 'Titulo',
        x: -20 //center
    },
    subtitle: {
        text: 'Subtitulo',
        x: -20
    },
    xAxis: {
        categories: ['parametro1', 'parametro2', 'parametro3', 'parametro4', 'parametro5']
    },
    yAxis: {
        title: {
            text: 'Cantidad'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: ''
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    series: [{
        name: 'nombre_serie',
        data: [
        [insert_php]
        echo $totalGrafico;
        [/insert_php]

]
    }]
});
});
</script>
<form method="GET" action="miURL">
fecha inicio<input type="text" id="fecha_inicio" name="fecha_inicio"/>
fecha fin <input type="text" id="fecha_fin" name="fecha_fin"/>
<input type="submit">cambiar fecha</button>
</form>

Well, the response of @JackNavaRow helped me clarify my doubt.

The solution is in the following block of code:

//Formulario en html5
<form method="post">
<label for="fechaini" style="width: 50%; display: inline-block;">Fecha Inicial</label><label for="fechafin" style="width: 50%; display: inline-block;">Fecha Final</label>
<input type="date" name="fechaini" style="width: 50%; display: inline-block;"><input type="date" name="fechafin" style="width: 50%; display: inline-block;">
<br><input type="submit" id="enviar" value="Generar Gráfica" style="float: right;">
</form>

//Código en php
<?php
if(isset($_POST['fechaini'])){
$fechaini = $_POST['fechaini'];
}
if(isset($_POST['fechafin'])){
$fechafin = $_POST['fechafin'];
}
?>

The first part is an Html5 form that sends to php the dates selected by the user through the post method. In the second part the dates are captured with the variables of php $ fechaini and $ fechafin

Finally these variables are used in the SQL statement BETWEEN '$ fechaini' AND '$ fechafin'

If what you want to do is that when the user changes the date your chart is updated. What you should do is have 2 pages: The first one with the range of dates that the user is going to manipulate, and the second one embedded in the first and receiving the date variables, so that when the user changes the ranges do a REFRESH to the page that contains the Highchart script. This is what I did for a project some time ago.

I hope you serve, greetings.