- GWT Highcharts Tutorial
- GWT Highcharts - Home
- GWT Highcharts - Overview
- Environment Setup
- Configuration Syntax
- GWT Highcharts - Line Charts
- GWT Highcharts - Area Charts
- GWT Highcharts - Bar Charts
- GWT Highcharts - Column Charts
- GWT Highcharts - Pie Charts
- GWT Highcharts - Scatter Chart
- GWT Highcharts - Dynamic Charts
- GWT Highcharts - Combinations
- GWT Highcharts - 3D Charts
- GWT Highcharts - Map Charts
- GWT Highcharts Useful Resources
- GWT Highcharts - Quick Guide
- GWT Highcharts - Useful Resources
- GWT Highcharts - Discussion
Spline updating each second
We have already seen the configuration used to draw a chart in Highcharts Configuration Syntax chapter.
An example of a Spline Chart updating each second is given below.
Configurations
Let us now see the additional configurations/steps taken.
series.addPoint
Add a new point created randomly to the series at an interval of 1000 milliseconds.
Timer tempTimer = new Timer() { @Override public void run() { series.addPoint( new Date().getTime(), Random.nextDouble(), true, true, true ); } }; tempTimer.scheduleRepeating(1000);
Example
HelloWorld.java
package com.tutorialspoint.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); } }
Result
Verify the result.
gwt_highcharts_dynamic_charts.htm
Advertisements
To Continue Learning Please Login
Login with Google