0

Tengo un problema con mi gráfico en Highstock. Al enviar la serie, algunos puntos en el gráfico no se dibujan y por ende no se unen. Lo raro es que son solo algunos, aquí les dejo la imagen:

Grafico cone error

function createChart(data) {

  Highcharts.setOptions(options); //el objeto "options" se levanta del script "configuracion.js"

  chart = new Highcharts.StockChart({

    chart: {
      renderTo: container,
      type: 'line'
    },

    colors: ['#3131F8', '#FB1C1C', '#008000', '#f7a35c', '#8085e9',
      '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'
    ],

    xAxis: {
      range: ocultarEtiquetas ? 24 * 3600 * 1000 : undefined,
      endOnTick: true
    },

    yAxis: {
      opposite: false,

      showLastLabel: true,

      labels: {
        enabled: ocultarEtiquetas ? false : true,
      },

      title: {
        text: ocultarEtiquetas ? null : 'UEE'
      }
    },

    rangeSelector: {
      enabled: ocultarEtiquetas ? false : true
    },

    tooltip: {
      pointFormatter: function() {
        var s = '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>';
        return s + Highcharts.numberFormat((this.y), 1, '.') + ' UEE</b><br/>';
      }
    },

    legend: {
      enabled: true
    },

    navigation: {
      buttonOptions: {
        enabled: ocultarEtiquetas ? false : true
      }
    },

    series: data
  });
}

function actualizarMinMax() {
  console.log("actualizarMinMax");
}


var container = document.querySelector("#container");
var margen = 0.05;
var options = {
  lang: {
    contextButtonTitle: "Menú",
    decimalPoint: ".",
    downloadJPEG: "Descargar JPEG",
    downloadPDF: "Descargar PDF",
    downloadPNG: "Descargar PNG",
    downloadSVG: "Descargar SVG",
    invalidDate: undefined,
    loading: "Cargando...",
    months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Augosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
    noData: "Sin datos para mostrar",
    numericSymbols: ["k", "M", "G", "T", "P", "E"],
    printChart: "Imprimir gráfico",
    rangeSelectorFrom: "Desde",
    rangeSelectorTo: "Hasta",
    rangeSelectorZoom: "Zoom",
    resetZoom: "Reset zoom",
    resetZoomTitle: "Reset zoom a nivel 1:1",
    shortMonths: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
    shortWeekdays: undefined,
    thousandsSep: "",
    weekdays: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"]
  },

  chart: {
    renderTo: 'container',
    //backgroundColor: '#F5F5F5',
    zoomType: 'x',
    events: {
      load: function() {
        $('#container').css('cursor', 'pointer');
        $("#tablasSumarizacion").show();
      },

      redraw: function(event) {
        actualizarMinMax();
      }
    }
  },

  colors: ['#72A14A', '#EE7F00', '#004A80', '#f7a35c', '#8085e9',
    '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'
  ],

  credits: {
    enabled: false
  },

  title: {
    text: '',
    align: 'left',
    style: {
      color: '#5484D5',
      fontFamily: 'Tahoma',
      fontSize: '16px',
      fontWeight: 'bold'
    }
  },

  rangeSelector: {
    selected: 4,
    inputEnabled: false,
    buttonSpacing: 30,
    buttons: [{
      type: 'day',
      count: 1,
      text: '1 día'
    }, {
      type: 'week',
      count: 1,
      text: '1 sem'
    }, {
      type: 'month',
      count: 1,
      text: '1 mes'
    }, {
      type: 'year',
      count: 1,
      text: '1 año'
    }, {
      type: 'all',
      text: 'Todo'
    }],
    buttonTheme: {
      width: 60
    }
  },

  yAxis: {
    endOnTick: false,
    maxPadding: 0.05,
    max: null,
    min: null,
    minRange: 0.1
  },

  plotOptions: {
    series: {
      dataGrouping: {
        approximation: 'high',
        dateTimeLabelFormats: {
          millisecond: ['%A %e %b, %H:%M:%S.%L', '%A %e %b, %H:%M:%S.%L', '-%H:%M:%S.%L'],
          second: ['%A %e %b, %H:%M:%S', '%A %e %b, %H:%M:%S', '-%H:%M:%S'],
          minute: ['%A %e %b, %H:%M', '%A %e %b, %H:%M', '-%H:%M'],
          hour: ['%A %e %b, %H:%M', '%A %e %b, %H:%M', '-%H:%M'],
          day: ['%A %e %b, %Y', '%A %e %b', '-%A %e %b, %Y'],
          week: ['Semana del %A %e %b, %Y', '%A %e %b', '-%A %e %b, %Y'],
          month: ['%B %Y', '%B', '-%B %Y'],
          year: ['%Y', '%Y', '-%Y']
        }
      },

      gapSize: 1,
      lineWidth: 1.2,
      states: {
        hover: {
          enabled: false
        }
      }
    }
  },

  tooltip: {
    dateTimeLabelFormats: {
      millisecond: '%A %e %b, %H:%M:%S.%L',
      second: '%A %e %b, %H:%M:%S',
      minute: '%A %e %b %Y, %H:%M',
      hour: '%A %e %b, %H:%M',
      day: '%A %e %b, %Y',
      week: 'Semana del %A %e %b, %Y',
      month: '%B %Y',
      year: '%Y'
    }
  }
}

