Estoy tratando de trazar dos gráficos de líneas en un gráfico ZingChart y luchando para averiguar en qué formato debo pasar los datos.
Básicamente, tengo una serie de pares de fecha / hora para los datos de hoy y de la semana con intervalos de una hora, por ejemplo:
today = [[timestamp1, 1], [timestamp2, 4], ......, [timestamp18, 7]] <- asumiendo que ahora son las 6pm, así que no hay datos para el resto del día
week_ago = [[timestamp1, 4], [timestamp2, 7], ......, [timestamp23, 1]] <- datos completos de 24 horas
La serie x debe mostrar las horas de 00:00 a 23:00 y la serie y es solo un número entero. Además, en cada punto del gráfico, me gustaría que la información sobre herramientas muestre la fecha y el valor entero.
Suena muy simple y probablemente no lo sea, pero como soy bastante nuevo en ZingChart no puedo entenderlo.
Muchas gracias
Respuestas
7 para la respuesta № 1¿Es esto lo que estás tratando de hacer? Usé dos series objetos para contener mis datos: el primero contiene los datos de series de tiempo de hoy, y el segundo contiene los datos de series de tiempo de la semana pasada. Hay más información sobre datos de series de tiempo y escalas aquí.
A continuación, creé dos escalas de eje x. scaleX está vinculado al primer objeto de la serie (datos de hoy), y scaleX2 está vinculado al segundo objeto de la serie (oa los datos de la semana pasada). Tiene la opción de "mezcla" las dos escalas para que aparezcan en la misma línea del eje (pero esto se hace más comúnmente en el eje y). O puede desactivar la visibilidad del segundo eje x, que es lo que hice en la siguiente demostración.
Puedes por supuesto usar información sobre herramientas (desactivado en esta demo), punto de mira, y / o un leyenda para explicar con más detalle sus datos.
var myConfig = {
type: "line",
utc: true, //If set to false, this will default to UTC time.
timezone: -5, //Currently set to EST time. You can specify your desired time zone.
scaleX: {
minValue: 1471496400000,
maxValue: 1471579200000,
step: "hour",
transform: {
type: "date",
all: "%g%a"
},
label: {
text: "X-Axis"
},
item: {
fontSize: 10
},
maxItems: 24
},
scaleX2: {
minValue: 1470891600000,
maxValue: 1470974400000,
placement: "default",
blended: true,
visible: false,
step: "hour",
transform: {
type: "date",
all: "%g%a"
},
item: {
fontSize: 10
},
},
scaleY: {
values: "0:10:1",
label: {
text: "Y-Axis"
},
item: {
fontSize: 10
},
guide: {
lineStyle: "solid"
}
},
plot: {
tooltip: {
visible: false
}
},
crosshairX: {
plotLabel: {
multiple: true
}
},
series: [
{ //Today, or 08/18/16 until 6am
scales: "scaleX, scaleY",
values: [
[1471496400000, 3], //08/18/16 at midnight, EST time
[1471500000000, 7], //1am
[1471503600000, 5], //2am
[1471507200000, 9], //3am
[1471510800000, 4], //4am
[1471514400000, 5], //5am
[1471518000000, 2] //6am
],
text: "Today"
},
{ //Last Thursday, or 08/11/16, all 24 hours
scales: "scaleX2, scaleY",
values: [
[1470891600000, 5], //08/11/16 at midnight, EST time
[1470895200000, 6], //1am
[1470898800000, 4], //2am
[1470902400000, 9], //3am
[1470906000000, 1], //4am
[1470909600000, 5], //5am
[1470913200000, 6], //6am
[1470916800000, 3], //7am
[1470920400000, 5], //8am
[1470924000000, 7], //9am
[1470927600000, 8], //10am
[1470931200000, 2], //11am
[1470934800000, 3], //12am
[1470938400000, 1], //1pm
[1470942000000, 4], //2pm
[1470945600000, 6], //3pm
[1470949200000, 7], //4pm
[1470952800000, 3], //5pm
[1470956400000, 5], //6pm
[1470960000000, 6], //7pm
[1470963600000, 2], //8pm
[1470967200000, 3], //9pm
[1470970800000, 5], //10pm
[1470974400000, 4] //11pm
],
text: "Last Week"
}
],
legend: {
align: "center",
verticalAlign: "bottom",
marker: {
type: "circle",
size: 4,
showLine: true
},
borderWidth: 1
}
};
zingchart.render({
id : "myChart",
data : myConfig,
height: 400,
width: 600
});<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"></div>
</body>Espero que ayude. Estoy en el equipo de ZingChart, y puedes avisarme si tienes más preguntas. Familiarízate con nuestro Tutorial de escalas debería darle una buena base para trabajar con nuestra biblioteca.