Xi Guan - 2012-09-11

Hi

I found this very weird problem about two weeks ago. It happened when you use Moxie highcharts library with Gwt Dnd library together (Gwt Dnd is one GWT library to realize drag and drop function). Below I provided the video and the source code where you could see it and reproduce it.

The video to see what it is
http://youtu.be/ed_IRN_dypo

Source code download
https://docs.google.com/open?id=0B06zBFVvUlFuSjdaYlB2Y0JRMFU


So far, what I have observed is : It happens only when you render the chart first, and set data to series later (i.e. after 1s ). Take my case as an example: I used one Timer to guarantee this sequence. If I setPoints to chart inside the Timer, I could see this problem. Otherwise, if you setPoints when the chart initialized, this problem won't happen. One example code could be:

StockChart stockChart = new StockChart();
stockChart.setType(Series.Type.SPLINE);
stockChart.setMarginTop(70);
stockChart.setChartTitleText("Test Stock Price");
stockChart.setCredits(new Credits().setEnabled(false));
stockChart.getXAxis().setType(Axis.Type.DATE_TIME).setTickPixelInterval(150);

final Series tickChartSeries = stockChart.createSeries();
stockChart.addSeries(tickChartSeries.setName("Random data").setYAxis(0));

Timer testTimer=new Timer() {
      @Override
      public void run() {
          long time = new Date().getTime();
          int counter=1000;
          Number[][] testNumbers = new Number[counter][2];
          for (int i = -counter+1; i <= 0; i++) {
               double yAxisValue = Random.nextDouble();
               // 1000*60*60*24 means one day
               testNumbers[i+counter-1][0]=time + (long)                 i * 1000 * 60 * 60 * 24;
               testNumbers[i+counter-1][1]=yAxisValue;
          }
          tickChartSeries.setPoints(testNumbers);
     };
}
testTimer.schedule(1000);


After repeating attempt and test, I have found one way to solve this problem. However, it just solved this problem on the surface. Or it's just one hack

If you change the code inside run method of Timer, you could drag and drop the chart without losing the data. However, it just works when the points number you want to add is <=1000

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
long time = new Date().getTime();
int counter=1000;//Won't disappear
//int counter=1001;//Will diappear
for (int i = -counter+1; i <= 0; i++) {
double yAxisValue = Random.nextDouble();
// 10006060*24 means one day
long xAxisValue=time + (long) i * 1000 * 60 * 60 * 24;
tickChartSeries.addPoint(xAxisValue,yAxisValue, false, false, false);
}
tickChartSeries.show();
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


I have been tortured for almost 2 weeks. Honestly speaking, I have no idea what or where is the reason. So I really need your help in finding the "suspect". Any suggestion from you are welcome. If you want to reproduce it locally, please download the source code project

Thanks in advance and look forward to seeing your reply.

 

Last edit: Xi Guan 2012-09-13