var ocultarEtiquetas = false;
{
var data = [{
    "name":"Saldo UEE",
    "data": [
      [1540306140000, 25],
      [1540308000000, 25],
      [1540309860000, 25],
      [1540311780000, 25],
      [1540313580000, 25],
      [1540315440000, 25],
      [1540317300000, 25],
      [1540319160000, 25],
      [1540321020000, 24],
      [1540322940000, 24],
      [1540324800000, 24],
      [1540326600000, 24],
      [1540328460000, 24],
      [1540330320000, 23],
      [1540332180000, 23],
      [1540334100000, 23],
      [1540335900000, 23],
      [1540337820000, 23],
      [1540339680000, 23],
      [1540341540000, 22],
      [1540343340000, 22],
      [1540345200000, 22],
      [1540347060000, 22],
      [1540348920000, 22],
      [1540350840000, 22],
      [1540352700000, 22],
      [1540354560000, 22],
      [1540356360000, 22],
      [1540358220000, 22],
      [1540360080000, 22],
      [1540362000000, 21],
      [1540363800000, 21],
      [1540365720000, 21],
      [1540367520000, 21],
      [1540369380000, 21],
      [1540371240000, 21],
      [1540373100000, 21],
      [1540374960000, 20],
      [1540376880000, 20],
      [1540378680000, 20],
      [1540380540000, 20],
      [1540382400000, 20],
      [1540384260000, 20],
      [1540386180000, 20],
      [1540388040000, 19],
      [1540389900000, 19],
      [1540391700000, 19],
      [1540393560000, 18],
      [1540395420000, 18],
      [1540397340000, 17],
      [1540399140000, 17],
      [1540401060000, 17],
      [1540402860000, 17],
      [1540404720000, 17],
      [1540406640000, 17],
      [1540408440000, 17],
      [1540410300000, 17],
      [1540412220000, 17],
      [1540414080000, 17],
      [1540415880000, 16],
      [1540417740000, 16],
      [1540419600000, 15],
      [1540421460000, 14],
      [1540423380000, 14],
      [1540425180000, 13],
      [1540425600000, 12],
      [1540428900000, 12],
      [1540430760000, 12],
      [1540432620000, 12],
      [1540434480000, 12],
      [1540436340000, 12],
      [1540438200000, 12],
      [1540440120000, 12],
      [1540441920000, 12],
      [1540443840000, 12],
      [1540445400000, 11],
      [1540447260000, 11],
      [1540449120000, 11],
      [1540450920000, 11],
      [1540452840000, 11],
      [1540454640000, 11],
      [1540456560000, 11],
      [1540458420000, 10],
      [1540460280000, 10],
      [1540462140000, 10],
      [1540463940000, 36],
      [1540465080000, 36],
      [1540466880000, 36],
      [1540468800000, 36],
      [1540470660000, 36],
      [1540472520000, 36],
      [1540474380000, 35],
      [1540476240000, 34],
      [1540478040000, 34],
      [1540479900000, 34],
      [1540481760000, 34],
      [1540483680000, 34],
      [1540485540000, 33],
      [1540487340000, 33],
      [1540489200000, 33],
      [1540491120000, 33],
      [1540492980000, 33],
      [1540494840000, 33],
      [1540496700000, 33],
      [1540498500000, 33],
      [1540500420000, 33],
      [1540502280000, 33],
      [1540504080000, 32],
      [1540506000000, 31],
      [1540507860000, 31],
      [1540509720000, 31],
      [1540511580000, 31],
      [1540513440000, 31],
      [1540515240000, 31],
      [1540517100000, 30],
      [1540518960000, 30],
      [1540520880000, 30],
      [1540522740000, 30],
      [1540524540000, 30],
      [1540526460000, 30],
      [1540528320000, 30],
      [1540530180000, 30],
      [1540532040000, 30],
      [1540533900000, 30],
      [1540535700000, 29],
      [1540537620000, 29],
      [1540539480000, 29],
      [1540541340000, 29],
      [1540543200000, 29],
      [1540545060000, 29],
      [1540546920000, 29],
      [1540548780000, 29],
      [1540550640000, 29],
      [1540550820000, 55],
      [1540552620000, 55],
      [1540554480000, 55],
      [1540556400000, 55],
      [1540558200000, 55],
      [1540560120000, 54],
      [1540561980000, 53],
      [1540563840000, 53],
      [1540565640000, 53],
      [1540567500000, 53],
      [1540569420000, 53],
      [1540571220000, 53],
      [1540573080000, 53],
      [1540574940000, 52],
      [1540576860000, 52],
      [1540578720000, 52],
      [1540580520000, 52],
      [1540582440000, 52],
      [1540584240000, 52],
      [1540586100000, 51],
      [1540588020000, 51],
      [1540589880000, 50],
      [1540591680000, 50],
      [1540593600000, 50],
      [1540595400000, 50],
      [1540597260000, 50],
      [1540599180000, 50],
      [1540601040000, 49],
      [1540602840000, 49],
      [1540604700000, 49],
      [1540606620000, 49],
      [1540608480000, 49],
      [1540610280000, 49],
      [1540612140000, 49],
      [1540614000000, 49],
      [1540615920000, 49],
      [1540617720000, 49],
      [1540619580000, 49],
      [1540621500000, 48],
      [1540623360000, 48],
      [1540625220000, 48],
      [1540627080000, 48],
      [1540628940000, 47],
      [1540630800000, 47],
      [1540632660000, 47],
      [1540634520000, 47],
      [1540636320000, 47],
      [1540638240000, 47],
      [1540640040000, 47],
      [1540641960000, 46],
      [1540643820000, 45],
      [1540645620000, 44],
      [1540647540000, 44],
      [1540649340000, 44],
      [1540651200000, 43],
      [1540653120000, 43],
      [1540654980000, 43],
      [1540656840000, 43],
      [1540658640000, 43],
      [1540660560000, 43],
      [1540662360000, 42],
      [1540664280000, 42],
      [1540666140000, 42],
      [1540668000000, 42],
      [1540669800000, 42],
      [1540671660000, 42],
      [1540673580000, 42],
      [1540675440000, 41],
      [1540677240000, 40],
      [1540679160000, 40],
      [1540680960000, 40],
      [1540682820000, 40],
      [1540684680000, 40],
      [1540686540000, 40],
      [1540688460000, 40],
      [1540690260000, 40],
      [1540692120000, 40],
      [1540694040000, 40],
      [1540695840000, 40],
      [1540697700000, 40],
      [1540699620000, 39],
      [1540701480000, 39],
      [1540703340000, 39],
      [1540705140000, 39],
      [1540707060000, 39],
      [1540708920000, 39],
      [1540710780000, 39],
      [1540712640000, 39],
      [1540714440000, 39],
      [1540716360000, 39],
      [1540718160000, 38],
      [1540720080000, 38],
      [1540721880000, 38],
      [1540723740000, 38],
      [1540725660000, 38],
      [1540727460000, 38],
      [1540729320000, 38],
      [1540731180000, 38],
      [1540733100000, 37],
      [1540734960000, 37],
      [1540736760000, 37],
      [1540738620000, 37],
      [1540740540000, 37],
      [1540742400000, 37],
      [1540744200000, 37],
      [1540746060000, 37],
      [1540747920000, 37],
      [1540749780000, 37],
      [1540751700000, 37],
      [1540753500000, 36],
      [1540755360000, 36],
      [1540757280000, 36],
      [1540759080000, 35],
      [1540760940000, 35],
      [1540762800000, 35],
      [1540764660000, 34],
      [1540766520000, 34],
      [1540768440000, 33],
      [1540770300000, 33],
      [1540772160000, 33],
      [1540774020000, 33],
      [1540775880000, 33],
      [1540777740000, 33],
      [1540779600000, 32],
      [1540781400000, 32],
      [1540783260000, 32],
      [1540785120000, 32],
      [1540787040000, 32],
      [1540788840000, 32],
      [1540790760000, 32],
      [1540792620000, 32],
      [1540794480000, 31],
      [1540796340000, 31],
      [1540798140000, 31],
      [1540800060000, 31],
      [1540801920000, 31],
      [1540803780000, 31],
      [1540805580000, 31],
      [1540807440000, 31],
      [1540809360000, 31],
      [1540811220000, 31],
      [1540813080000, 31],
      [1540814940000, 31],
      [1540816740000, 30],
      [1540818600000, 30],
      [1540820520000, 30],
      [1540822320000, 30],
      [1540824180000, 30],
      [1540826040000, 30],
      [1540827960000, 30],
      [1540829820000, 30],
      [1540831620000, 30],
      [1540833540000, 30],
      [1540835400000, 29],
      [1540837260000, 29],
      [1540839120000, 29],
      [1540840920000, 29],
      [1540842840000, 29],
      [1540844700000, 29],
      [1540846560000, 29],
      [1540848360000, 28],
      [1540850280000, 27],
      [1540852140000, 27],
      [1540853940000, 27],
      [1540855800000, 27],
      [1540857720000, 26],
      [1540859580000, 26],
      [1540861440000, 26],
      [1540863240000, 26],
      [1540865160000, 26],
      [1540867020000, 26],
      [1540868880000, 26],
      [1540870740000, 26],
      [1540872540000, 26],
      [1540874460000, 26],
      [1540876260000, 26],
      [1540878120000, 26],
      [1540880040000, 25],
      [1540881900000, 25],
      [1540883700000, 25],
      [1540885560000, 25],
      [1540887480000, 25],
      [1540889340000, 25],
      [1540891200000, 25],
      [1540893000000, 25],
      [1540894920000, 25],
      [1540896780000, 25],
      [1540898640000, 25],
      [1540900440000, 25],
      [1540902360000, 25],
      [1540904220000, 24],
      [1540906080000, 24],
      [1540907880000, 23],
      [1540909800000, 22]
    ]}]
};

