Menu

BaseChart redraw for StockChart

2015-01-22
2015-01-22
  • Nicolas Schwarzentrub

    I'm using StockChart with an attached AxisSetExtremesEventHandler for lazy loading.
    Each time the data is reloaded I create a new Series and add it to the Chart. The series includes about 360 Points with x as long and y as double.
    Everything works fine and is fast enough except the redraw of the chart, which takes about 11000ms!!!
    Any suggestions?

    I wrote the same example using pure JavaScript, and it takes about less than a second.

    Here is what I do in Java

        private void createSeries(Number[][] points) {
            Series s = this.chart.createSeries();
            s.setType(Series.Type.LINE);
            s.setOption("color", "#00a9ff");
            s.setOption("dataGrouping/enabled", false);
            s.setOption("tooltip/valueDecimals", 1);
            s.setOption("tooltip/valueSuffix", "MW");
    
            duration = new Duration();
            this.chart.addSeries(s, false, false);
            s.setPoints(points, false);
            LOGGER.log(Level.INFO, "Add Series: " + duration.elapsedMillis() + " millis");
        }
    
        private void setAndReplacePoints(Number[][] points) {
            Duration duration = new Duration();
            this.chart.removeAllSeries(false);
    
            duration = new Duration();
    
            createSeries(points);
    
            duration = new Duration();
            this.chart.setAnimation(false);
            // why is this that slow??
            this.chart.redraw();
    
            LOGGER.log(Level.INFO, "Redraw Chart: " + duration.elapsedMillis() + " millis");
            int elapsed = duration.elapsedMillis();
            int elapsedPerPoint = elapsed / points.length;
            LOGGER.log(Level.INFO, "Redraw replace: " + duration.elapsedMillis() + " millis " + elapsedPerPoint
                    + " millis per point");
        }
    
     
  • Shawn Quinn

    Shawn Quinn - 2015-01-22

    The particular method in GWT Highcharts that you're profiling there (Chart.redraw()) simply just makes a call to the Highcharts.redraw() JS method. So, the only time spent would be inside of the Highcharts JS library itself.

    Are you running this test in GWT's dev mode, or fully compiled mode?

    Couple of other notes on your code example:

    1. If it's possible for your application, I believe Highcharts is more efficient at simply updating the data of a series (e.g. Series.setPoints()), rather then removing all the series and recreating them.

    2. If you do need to add a series to the chart after it has been rendered, it's more efficient to add the points to the series first and then add the series to the chart. (So, in your code example you'd want to flip the "s.setPoints()" and "chart.addSeries()" lines.)

     

Log in to post a comment.