charts + ajax

$(".header_bars").sparkline('html', {
  type: 'bar',
  height: '125',
  barWidth: 13,
  colorMap: {
    '7': '#a1a1a1'
  },
  barSpacing: 3,
  barColor: '#26B99A',
});

  var json;
  init_daterangepicker();
  function init_daterangepicker() {

    // if( typeof ($.fn.daterangepicker) === 'undefined'){ return; }
    // console.log('init_daterangepicker');

    var cb = function(start, end, label) {
      console.log(start.toISOString(), end.toISOString(), label);
      $('#home_graph span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    };

    var optionSet1 = {
      startDate: moment().subtract(29, 'days'),
      endDate: moment(),
      minDate: '01/01/2018',
      maxDate: '12/31/2018',
      dateLimit: {
      days: 120
      },
      showDropdowns: false,
      showWeekNumbers: false,
      timePicker: false,
      timePickerIncrement: 1,
      timePicker12Hour: false,
      ranges: {
      'Hoje': [moment(), moment()],
      'Ontem': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
      'Últimos 7 dias': [moment().subtract(6, 'days'), moment()],
      'Últimos 30 dias': [moment().subtract(29, 'days'), moment()],
      'Este Mês': [moment().startOf('month'), moment().endOf('month')],
      'Último Mês': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
      },
      alwaysShowCalendars : true,
      opens: 'left',
      buttonClasses: ['btn btn-default'],
      applyClass: 'btn-small btn-primary',
      cancelClass: 'btn-small',
      format: 'DD/MM/YYYY',
      separator: ' to ',
      locale: {
        applyLabel: 'Enviar',
        cancelLabel: 'Cancelar',
        fromLabel: 'From',
        toLabel: 'To',
        customRangeLabel: 'Customizado',
        daysOfWeek: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
        monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro']
      }
    };

    $('#home_graph span').html(moment().subtract(29, 'days').format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
    $('#home_graph').daterangepicker(optionSet1, cb);
    $('#home_graph').on('show.daterangepicker', function() {
      console.log("show event fired");
    });
    $('#home_graph').on('hide.daterangepicker', function() {
      console.log("hide event fired");
    });
    $('#home_graph').on('apply.daterangepicker', function(ev, picker) {
      console.log("apply event fired, start/end dates are " + picker.startDate.format('MMMM D, YYYY') + " to " + picker.endDate.format('MMMM D, YYYY'));
      $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
      });
      $.ajax({
        url:'/api/homegraph',
        type: "POST",
        dataType:'json',
        cache: false,
        data:{
          start_date:picker.startDate.format('YYYY-MM-DD'),
          end_date:picker.endDate.format('YYYY-MM-DD')},

        beforeSend: function() {
            //Ação antes de fazer o post dos dados.
        },
        success:function(json) {
            if(json.length > 0){
                values_chart = null;
                console.log(json.length);
                values_chart = json;
                init_chartsjs();
                console.log(values_chart);

            }
        },
        error:function(jqXHR, textStatus, errorThrown) {
            alert('Ocorreu um erro. Informe ao ADM do sistema.');
            console.log("error: " + textStatus);
            console.log("error Thrown: " + errorThrown);
            console.log("incoming Text: " + jqXHR.responseText);
        }
      });
      console.log(picker.startDate.format('YYYY-MM-DD'));
      console.log(picker.endDate.format('YYYY-MM-DD'));
    });
    $('#home_graph').on('cancel.daterangepicker', function(ev, picker) {
      console.log("cancel event fired");
    });
    $('#options1').click(function() {
      $('#home_graph').data('daterangepicker').setOptions(optionSet1, cb);
    });
    $('#options2').click(function() {
      $('#home_graph').data('daterangepicker').setOptions(optionSet2, cb);
    });
    $('#destroy').click(function() {
      $('#home_graph').data('daterangepicker').remove();
    });

  }



  // var values_chart = {
    //              labels: ["01/01/2018", "February", "March", "April", "May", "June", "July"],
    //              datasets: [
  //             {
  //               label: "SELIC 2019",
  //               backgroundColor: "rgba(38, 185, 154, 0.0)",
  //               borderColor: "rgba(38, 185, 154, 0.7)",
  //               data: [null,null , 30001.12, 74.12, 6, 39, 20, 85]
  //             },
  //             {
  //               label: "SELIC 2018",
  //               backgroundColor: "rgba(3, 88, 106, 0.1)",
  //               borderColor: "rgba(3, 88, 106, 0.70)",
  //               data: [82, 23, 66, 9, 99, 4, 2]
  //             },
  //             {
  //               label: "SELIC 2018",
  //               backgroundColor: "rgba(3, 88, 106, 0.1)",
  //               borderColor: "rgba(3, 88, 106, 0.70)",
  //               data: [123123, 23, 66, 9, 99, 4, 2]
  //             },

  //         ]
    //            };

function init_chartsjs(){
  var ctx = document.getElementById("myChart").getContext('2d');
  var myLineChart = new Chart(ctx, {
      type: 'line',
      data: values_chart,
      options: {
                responsive: true,
                title: {
                    display: true,
                    text: 'Chart.js Line Chart'
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Período'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Valor'
                        }
                    }]
                }
            }
  });
}


init_chartsjs();