¿Cómo crear un gráfico de rango de columnas en Highcharts usando funciones de rango y navegador?

Question 1

Tengo un requisito para trazar el historial de ejecución de una tarea en Highcharts. Debe mostrar ese historial de ejecución de las tareas como una barra horizontal. Hay requisitos adicionales que agregué como actualización a continuación. Recientemente descubrí que esa invertedopción no es compatible con StockChart y que solo el navegador y rangeSelector están disponibles en StockChart. Por lo tanto, estoy usando esas funciones.

Entonces, para lograr el requisito, creé algo similar a este ejemplo de jsfiddle (encontrado en algún lugar mientras navegaba, no recuerdo la fuente) y terminé con este enlace de plunker con la ayuda de mi pregunta anterior , gracias a Pawel Fus

Actualización de la pregunta para evitar confusiones

Requerimientos adicionales:

Muestra solo las tareas que se ejecutaron en una fecha y un intervalo de tiempo en particular . En caso de que haya demasiadas ejecuciones, como más de 10, debe haber una forma de mostrar solo 10 tareas de forma visible con un eje y que se pueda desplazar para mostrar otras tareas. enlace de plunker al problema

Explicación del problema del plunker anterior.

Si comprueba la captura de pantalla a continuación desde arriba, el rango de tiempo es de 12/12/2014 09:32:26hasta 12/12/2014 10:32:26y solo hay 2 tareas que se han ejecutado m_ARRAYV_SALES_ZIG1_CALL2_VOD__C_OB& m_ZIG2_HCP_MERGE_IB_CN. Sin embargo, puedo ver otra tarea intermedia LILLY_Cque ni siquiera se ejecutó en este rango de fecha y hora. (En datos reales, hay más de 10 tareas que abarrotan este gráfico y que ni siquiera se incluyen en este rango de fecha y hora)

Además, si nota que en la esquina inferior derecha, el tiempo cambió de 09:38a 19:20. 19:20es la hora de finalización de la m_ZIG2_HCP_MERGE_IB_CNtarea. ingrese la descripción de la imagen aquí A continuación se muestran mis opciones 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
        };

Question 2

Entonces, después de unas horas de investigación, acabo de descubrir al culpable (o eso espero). El problema es su definición de yAxisformateador de etiquetas:

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'
  }
},

En realidad, no comprueba si debe mostrar la etiqueta de acuerdo con task.intervals(ver json.js). Una simple actualización ( Plunker ) del formateador 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'
    }
  },

Consulte Plunker para ver una demostración .

El significado de las etiquetas yAxis es: Mostrar etiqueta si ve una corrida en el gráfico o si hay una corrida a la derecha del gráfico. Modifica la condición

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

como veas conveniente.

Descargo de responsabilidad: no uso Highcharts, por lo que esta respuesta intenta explicar el problema y no sugerir una forma de Highcharts de resolver el problema.

Lecciones aprendidas:

yaxis-plugin.js es irrelevante para el problema.
Highstock.js es una biblioteca de código abierto ( highstock.src.js ). Cualquier depuración es mucho más fácil si depura el código fuente original. El código minimizado agrega complejidad y adivinanzas innecesarias. Descargué la biblioteca y agregué algunas console.log()para averiguar qué está pasando.