Create a horizontal barChart with customized XAxisOptions (f.i: with a customized maximum value)

[Sergio Puyó]

Hi everyone, 

I'm trying to create this flot example that it's working in pure javascript flot code as you can see here . So here is my current code: 

private static PlotWidget createChartTutorial() {
        //Create model

PlotModel model = new PlotModel();
        SeriesHandler series = model.addSeries(Series.create()
        .setColor("#AB5800")
        );
        series.add( DataPoint.of(1582.3, "Gold" ) );
        series.add( DataPoint.of(28.95, "Silver") );
        series.add( DataPoint.of(1603, "Platinum") );
        series.add( DataPoint.of(774, "Palldium") );
        series.add( DataPoint.of(1245, "Thodium") );
        series.add( DataPoint.of(85, "Ruthenium") );
        series.add( DataPoint.of(1025, "Iridium") ); 
        
        // Create Options
        
        PlotOptions plotOptions = PlotOptions.create();
        
        plotOptions.setGridOptions(GridOptions.create()
        .setHoverable(true)
        .setClickable(true));
        
        
// If we set the XAxisOptions the chart is not being correctly displayed
// plotOptions.addXAxisOptions(CategoriesAxisOptions.create()
// .setLabel("Price (USD/oz)")
// .setLabelFontSize(12)
// .setLabelFontFamily("Verdana, Arial")
// .setLabelPadding(10)
// .setMaximum(2000)
// .setTickColor("#5E5E5E")
// .setColor("black")
// );
      plotOptions.addYAxisOptions(CategoriesAxisOptions.create()
.setLabel("Precious Metals")
.setLabelFontSize(12)
.setLabelFontFamily("Verdana, Arial")
.setLabelPadding(3)
.setTickColor("#5E5E5E")
.setColor("black")
     );
        
        plotOptions.setGlobalSeriesOptions( GlobalSeriesOptions.create().setBarsSeriesOptions( BarSeriesOptions.create()
        .setShow(true)
        .setHorizontal(true)
        .setAlignment(BarAlignment.CENTER)
        .setBarWidth(0.5)
        .setLineWidth(1)
        ));
 
        
        // create the plot
        SimplePlot plot = new SimplePlot( model, plotOptions );
        return plot;
        
}

So, if we only set the YAxisOptions it works. But when we set the XAxisOptions is not working like It should. I'm not sure what I'm missing. Any help will be appreciated.

Thanks,

Sergio.

[Nicolas Morel]

I can't test right now but from what I see, you are using CategoriesAxisOptions for your x-axis option. But your data contains number for x-axis. 

Try an AxisOptions instead.

Or do like the example. Change your datas to only use number, use AxisOptions for both axis and add a tick formatter to format the y axis label.

[Sergio Puyó]

I change it to AxisOption and now works!! 

Thanks!!

[Nicolas Morel]

You're welcome :)