2

Tengo el siguiente código (ejemplo simplificado):

$(function () {
    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container'
        },

        xAxis: {
            type: 'datetime'
        },
        series: [{
            data: [
                [Date.UTC(2016, 0, 1), 29.9],               
                [Date.UTC(2016, 0, 2), 106.4],               
                [Date.UTC(2016, 0, 3), 75],
                [Date.UTC(2016, 0, 4), 129.2],
                [Date.UTC(2016, 1, 10), 176.0],
                [Date.UTC(2016, 1, 11), 176.0]

             ]
        }],

    });
});

Que me arroja el siguiente gráfico:

introducir la descripción de la imagen aquí

Como verán, existe una brecha de tiempo en que no hay datos, obteniendo un resultado poco estético, sobre todo cuando existen muchos puntos en ambos extremos. Lo que espero lograr es algo como esto:

introducir la descripción de la imagen aquí

Es decir que los puntos ploteados solo muestren las fechas que existan.

Nota: estoy utilizando Highcharts-4.2.6

5
  • has probado poniendo en el xAxis la variable tickInterval?
    – lois6b
    Commented el 17 nov. 2016 a las 12:44
  • Si, pero tickInterval lo único que me hace es poner mas o menos fechas entremedio de ambas fechas con datos. Commented el 17 nov. 2016 a las 12:47
  • No sé si existirá esa opción pero sería un poco raro no mantener la escala y que tramos de tiempo iguales tengan separaciones distintas, de hecho la gráfica parecería falseada, no me parece buena idea aunque se pudiera hacer.
    – user7176
    Commented el 17 nov. 2016 a las 13:02
  • La verdad que es útil, de hecho cuando haces un gráfico en excel queda de esa forma. Imagina que tienes 30 datos de enero del 2016 y no tienes más datos hasta diciembre del 2016 por un tema de estacionalidad de los datos, el gráfico se ve horrible. Quedan todos acumulados en enero perdiendo la legibilidad. Commented el 17 nov. 2016 a las 13:08
  • En excel no se como funciona. En Googlecharts, Chartjs y algun otro que he usado alguna vez no conozco esa opción (no digo que no exista). Highcharts creo que solo hice una prueba una vez pero no encuentro en la API nada para hacer eso. No dudo que sea cómodo pero me sigue pareciendo raro querer hacer eso
    – user7176
    Commented el 17 nov. 2016 a las 13:48

2 respuestas 2

3

Añade un punto de datos con un valor de undefined, dentro del tramo que quieras que no se muestre. Por ejemplo:

var chart = new Highcharts.Chart({

  chart: {
    renderTo: 'highcharts-container'
  },

  xAxis: {
    type: 'datetime'
  },
  series: [{
    data: [
      [Date.UTC(2016, 0, 1), 29.9],               
      [Date.UTC(2016, 0, 2), 106.4],               
      [Date.UTC(2016, 0, 3), 75],
      [Date.UTC(2016, 0, 4), 129.2],
      [Date.UTC(2016, 0, 5), undefined],
      [Date.UTC(2016, 1, 10), 176.0],
      [Date.UTC(2016, 1, 11), 176.0]
    ]
  }],

});

Véase un ejemplo completo aquí.

introducir la descripción de la imagen aquí

La parte importante es obviamente: [Date.UTC(2016, 0, 5), undefined],.

Si estás haciendo una gráfica que muestre el valor de un dato a intervalos determinados de tiempo (p. ej., un valor por día), entonces es una buena idea generar un punto para cada día, inclusive aquellos puntos para los que no tengas datos, y hacer que el valor de esos puntos sea explícitamente undefined.

En mi opinión, es importante que se mantenga la escala del eje X. Si quieres hacer tu gráfica más estética, tendrás que preguntarte en qué manera quieres distorsionar los ejes de datos.

Esto es posible con highcharts, pero tendrás que calcular manualmente los valores para el eje X, y proveer una función que dado uno de esos valores devuelva la etiqueta correspondiente.

2
  • Gracias por tu respuesta pero es lo mismo pero sin la línea que une los puntos en la brecha: Como comenté, Imagina que tienes 30 datos de enero del 2016 y 30 diciembre del 2016 por un tema de estacionalidad. Quedan todos acumulados en enero y en diciembre perdiendo la legibilidad. Commented el 17 nov. 2016 a las 18:16
  • Entonces (como he comentado el el último párrafo) deberías no usar fechas como unidades del eje X. Haz que el eje X represente otra cosa, p. ej. un valor que se incremente en 1 por cada día que tengas datos. Y como he dicho: «Tendrás que preguntarte en qué manera quieres distorsionar lso ejes de datos» Commented el 17 nov. 2016 a las 18:24
1

La pillé y era más fácil de lo que parecía:

$(function () {
    var chart = Highcharts.chart('container', {

        xAxis: {
            categories: ['04/Ene', '11/Ene', '18/Ene', '25/Ene', '18/Feb', '11/Feb']
        },

        series: [{
            data: [29.9, 106.4,75, 129.2, 176.0, 176.0]
        }]
    }); 
});

introducir la descripción de la imagen aquí

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.