Highchart DatePicker

Question

Я пытаюсь получить JQuery-UI DatePicker работать с Highcharts, так что пользователь может выбрать дату пример будучи

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

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

Chart

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

На данный момент у меня диаграмма просто отображает часы текущей недели. То, что я пытаюсь сделать, это использовать jquery datepicker, чтобы он мог отображать прошедшие часы, которые пользователь ввел. Если пользователь выбирает «с 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 обратного вызова datepickers, вы должны проверить, если оба #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).

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