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
};