Tengo varios gráficos uno en la página. El objetivo de estos gráficos es sincronizar los gráficos hasta un selector de rango (preferiblemente uno personalizado que permita selecciones de tiempo predefinidas ~1 día, ~7 días, ~30 días, etc.). Algo que es similar a la de Grafana y su diseño.
Imagina el siguiente diseño
---- Range Selector ---- |||||||||||||||||||||||| ------- Graph 1 -------- |||||||||||||||||||||||| ------- Graph 2 -------- He buscado en los foros de Highcharts una respuesta y dentro de la documentación y no he encontrado nada más que hacer uso de la referencia de API master-detail
Si alguien ha intentado algo similar, o ha visto otro marco que podría ayudarme mejor en la dirección que deseo tomar, agradecería cualquier aporte.
Todo lo que necesita hacer es conectar el rango del navegador con los extremos de los ejes x usando el método setExtremes . El siguiente ejemplo utiliza un navegador de Highstock.
xAxis: { ..., events: { afterSetExtremes: function(e) { chart1.xAxis[0].setExtremes(e.min, e.max, true, false); chart2.xAxis[0].setExtremes(e.min, e.max, true, false); } } }Demostración en vivo: http://jsfiddle.net/BlackLabel/4Lfegyqa/
Referencia de la API: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes