javascript - graficas - node js
Necesita ayuda para trazar un gráfico utilizando diagramas altos en angularjs (2)
Estoy un poco confundido con tus requisitos (aún).
Highcharts, requiere marcas de tiempo (en ms) para representar. Por lo tanto, debe preprocesar las fechas, por ejemplo: new Date("2014-11-20T11:03:55.000-08:00").getTime() para obtener la marca de tiempo UTC. Ahora, cuando tiene horas UTC, puede usar moment.js como se sugiere arriba para representar datos en una zona horaria específica.
Para usar moment.js con Highcharts, puede extender la opción getTimezoneOffset (experimental), de esta manera:
Highcharts.setOptions({
global: {
/**
* Use moment-timezone.js to return the timezone offset for individual
* timestamps, used in the X axis labels and the tooltip header.
*/
getTimezoneOffset: function (timestamp) {
var zone = ''Europe/Oslo'',
timezoneOffset = moment.tz.zone(zone).parse(timestamp);
return timezoneOffset;
}
}
});
Y en vivo ejemplo: http://jsfiddle.net/k96t1dy7/3/
Nota: su segundo plunker no funciona ...
Nota 2: El caso de prueba anterior está utilizando la versión de Github de Highcharts. Es una versión candidata para Highcharts 4.1.
Tengo algunos datos que provienen de elasticsearch, que tiene el tiempo de inicio y fin de la task la task un agente en particular , que debe trazarse en el gráfico horizontalmente indicando el inicio y el final de esa tarea en particular. Intenté con el tipo de gráfico columnrange , pero como no pude acceder columnrange from selector de rango, mire aquí un ejemplo .
Por otra parte, probé esto y pude hacerlo funcionar, pero necesito ayuda para trazar los datos de Elasticsearch en los gráficos superiores.
Otro problema es que la fecha que obtengo del servidor se encuentra en formato de fecha legible para el ser humano (check start_time y end_time ), EST timezone y debe convertirse a un formato que pueda ser consumido por Highcharts. Por favor ayuda.
Mi directiva Highcharts
angular.module(''myApp'').directive(''operationalhighstackstock'', function() {
return {
restrict : ''E'',
scope : true,
link : function postLink(scope, element, attrs) {
scope.$watch(''operationHighChartsData'', function(values){
new Highcharts.StockChart(values);
});
}
};
});
Mi plantilla
<div style="width: 100%;">
<operationalhighstackstock></operationalhighstackstock>
<div id="container" style="width: 100%; height: 500px;"></div>
</div>
Mi controlador
angular.module(''myApp'').controller(''OperationReportChartController'', function($scope, $filter, $location, $transition, MyService, $timeout) {
$scope.init = function() {
$scope.isOperationalReport = true;
$scope.initOperationalReport();
}
$scope.initOperationalReport = function() {
$scope.loading = true;
$scope.isChartDataAvailable = true;
$scope.operationReportDefaultQuery = operationReportDefaultQuery;
$scope.operationHighChartsData = {
chart : {
renderTo : ''container'',
alignTicks : false
}
};
$scope.operationalReportDefaultServiceRequests();
}
$scope.serviceRequests = function() {
//Common service requests if any
}
$scope.operationalReportDefaultServiceRequests = function() {
$scope.isOperationalReport = true;
MyService.getOperationalReportChartData($scope.operationReportDefaultQuery).then(function(result) {
renderOperationalHighCharts(result);
});
}
function renderOperationalHighCharts(result) {
//var xAxisCategories = [''Jan'', ''Feb'', ''Mar'', ''Apr'', ''May'', ''Jun'', ''Jul'', ''Aug'', ''Sep'', ''Oct'', ''Nov'', ''Dec'']
//var series = getOperationReportChartSeriesData(result);
var chart_options = {
chart: {
renderTo: ''container''
},
xAxis: {
type: ''datetime''
},
yAxis: {
tickInterval: 1,
labels: {
formatter: function() {
if (tasks[this.value]) {
return tasks[this.value].name;
}
}
},
startOnTick: false,
endOnTick: false,
minPadding: 1,
maxPadding: 1
},
legend: {
enabled: false
},
plotOptions: {
line: {
lineWidth: 9,
marker: {
enabled: false
},
dataLabels: {
enabled: true,
align: ''left'',
formatter: function() {
return this.point.options && this.point.options.label;
}
}
}
},
series: series
};
$scope.operationHighChartsData = chart_options;
}
$scope.init();
});
En parte, los datos completos deben ser consumidos por Highcharts mostrando las tareas de inicio y finalización de un agente en particular.
{
"took": 43,
"timed_out": false,
"_shards": {
"total": 5,
"successful": 5,
"failed": 0
},
"hits": {
"total": 29,
"max_score": 1
},
"aggregations": {
"agent_names": {
"buckets": [
{
"key": "LUME - US AGG",
"doc_count": 4,
"top-sites": {
"buckets": [
{
"key": "000AAA0I00000000007W",
"doc_count": 2,
"top_tags_hits": {
"hits": {
"total": 2,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216934321",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:12:49.000-08:00",
"start_time": "2014-11-20T11:12:41.000-08:00"
}
},
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "234218016",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:12:49.000-08:00",
"start_time": "2014-11-20T11:12:41.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0I00000000007X",
"doc_count": 2,
"top_tags_hits": {
"hits": {
"total": 2,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216556106",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:04:33.000-08:00",
"start_time": "2014-11-20T11:04:28.000-08:00"
}
},
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "234218026",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:04:33.000-08:00",
"start_time": "2014-11-20T11:04:28.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0I00000000007Y",
"doc_count": 2,
"top_tags_hits": {
"hits": {
"total": 2,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "235761199",
"_score": 1,
"_source": {
"end_time": "2014-11-20T10:59:44.000-08:00",
"start_time": "2014-11-20T10:59:43.000-08:00"
}
},
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "217265041",
"_score": 1,
"_source": {
"end_time": "2014-11-20T10:59:44.000-08:00",
"start_time": "2014-11-20T10:59:43.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0G00000000006K",
"doc_count": 1,
"top_tags_hits": {
"hits": {
"total": 1,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "234732452",
"_score": 1,
"_source": {
"end_time": "2014-11-20T10:52:59.000-08:00",
"start_time": "2014-11-20T10:52:59.000-08:00"
}
}
]
}
}
}
]
}
},
{
"key": "USWF - 01D",
"doc_count": 8,
"top-sites": {
"buckets": [
{
"key": "000AAA0I00000000007T",
"doc_count": 3,
"top_tags_hits": {
"hits": {
"total": 3,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216603056",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:03:01.000-08:00",
"start_time": "2014-11-20T11:02:41.000-08:00"
}
},
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216957850",
"_score": 1,
"_source": {
"end_time": "2014-11-20T07:52:12.000-08:00",
"start_time": "2014-11-20T07:52:01.000-08:00"
}
},
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216839441",
"_score": 1,
"_source": {
"end_time": "2014-11-20T08:08:10.000-08:00",
"start_time": "2014-11-20T08:08:02.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0G00000000006M",
"doc_count": 2,
"top_tags_hits": {
"hits": {
"total": 2,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216839440",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:01:12.000-08:00",
"start_time": "2014-11-20T11:01:08.000-08:00"
}
},
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216603055",
"_score": 1,
"_source": {
"end_time": "2014-11-20T10:55:23.000-08:00",
"start_time": "2014-11-20T10:55:22.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0G00000000006K",
"doc_count": 1,
"top_tags_hits": {
"hits": {
"total": 1,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216981636",
"_score": 1,
"_source": {
"end_time": "2014-11-20T10:52:59.000-08:00",
"start_time": "2014-11-20T10:52:59.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0G00000000006L",
"doc_count": 1,
"top_tags_hits": {
"hits": {
"total": 1,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216650284",
"_score": 1,
"_source": {
"end_time": "2014-11-20T10:49:06.000-08:00",
"start_time": "2014-11-20T10:49:06.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0G00000000006N",
"doc_count": 1,
"top_tags_hits": {
"hits": {
"total": 1,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216768388",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:05:03.000-08:00",
"start_time": "2014-11-20T11:05:02.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0I00000000007N",
"doc_count": 1,
"top_tags_hits": {
"hits": {
"total": 1,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216981635",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:03:55.000-08:00",
"start_time": "2014-11-20T11:03:43.000-08:00"
}
}
]
}
}
}
]
}
}
]
}
}
}
Aquí está mi enlace plunker con angularjs
Actualizando el enlace plunker en progreso con el mapeo de datos con Highcharts
Actualizando el código de mapeo
var getOperationReportChartSeriesData = function(result) {
var series = {};
if (result != null && result != undefined) {
var bucket = result.aggregations[AGENT_NAMES].buckets;
bucket.forEach(function(item) {
var agentSeries = [], agentData = {}, opTaskIdBucket = item["top-sites"].buckets;
opTaskIdBucket.forEach(function(taskidEntry) {
var intervalBucket = taskidEntry["top_tags_hits"]["hits"]["hits"],
intervalArr = [], opTaskidObj = {};
opTaskidObj["name"] = taskidEntry["key"];
intervalBucket.forEach(function(intervalEntry) {
var intervalObj = {}, start_temp = intervalEntry["_source"].start_time, end_temp = intervalEntry["_source"].end_time;
var st = new Date(moment(start_temp).valueOf()).getTime();
var et = new Date(moment(end_temp).valueOf()).getTime();
intervalObj["to"] = et;
intervalObj["from"] = st;
intervalObj["x"] = st;
intervalObj["y"] = 1;
intervalArr.push(intervalObj);
})
opTaskidObj["data"] = intervalArr;
agentSeries.push(opTaskidObj);
})
series[item["key"]] = agentSeries;
})
} else
console.log("Result is "+result);
console.log(JSON.stringify(series));
console.log(series);
//console.log(JSON.stringify(series[0]["LUME - US AGG"]));
return series;
}
Actualizar
Lo siento por toda la confusion. Para simplificar dada una respuesta json (dada anteriormente), una función (getOperationReportChartSeriesData ()) preparará los datos de tal manera que Highcharts mostrará las tareas individuales y su historial de ejecución en una barra horizontal, donde x eje es la fecha y hora (incluyendo horas y minutos) y el eje y son tareas . Similar a la captura de pantalla proporcionada a continuación.
A continuación se muestra una captura de pantalla que es el resultado esperado.
haga clic aquí para ver el enlace jsfiddle
Actualizado con un enlace jsfiddle aquí, pero en esto también necesito navegación de StockChart y selectores de rango .
@Pawel Fus: Muchas gracias por tener paciencia conmigo. Este es el resultado final para cualquier persona que enfrenta problemas similares.
Si entiendo correctamente, ¿quiere analizar su objeto de fecha, que Highchart puede consumir? Puedes usar la biblioteca moment.js , funciona como un amuleto.