What to creat such High light behaviour , is it possible?

[hrishirise]

http://www.bbc.co.uk/weather/5391959

In the above chart, you see a "Vertical " bar that gets highlighted when you scroll to a Line series data point.
I would like to do something similar.

Is this a seperate Bar series? or is it drawn rectanglesprite? Can anyone suggest some code and how its possible suggestions?

[PhiLho]

This specific chart is done with Highcharts, which is also our choice as we have some needs not fulfilled by Sencha's charts (like having more than two axes, etc.).
Sencha charts are good, although still a big young, Highcharts is just better... Of course, for simple needs, Sencha charts will probably be more than enough, and have the advantage of being pure GWT, while Highcharts are a JavaScript library wrapped for GWT (we chose the Moxie Group wrapper).

That said, it is possible to draw over a Sencha chart, it was among my first experiments with them, as we need markers and range markers (horizontal ones).
Here is was I did, perhaps you can adapt to vertical & interactive display.

   public void AddMarks()
   {
      PreciseRectangle prL = m_leftAxis.getBBox();
      int dashSpace = 2 * m_leftAxis.getDashSize();
      PreciseRectangle prR = m_rightAxis.getBBox();
//      System.out.println("Left: " + prL + "\nDash: " + dashSpace);
//      System.out.println("\nRight: " + prR);

      PathSprite ps = new PathSprite();
      PathCommand cs = new MoveTo( prL.getX() + dashSpace, prL.getY() + 2 * prL.getHeight() / 3 );
      PathCommand ce = new LineTo( prR.getX(), prL.getY() + 2 * prL.getHeight() / 3 );
      ps.addCommand( cs );
      ps.addCommand( ce );
      ps.setStroke( RGB.BLUE );
      m_chart.addSprite( ps );

      double w = prR.getX() - ( prL.getX() + dashSpace );
      double h = prR.getHeight() / 5;
      double x = prL.getX() + dashSpace;
      double y = prL.getY() + prL.getHeight() / 4;
      RectangleSprite rs = new RectangleSprite( w, h, x, y );
      rs.setStroke( new RGB( "#FFEE55" ) );
      rs.setFill( RGB.GREEN );
      rs.setFillOpacity( 0.3 );
      m_chart.addSprite( rs );

      m_chart.redrawChart();
   }

Note that this code must be called after the chart have been drawn, so we can get the geometry of the chart elements (bounding boxes and such).

[hrishirise]

Thanks PhiLo, and sharing with me infor on moxie group chart too , pretty interesting.
I will try out .

[hrishirise]

What is m_leftAxis and m_rightAxis in your code?


PreciseRectangle prL = m_leftAxis.getBBox(); int dashSpace = 2 * m_leftAxis.getDashSize(); PreciseRectangle prR = m_rightAxis.getBBox();

[hrishirise]

Also, how do i know that the "Charts" are loaded , any handler or event?

[PhiLho]

left/rightAxis are the NumericAxis created to build the chart.
And I don't know when the chart is rendered, as a workaround, I display these highlights only upon user action (scheduling it wasn't effective either).