Horizontal Scrolling of Chart

[Anonymous]

Hey there! I've been through the examples and the API, but I can't seem to find a way to enable the horizontal scrolling of a chart. I see it in the main example, but I just can't seem to figure it out. Any hints?

Thanks!!

E

[Shawn Quinn]

You need to make use of the "StockChart" widget instead of the regular "Chart" widget in order to get that additional pane. Note that you need to make sure to include the "highstock.js" file in your page instead of the "highcharts.js" file if you're going to utilize the StockChart widget. Some additional details here:

http://www.moxiegroup.com/moxieapps/gwt-highcharts/userguide.jsp#installation

[Anonymous]

Thanks for the tip on using StockChart. I have all that switched over and everything is working as it was previously. The only thing I can't seem to figure out is how to actually enable and horizontal scrolling. Is there an "option" I need to set using the setOptions functions or something like that?

I promise I went through the docs! Any pointers are much appreciated.

Thanks!

Evan

[Anonymous]

So, I think I might be using the Stock Chart for the wrong reasons. So, my problem is that I'm attempting to add a number of bar charts to a graph and they're becoming very squished together horizontally, where the groups themselves are so tight that you can't read the labels.

I'm a little unclear on how to handle this scenario. Is there a way I can specify the minimum width or spacing of the labels and have the chart adjust it's size? In that case, I could fire it into a scroll panel and get the usability I need.

Is there another way? Do I need to calculate the space requirements manually and then set the size of the chart that way?

Thanks,

E

[Shawn Quinn]

One option for this kind of thing is to use a zoomable series, and leave the labels to appear in the tool tip only. E.g.:

http://www.moxiegroup.com/moxieapps/gwt-highcharts/showcase/#line-time-series

If you have an even larger data set though, stock charts probably are the best option. Here's a working example that you could start with (which includes the horizontal scrolling panel at the bottom of the chart):

final StockChart chart = new StockChart()
    .setChartTitle(new ChartTitle()
        .setText("USD to EUR")
        .setFloating(true)
        .setAlign(ChartTitle.Align.RIGHT)
        .setX(-20)
        .setY(20)
    )
    .setRangeSelector(new RangeSelector()
        .setSelected(1)
        .setInputEnabled(false)
    )
    .setExporting(new Exporting()
        .setEnabled(false)
    )
    .setCredits(new Credits()
        .setEnabled(false)
    )
    .setWidth100()
    .setHeight100()
    .setReflow(false);

chart.getXAxis()
    .setMaxZoom(14 * 24 * 3600000); // fourteen days

chart.addSeries(chart.createSeries()
    .setName("USD to EUR")
    .setPoints(getUSDtoEURData())
);

Where the "getUSDtoEURData()" method looks like this:

   private Number[][] getUSDtoEURData() {
        return new Number[][]{
            { time1, 30.0 }, { time2, 40.0 }, etc
        };
   }

Where "time1", "time2", etc represent a normal Java Date.getTime().

Hope that helps,

-Shawn