createChart(data);
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="container"></div>

4
  • Es mas fácil encontrar el posible error si compartes todo el código para poderlo replicar
    – DjCrazy
    Commented el 31 oct. 2018 a las 16:25
  • Gracias! Ahi los agregue.
    – ZottoSL
    Commented el 31 oct. 2018 a las 17:14
  • 2
    Intenté ponerlo para que se pudiera ver el problema en la propia pregunta... pero falta información. Lee Cómo preguntar y cómo crear un ejemplo mínimo verificable para más información.
    – Alvaro Montoro
    Commented el 31 oct. 2018 a las 17:44
  • Hola, tengo una duda cómo has puesto el Eje x en español? Siempre me sale Enero como January, como puedo cambiarlo al español?. Un saludo
    – Manolait
    Commented el 16 oct. 2020 a las 12:09

1 respuesta 1

5

Encontré el problema.

El mismo radicaba en que en las opciones por defecto, el valor de plotOptions.series.gapSize estaba en 1, y mis intervalos en el eje X pueden ser totalmente diferentes unos de otros. gapSize lo que hace de alguna manera es establecer espacios absolutos, lo que hacia que mi grafico simplemente desapareciera. Es algo complejo de entender pero asi lo explica la documentacion oficial: https://api.highcharts.com/highstock/plotOptions.series.gapSize

Simplemente lo que hice fue agregar el siguiente código al script del gráfico:

plotOptions: {
   series: {
      gapSize: 0
   }
},

Y boom, el gráfico se muestra correctamente.

1
  • 1
    genial!! agrega especificamente lo que agregaste a tu codigo, y ven mañana a marcar tu pregunta como aceptada!! Commented el 31 oct. 2018 a las 17:31

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.