Serie temporal, gráfico ampliable

Ya hemos visto la configuración utilizada para dibujar este gráfico en el capítulo Sintaxis de configuración de Highcharts . Consideremos ahora el siguiente ejemplo para comprender mejor un gráfico con zoom de series temporales.

Configuraciones

Analicemos ahora las configuraciones / pasos adicionales realizados.

gráfico

Configure el gráfico para que se pueda ampliar. chart.zoomTypedecide las dimensiones en las que el usuario puede hacer zoom arrastrando el mouse. Los posibles valores para esto son x, yo xy.

chart.setZoomType(BaseChart.ZoomType.X)

plotOptions

Configure el área del gráfico usando plotOptions.

chart.setAreaPlotOptions(new AreaPlotOptions()
   .setFillColor(new Color()
     .setLinearGradient(0, 0, 0, 1)
     .addColorStop(0, 69, 114, 167)  
     .addColorStop(1, 2, 0, 0, 0)  
   )
   .setMarker(new Marker()  
      .setEnabled(false)  
      .setHoverState(new Marker()  
         .setEnabled(true)  
         .setRadius(5)  
      )  
   )  
   .setShadow(false)  
   .setHoverStateLineWidth(1)  
);

Ejemplo

HelloWorld.java

package com.tutorialspoint.client;

import org.moxieapps.gwt.highcharts.client.Axis;
import org.moxieapps.gwt.highcharts.client.BaseChart;
import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Color;
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.plotOptions.AreaPlotOptions;
import org.moxieapps.gwt.highcharts.client.plotOptions.Marker;

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

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      Chart chart = new Chart()
         .setZoomType(BaseChart.ZoomType.X)
         .setSpacingRight(20)  
         .setChartTitleText("USD to EUR exchange rate from 2006 through 2008")
         .setChartSubtitleText("Click and drag in the plot area to zoom in")
         .setLegend(new Legend()
            .setEnabled(false))  
         .setToolTip(new ToolTip()  
            .setShared(true)  
         )
         .setLegend(new Legend()
            .setEnabled(false)
         )
         .setAreaPlotOptions(new AreaPlotOptions()
            .setFillColor(new Color()
               .setLinearGradient(0, 0, 0, 1)
               .addColorStop(0, 69, 114, 167)  
               .addColorStop(1, 2, 0, 0, 0)  
            )
         .setMarker(new Marker()  
            .setEnabled(false)  
            .setHoverState(new Marker()  
               .setEnabled(true)  
               .setRadius(5)  
            )  
         )  
         .setShadow(false)  
            .setHoverStateLineWidth(1)  
         );  

      chart.getXAxis()
         .setType(Axis.Type.DATE_TIME)
         .setMaxZoom(14 * 24 * 3600000) //fourteen days
         .setAxisTitleText(null);  

      chart.getYAxis()
         .setAxisTitleText("Exchange rate")
         .setMin(0.6)  
         .setStartOnTick(false)  
         .setShowFirstLabel(false); 

      chart.addSeries(chart.createSeries()
         .setType(Series.Type.AREA)
         .setName("USD to EUR")
         .setPlotOptions(new AreaPlotOptions()  
            .setPointInterval(24 * 3600 * 1000)  
            .setPointStart(getTime("2006-01-01"))  
         )  
         .setPoints(new Number[] {
            0.8446, 0.8445, 0.8444, 0.8451, 0.8418, 0.8264, 0.8258, 0.8232,
            0.7158, 0.714,  0.7119, 0.7129, 0.7129, 0.7049, 0.7095
         })
      ); 
      RootPanel.get().add(chart);
   } 
   private static final DateTimeFormat dateTimeFormat = DateTimeFormat.getFormat("yyyy-MM-dd"); 
   private long getTime(String date) {  
      return dateTimeFormat.parse(date).getTime();  
   }  
}

Resultado

Verifica el resultado.