0

I'm trying to put a preload. Currently I have 38 series. and I have a function to generate a preload animation called preload.show () and preload.hide (). When I try to generate my chart I invoke preload.show for animation, and when the animation ends preload.hide() attempt to invoke .

the idea is that the preload is displayed before the chart is ready, but the strange thing is that while charging does not show the preload, the preload is only about one second before finishing the animation. What I can do ?. I can not put my full code, then use it in my business and security policies so I can not do.

In short, the preload is not displayed from the moment I want to create my chart. This in a computer looks good, as I wish. but in This problem occurs in cell.

        preload.show();   //I generate the preload.
        $('#mychart').highcharts({
          chart: {
            type: 'bar',
            height: height
          },
          title: {
            text: 'Mi Chart'
          },
          xAxis: {
            categories: arrayCategories,
            title: {
              text: null
            },
            labels: {

              x: -5,
              y: -20,
              useHTML: true,
              formatter: function() {

                return  "<div class='position'>" +this.value+ "</div>";
            }
          },
          yAxis: {
            title: null
          },
          credits: {
            enabled: false
          },


          tooltip: {
            enabled: false,
          },
          "plotOptions": {
            "bar": {
                "pointPadding": 0,
                 "borderWidth": 0
             },
               series: {
                events: {
                  afterAnimate: function () {
                    preload.hide();
                  }
                },
                align:'right',
                borderWidth: 1,
                dataLabels: {
                enabled: true,
                style: {
                    fontWeight: false,
                    fontSize: '10px',
                },
                useHTML: true,
                formatter: function() {

                        return ( this.value);
                }

                },
                cursor: 'pointer',
                point: {
                    events: {
                        click: function () {

                        }
                    }
                }
              }
          },

         series: myArray  //38 series
      });
yavg
  • 2,761
  • 7
  • 45
  • 115
  • Have you looked at highchart's built-in method for this: http://api.highcharts.com/highcharts#loading? – wergeld Feb 22 '16 at 18:41
  • @wergeld yes, I've done does not work. It is the same – yavg Feb 22 '16 at 19:31
  • You have a lot of series, so probably chart is rendering a moment. Have you tried to create an empty chart with build-in loading feature and then add series in `chart.load` event? After adding series, hide loader. – Paweł Fus Feb 23 '16 at 11:44
  • @PawełFus is a good, idea. I had not thought so, but I'll try. and if I work not taking advantage of your kindness, I'll ask. do you think it's OK? – yavg Feb 23 '16 at 13:24
  • @PawełFus but you say, put the series in the load event of the chart? – yavg Feb 23 '16 at 13:25
  • Yes, something like this: `chart: { events: { load: function () { ... } } }` And there add series using `addSeries()` method. Just make sure you will add series with `redraw=false` and then call `chart.redraw()`, otherwise you will kill your machine ;) – Paweł Fus Feb 23 '16 at 13:43
  • @PawełFus Well, I do not know much about this method "addSeries ()" but will investigate and we will comment. thank you. – yavg Feb 23 '16 at 14:34
  • See [API](http://api.highcharts.com/highcharts#Chart.addSeries) . – Paweł Fus Feb 23 '16 at 14:51

0 Answers0