Como criar um gráfico de intervalo de coluna em Highcharts usando funções de intervalo e navegador?

Eu tenho um requisito para traçar o histórico de execução de uma tarefa em Highcharts. Ele precisa mostrar esse histórico de execução das tarefas como uma barra horizontal. Existem requisitos adicionais que adicionei como uma atualização abaixo. Recentemente, descobri que a invertedopção não é compatível com StockChart e que apenas navigator & rangeSelector estão disponíveis no StockChart. Portanto, estou usando essas funções.

Então, para cumprir o requisito, criei algo semelhante a este exemplo jsfiddle (encontrado em algum lugar durante a navegação, não lembro a fonte) e acabei com este link de êmbolo com a ajuda da minha pergunta anterior , graças a Pawel Fus

Atualizando a pergunta para evitar confusão

Requisitos adicionais:

Mostrar apenas as tarefas que corriam em uma determinada data e hora gama . No caso de haver muitas execuções, como mais de 10 execuções, deve haver uma maneira de exibir apenas 10 tarefas visivelmente com um eixo y que pode ser rolado para mostrar outras tarefas. plunker link para o problema

Explicação do problema do êmbolo acima.

Se você verificar a imagem abaixo do plunker acima, o intervalo de tempo é de 12/12/2014 09:32:26a 12/12/2014 10:32:26e existem apenas 2 tarefas que foram executadas m_ARRAYV_SALES_ZIG1_CALL2_VOD__C_OB& m_ZIG2_HCP_MERGE_IB_CN. No entanto, posso ver outra tarefa entre as LILLY_Cquais nem mesmo foi executada neste intervalo de data e hora. (Em dados reais, há mais de 10 tarefas que confundem este gráfico, que nem mesmo se enquadra neste intervalo de data e hora)

Além disso, se você notar no canto inferior direito, o tempo mudou de 09:38para 19:20. 19:20é a hora de término da m_ZIG2_HCP_MERGE_IB_CNtarefa. Abaixo estão minhas opções de gráfico

    var chart_options = {
            chart: {
                renderTo: 'container',
                height: 600
            },
            title: {
            },
            credits: {
                enabled: false
            },
            xAxis: {
                type: 'datetime',
                gridLineWidth: 1,
                tickInterval: 1 * 3600 * 1000,
                dateTimeLabelFormats: {
                    month: '%b %e, %Y'
                }
            },
            yAxis: {                    
                tickInterval: 1,
                gridLineWidth: 1,
                labels: {
                    formatter: function() {
                        if (tasks[this.value]) {
                            return tasks[this.value].name;
                        }
                    }
                },
                startOnTick: false,
                endOnTick: false,
                title: {
                    text: 'Task'
                }
            },
            rangeSelector: {
                selected: 0,
                buttons: [ {
                    type: "minute",
                    count: 60,
                    text: "1h"
                }, {
                    type: "minute",
                    count: 180,
                    text: "3h"
                }, {
                    type: "minute",
                    count: 300,
                    text: "5h"
                }],
                inputDateFormat: '%m/%d/%Y %H:%M:%S',
                inputEditDateFormat: '%m/%d/%Y %H:%M:%S',
                inputBoxWidth: 120
            },
            navigator: {
                enabled: false
            },
            legend: {
                enabled: false
            },
            tooltip: {
                shared: false,
                formatter: function() {
                    var str = '';
                    str += 'Task: ' + this.series.name + '<br>';
                    str += 'From: ' + Highcharts.dateFormat('%m/%d/%y %H:%M', this.point.from) + '<br>';
                    str += 'To: ' + Highcharts.dateFormat('%m/%d/%y %H:%M', this.point.to) + '<br>';
                    return str;
                }
            },
            plotOptions: {
                line: {
                    lineWidth: 10,
                    marker: {
                        enabled: true
                    },
                    dataLabels: {
                        enabled: true,
                        align: 'left',
                        formatter: function() {
                            return this.point.options && this.point.options.label;
                        }
                    },
                    states:{
                        hover:{
                            lineWidth:10
                        }
                    }
                },
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function () {
                                var query = '{ "task_id": "'+this.task_id+'","start_time": '+this.from+',"exclude_interval": '+opExcludeMinutes+',"size": 10 }';
                                $scope.taskName = this.series.name;
                                $scope.isTaskSelected = false;
                                $scope.operationalReportAgentTaskHistoryServiceRequest(query);
                            }
                        }
                    }
                }
            },
            series: seriesData
        };

Então, depois de algumas horas de escavação, acabei de descobrir o culpado (ou realmente espero que sim). O problema é a sua definição de yAxisformatador de etiqueta:

yAxis: {
  tickInterval: 1,
    gridLineWidth: 1,
    labels: {
    formatter: function() { // THIS IS THE PROBLEM
      if (tasks[this.value]) {
        return tasks[this.value].name;
      }
    }
  },
  startOnTick: false,
    endOnTick: false,
    title: {
    text: 'Task'
  }
},

Na verdade, você não verifica se deve exibir o rótulo de acordo com task.intervals(consulte json.js). Uma atualização simples ( Plunker ) do formatador parece funcionar:

  yAxis: {
    tickInterval: 1,
    gridLineWidth: 1,
    labels: {
      formatter: function () {
        console.log("scripts.js - yAxis.labels.formatter", this.value);
        if (tasks[this.value]) {

          //if (tasks[this.value].name === 'LILLY_C') {
            var _xAxis = this.chart.axes[0];
            var _task = tasks[this.value];
            var _show = false;

            // Not optimized for large collections
            for (var _i = 0; _i < _task.intervals.length; _i++) {
              var _int = _task.intervals[_i];
              if (_xAxis.min <= _int.to) {
                _show = true;
              }
            }

            console.log("scripts.js - yAxis.labels.formatter",
              tasks[this.value].name,
              _show,
              _xAxis.min,
              _xAxis.max,
              _task.intervals
            );

            if (_show) {
              return tasks[this.value].name;
            } else {
              return;
            }
          //}

          //return tasks[this.value].name;
        }
      }
    },
    startOnTick: false,
    endOnTick: false,
    title: {
      text: 'Task'
    }
  },

Veja Plunker para demonstração .

O significado dos rótulos yAxis é: Mostrar rótulo se você vir uma execução no gráfico ou se houver uma execução à direita do gráfico. Modifique a condição

if (_xAxis.min <= _int.to) {

como você achar melhor.

Disclaimer: Eu não uso Highcharts, então esta resposta tenta explicar o problema e não sugerir uma forma de Highcharts de resolver o problema.

Lições aprendidas:

• yaxis-plugin.js é irrelevante para o problema.
• Highstock.js é uma biblioteca de código aberto ( highstock.src.js ). Qualquer depuração é muito mais fácil se você depurar o código-fonte original. O código reduzido adiciona complexidade e suposições desnecessárias. Baixei a biblioteca e adicionei alguns console.log()para descobrir o que está acontecendo.