Interactive Charts

[infn]

Hi,

We evaluated the new JIDE Chart API provided.
Most of the features provided were useful.
Interactive Charts is one compelling feature that we require.
The UI should be similar to that of Google Finance.
We need a timeline bar where user can configure the period required to be seen in the graph.
We can assume that the X-axis is always time based and provide an abstract chart implementation.

Also let us know if it is possible to annotate the charts. Similar to the one provided in
sample screenshot (News Annotations).
Please see the attachement for a sample screenshot.
If this feature is already available let us know the chart type.


Thanks.

[infn]

Anybody there???

[charts.support]

Sorry for the late response.

Yes, it is possible to produce a chart similar to the screenshot you provided. This would be an XY chart with a TimeAxis used as the X axis.
And yes, you can add annotations by writing classes that implement the Drawable interface.

Give me a little time and I will have a go at mocking up something similar to the screenshot you provided.

[infn]

Thanks for the reply.
Looking forward for the mock up screen shot.

[charts.support]

Here is the mockup generated using JIDE Charts. It uses randomly generated (independent) data for the upper and lower charts, so don't start looking for correlations between the price and the volume!

[infn]

Thanks. Will get back soon.

[infn]

Hi,
Can we add here the sliders also at the bottom to select specific time range to plot the chart as displayed on google charts.

[charts.support]

I agree it would be nice. I don't want to promise it at this stage - I will have to investigate it first, but will see what I can do.

[infn]

Thanks, looking forward to your solution.

[infn]

Hi,
we badly need this feature in order to JIDE charts in our products. Without this feature code looks cumbersome and also it may not be that much user friendly.

[charts.support]

I'll start working on this later this week. Watch this space....

[infn]

Any updates on this?

[charts.support]

This is not quite the same as Google charts, but has a similar effect and is a user-interface pattern that is used elsewhere. The lower chart is an overview of the whole of the chart data and the upper chart with the bigger screen area allows you to zoom in to see the detail. When you zoom in, a grey area in the overview shows where you are in the 'bigger picture'. In my implementation, you can pan in the upper chart area or you can drag the highlighted area in the overview and the main detail chart will respond accordingly.

Here is a screenshot:

Highlighted Area in an Overview Chart

HighlightedArea.png (28.07 KiB) Viewed 233948 times

Would this approach work?

BTW, if you only want to zoom the time range and not the y axis, then this could be done with a small modification, and it should not be too difficult to make it possible to resize the grey rectangle instead of just moving it. At this point you would be pretty close to the Google charts approach, I think.

[infn]

Hi

Thanks for working on this.

Yes, this is very close to what we are looking for.
Can we add handles at both the sides of marker, instead of resizing equally at both the sides, if we add handles the user can choose which direction he wants to move(zoom)?

1. Can we have the zoom in/zoom out options on x-axis,y-axis and both other than marker option like menu item.
2. Tooltip for data points in the chart
3. Save as option to store the Chart image

Thanks

[charts.support]

The short answer is yes (to all 3 questions). I'll code up a solution for part 1 and post back here. For part 2 there is a demo in the download that shows the use of tooltips; for part 3, you can use one of the methods in com.jidesoft.chart.util.ChartUtils.

[karpaydm]

I too need a nice Annotated Time Line chart like google provides. Any updates on this thread?

Thanks,
Scott

[charts.support]

Hi Scott,

It is already possible to build a time series chart and annotate it (see for example the ChartLabel class). If this is not sufficient, can you outline what is missing to meet your requirements?

[charts.support]

Hi infn - Sorry, I still haven't done any additional coding for this issue apart from what has already been posted. However it does seem to be an important use case, so I think including something like this as one of the demos would be a good way forward.

As a short answer to question 1, the method of interest would be Axis.zoom(Axis, zoomfactor), which returns a new range. You can then set the range on the axis.

For question 2 on tooltips there are a couple of demos for tooltips already in the demos, but they are not the simplest usage. This is the easiest way to set a tooltip (it has been added to the developers' guide for the next release):

Code: Select all

chart.addPropertyChangeListener(new PropertyChangeListener() {
  public void propertyChange(PropertyChangeEvent evt) {
    if (Chart.PROPERTY_CURRENT_CHART_POINT.equals(evt.getPropertyName())) {
      Chartable p = chart.getCurrentChartPoint();
      if (p == null) {
        chart.setToolTipText(null);
      } else {
        String text = String.format("x = %.2f, y = %.2f", p.getX().position(),
 p.getY().position());
        chart.setToolTipText(text);
      }
   }
  }
});


[infn]

Hello Jide

Thanks for providing the supporting on this issue - We evaluated the solution you have provided us - but we are afraid this is not what we were looking for. We wanted a Google Finance Stock Chart kind of a functionality with the below features:

1) Zoom to specific time interval within the chart - this time interval should be selectable by means of a slide selector.

2) Support to add multiple data series' to the chart - and have them shown in a single chart. And also user should be able to select the specific data series' he wants to view.

Pls see Screenshot attached highlighting the features requested:

Thanks,

[charts.support]

Hello again, and thank you for the comments.
In answer to your comment about multiple data series: yes you certainly can add multiple data series to a Jide Chart. See, for example, the Cambridge Temperatures Chart in the set of demos. You would create a checkbox for each series and have the associated action make the series visible/invisible depending on the selection. Actually, if you take a look at the Configurable Chart demo you can do this by selecting/deselecting the checkboxes for the lines and points of the Sine and Cosine curve. You can use the same mechanism in a finance chart. A feature of Jide Charts is that you don't have to remove the series from the chart completely - you can choose to make the series invisible and then make it visible again when needed.

We do not currently have a range selector that is just like the one in Google charts. But it would be possible to build one like it using Jide Charts. My example earlier in this thread was an attempt to demonstrate that it would be possible and is perhaps something that you could build upon. We don't currently have any plans to build such a component, but we may be able to help you if you would consider sponsoring the development.