Highchart DatePicker

Question

Я пытаюсь заставить jquery-ui datepicker работать с старшими диаграммами, чтобы пользователь мог выбрать дату, например

Пользователь выбирает с 10 октября по 25 октября

Однажды пользовательвыбрал даты, которые должна перерисовать старшая диаграмма и показать часы для проектов, которые были выполнены вместе с задачами.Моя диаграмма выглядит следующим образом:

Диаграмма

На фото в данный момент на старшей диаграмме показаны часы, которые пользователь потратил на выполнение задания против проекта «Asda».

На данный момент у меня на графике просто отображаются часы текущей недели.То, что я пытаюсь сделать, это использовать указатель даты jquery, чтобы он мог отображать прошедшие часы, которые пользователь ввел.Если пользователь выбирает «с 10 октября» по «25 октября», диаграмма должна перерисоваться и показать часы и проекты для выбранного диапазона дат.

Мой код выглядит следующим образом:

Index.html.erb

<%= javascript_include_tag 'highcharts', 'exporting' %>

<%= render 'projectselect' %>

<div class = 'right'>
<label for="from">From</label>
<input type="text" id="from" name="from" size="15"/>
<label for="to">to</label>
<input type="text" id="to" name="to" size="15"/>
</div>

<button id="button">Redraw</button>


<div id="container" style="height: 400px"></div>

<script>
$(document).ready(function() {var chart = new Highcharts.Chart(options);});
onchange: $(function() {
        var dates = $( "#from, #to" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 1,
            onSelect: function( selectedDate ) {
                var option = this.id == "from" ? "minDate" : "maxDate",
                    instance = $( this ).data( "datepicker" ),
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings );
                dates.not( this ).datepicker( "option", option, date );
            }
        });
    });

$('#button').click(function() {
    chart.redraw();
});

var options = {
    chart: {
         renderTo: 'container',
         defaultSeriesType: 'column'
      },
      title: {
          text: '<%= current_user.username %>',
      },
      subtitle: {
         text: 'Project Hours'
      },
      xAxis: {
         categories: [
            'Pre-Sales',
            'Project',
            'Fault Fixing',
            'Support',
            'Out Of Hours',
            'Sick',
            'Toil',
            'Leave'  
         ]
      },
      yAxis: {
         min: 0,
         title: {
            text: 'Hours'
         }
      },
        plotOptions: {
         series: {
            stacking: 'normal'

         }
      },ip: {
         formatter: function() {
            return ''+
               this.x +': '+ this.y +' Hours';
         }
      },

      credits: {
         text: '',
         href: ''
      },

      exporting: {
         enabled: true,
         filename: 'Project-Hours'
      },

      plotOptions: {
         column: {
            pointPadding: 0.3,
            borderWidth: 0
         }
      },

      series: [
      <% @users_projects.each do |users_project| %>
                <% if !users_project.user.nil? && current_user.full_name == users_project.user.full_name %>
                  <% @data.each do |data| %>
            <% if data[ :values ] == [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0] %>
            <% else %>
              <% if data[ :name ] == users_project.project.project_name %>
              {
                name: '<%= data[ :name ] %>',
                data: [
                <% data[ :values ].each do |value| %>
                 <%= value %>,
                <% end %>
                ]
              },
              <% end %>
          <% end %>
                <% end %>
      <% else %>
      <% end %>
            <% end %>
      ]
};
</script>

Как лучше всего подойти к этому?

Answer 1

При onSelect обратном вызове средств выбора даты вы должны проверить, если выбраны оба параметра #from и #to (или предоставить разумные значения по умолчанию, если нет), а также в конце запуска и запроса xhr на сервер для получения новой серии данных.

onSelect: function( selectedDate ) {
  var option = this.id == "from" ? "minDate" : "maxDate",
  instance = $( this ).data( "datepicker" ),
    date = $.datepicker.parseDate(
      instance.settings.dateFormat || $.datepicker._defaults.dateFormat,
      selectedDate,
      instance.settings
    );
    dates.not( this ).datepicker( "option", option, date );

    // validate if we have both dates and get new series from server
    if ($(dates[0]).datepicker("getDate") &&
        $(dates[1]).datepicker("getDate")) {
      $.ajax({
        type: 'POST',
        url: '<%= user_projects_path(params[:user_id]) %>',
        data: {"from": $(dates[0]).datepicker("getDate"), "to" : $(dates[1]).datepicker("getDate") },
        success: function(data) {
          // now we have new series of data to display in graph
          // we remove the old one, add the new and redraw the chart
          for(var i=0; i<chart.series.length; i++) {
            chart.get(chart.series[i].options.id).remove();
          }

          // fiddle with json data from xhr response to form valid series
          var series = data; 
          chart.addSeries(series, true); // second param says we want to redraw chart
        }
      });
    }
}

Должен существовать метод контроллера в user_projects_path url и возвращать данные серии в формате JSON для данного user_id курса.Вы можете отфильтровать данные ряда перед возвратом с помощью параметров, отправленных запросом jquery xhr (from и to).

Быстрое и грязное решение, но я надеюсь, что вы поняли ...