Gwt-highcharts-dynamic-spline

毎秒更新するスプライン

link：/gwt_highcharts/gwt_highcharts_configuration_syntax [Highcharts構成構文]の章で、チャートを描画するために使用される構成をすでに確認しました。

毎秒更新するスプラインチャートの例を以下に示します。

構成

ここで、追加の構成/実行された手順を見てみましょう。

series.addPoint

ランダムに作成された新しいポイントを、1000ミリ秒の間隔で系列に追加します。

Timer tempTimer = new Timer() {
   @Override
   public void run() {
      series.addPoint(
         new Date().getTime(),
         Random.nextDouble(),
         true, true, true
      );
   }
};
tempTimer.scheduleRepeating(1000);

例

*_HelloWorld.java_*

package com.finddevguides.client;

import java.util.Date;

import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Credits;
import org.moxieapps.gwt.highcharts.client.Legend;
import org.moxieapps.gwt.highcharts.client.Series;
import org.moxieapps.gwt.highcharts.client.ToolTip;
import org.moxieapps.gwt.highcharts.client.ToolTipData;
import org.moxieapps.gwt.highcharts.client.ToolTipFormatter;
import org.moxieapps.gwt.highcharts.client.Series.Type;
import org.moxieapps.gwt.highcharts.client.labels.DataLabels;
import org.moxieapps.gwt.highcharts.client.plotOptions.BarPlotOptions;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.i18n.client.NumberFormat;
import com.google.gwt.user.client.Random;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      final Chart chart = new Chart()
         .setChartTitleText("Live random data")
         .setType(Type.SPLINE)
         .setMarginRight(10)
         .setBarPlotOptions(new BarPlotOptions()
               .setDataLabels(new DataLabels()
               .setEnabled(true)
            )
         )
         .setLegend(new Legend()
            .setEnabled(true)
         )
         .setCredits(new Credits()
            .setEnabled(false)
         )
         .setToolTip(new ToolTip()
            .setFormatter(new ToolTipFormatter() {
            @Override
            public String format(ToolTipData toolTipData) {
               return "<b>" + toolTipData.getSeriesName() + "</b><br/>" +
               DateTimeFormat.getFormat("yyyy-MM-dd HH:mm:ss")
               .format(new Date(toolTipData.getXAsLong())) + "<br/>" +
               NumberFormat.getFormat("0.00").format(toolTipData.getYAsDouble());
            }
         })
      );

      chart.getXAxis()
         .setType(org.moxieapps.gwt.highcharts.client.Axis.Type.DATE_TIME)
         .setTickInterval(150);

      chart.getYAxis()
         .setAxisTitleText("Value")
         .setPlotLines(chart.getYAxis().createPlotLine()
            .setValue(0)
            .setWidth(1)
            .setColor("#808080")
         );

      final Series series = chart.createSeries();
      series.setName("Random Data");
      chart.addSeries(series);

     //Generate an array of random data
      long time = new Date().getTime();
      for(int i = -19; i <= 0; i++) {
         series.addPoint(time + i * 1000, Random.nextDouble());
      }

      Timer tempTimer = new Timer() {
         @Override
         public void run() {
            series.addPoint(
               new Date().getTime(),
               Random.nextDouble(),
               true, true, true
            );
         }
      };
      tempTimer.scheduleRepeating(1000);

      RootPanel.get().add(chart);
   }
}

結果

結果を確認します。

スプラインチャートの更新