Browser hung when plotting over 10,000 series using Highcharts

I need your little help, I am working on a problem where I have to compose a maximum of 10,000 series on one diagram. Every time I have a random number of series like 1000, 1500 or 2000 up to 10000. I successfully put them in the chart object, but when I assign the data object to the chart class, my browser gets hung up for a few seconds. Here is my code,

var obj =  {
           credits: {
                 enabled: false
             },
           title: {
                         text: 'Sentiment Activity Of Stocks'
                     },
           chart: {
                     width: 1200
                     },
           exporting: {
                    enabled: false
           },

               xAxis: {
                   min: -5,
                   max:5,
                   title: {
                        enabled: true,
                        text: '<b>S Score</b>',
                        style: {
                            fontWeight: 'normal'
                        }
                    }
              },
               yAxis: {
                   title: {
                     enabled: true,
                     text: '<b>S Score</b>',
                     style: {
                         fontWeight: 'normal'
                     }
                 }

               },
           plotOptions: {
                         line: {
                             marker:{
                                 symbol:"circle"
                             }
                         },


                         },
           tooltip: {
               formatter: function () {

                    var x = this.x;
                    x = x.toFixed(4);

                    var y = this.y;
                       y = y.toFixed(4);

                      var delta = parseFloat(this.series.data[1].x-this.series.data[0].x);
                          delta = delta.toFixed(4);

                      return ' <b>'+ this.series.name +'<br/> <b>Score ( t ): </b>' + y +
                            '<br /> <b>Score(t-1): </b>' + x + '<br />'+
                            '<b>SDelta: </b>' + delta + '<br />'+
                          '<br/>';

               }
           },
               legend: {
                   enabled: false
               },
               series: [
               ]

  };


          $.each(parsedJson ,function(index, element) {
          var s_color = "Green";
          if(element.sdelta < 0)
             s_color = "red";

          var diffe  = parseFloat(element.sscore-element.sdelta);
          var sscore = exp_y = parseFloat(element.sscore);

          if(sscore > diffe){
              var arr =  {data: [[diffe,exp_y],[sscore, exp_y]],name:element.subject,color:s_color,id:element.subject};
          }else{
              var arr =  {data: [[sscore, exp_y],[diffe,exp_y]],name:element.subject,color:s_color,id:element.subject};
          }

          obj.series.push(arr);
        });

       $('#container').highcharts(obj);

      

I'm not sure what is the actual reason why the browser is hanging. Maybe there is a no limit. from a series in one diagram. Your help is truly appreciated in determining the cause of this problem.

+3


source to share


1 answer


The hith highcharts website has an article on performance issues. You can read it here:

http://www.highcharts.com/component/content/article/2-news/48-loading-millions-of-points-in-highcharts

Some pointers for you:



  • Disable animation. This can slow things down a lot.
  • Try highstock. Highstock can handle large datasets.
    chart: {
        animation: false
    },
+1


source







All Articles