setCustomSteps issue Y Axis

[Ryan.Alford]

The Axis.setCustomSteps() property is not working. I am using a Gallery.Bar graph with 52 items being rendered with a range of  items with values of 2 to items with values of 7000. The issue is that the items that have a value of 2 are so thin in comparison with the 7000 items that they dont show up on the graph. I was hoping to use setCustomSteps() to maybe enlarge the bottom part of the graph. so someone can see it. Any help would be appreciated.

http://www.jchartfx.com/api/Axis/CustomSteps 

[JuanC]

Axis.CustomSteps is currently not supported but it would not help on what you are trying to achieve, imagine an axis that goes from 0 to 100, our algorithm might decide that 20 is a suitable step, if you want to override this you would use setStep to manually set the step to 25. CustomSteps (if supported) would allow you to pass an array of 20 70 10 so the visible labels would be 0, 20, 90, 100.

Note that in all cases the axis would be linear so two values of 0.2 and 0.25 would indistinguishable.

There is an option but I am not sure if it would work in your scenario to set the axis to be logarithmic.

We currently do not have a feature in jChartFX where the axis would be broken up in two segments, e.g. 0-10 and then immediately start at 5000-7000. This is something we are considering supporting in future versions of the product.

Regards,

JuanC 

[Ryan.Alford]

Ok I see. Do you know of another way to handle this situation? I was thinking a good way is to have a two panes. One to display all the large bars (6000 or 7000) and the other to display all the small ones (0-50).  Do you think this is achievable?

[JuanC]

Two panes would be a reasonable approach, note that this assumes you can find the "magic" value (50) that breaks the axis, in order to have 2 panes you will need 2 series and with 2 series you will have to make sure you later "hide" this extra series from legend box, tooltips, etc.

    var data = [

                 { "Item": "A1", "Value": 30 },

                 { "Item": "A2", "Value": 5530 },

                 { "Item": "A3", "Value": 50 },

                 { "Item": "A4", "Value": 12 },

                 { "Item": "A5", "Value": 5900 },

                 { "Item": "A6", "Value": 5740 },

                ];

    

    var break1 = 50;

    var break2 = 3000;

    var maxValue = 6000;

    

    // Translate data to have 3 series, note that this relies on finding break values

    // Value and LargeValue will be used to plot bars in different panes, RealValue used for ToolTips

    var panedData = new Array();

    var n = data.length;

    

    for(var i = 0; i < n; i++) {

        var value = data.Value;

        

        var newObj = new Object();

        newObj["Item"] = data.Item;

        newObj["RealValue"] = value;

        

        if (value <= break1) {

            newObj["Value"] = value;

            newObj["LargeValue"] = cfx.Chart.Hidden;

        } else {

            newObj["Value"] = break1;

            newObj["LargeValue"] = value;

        }

        

        panedData.push(newObj);

    }

    

    // Make sure only Value and LargeValue are plotted

    var fields = chart1.getDataSourceSettings().getFields();

    var field1 = new cfx.FieldMap();

    field1.setName("Value");

    field1.setUsage(cfx.FieldUsage.Value);

    fields.add(field1);

    var field2 = new cfx.FieldMap();

    field2.setName("LargeValue");

    field2.setUsage(cfx.FieldUsage.Value);

    fields.add(field2);

    var field3 = new cfx.FieldMap();

    field3.setName("Item");

    field3.setUsage(cfx.FieldUsage.Label);

    fields.add(field3);

    

    chart1.setDataSource(panedData);

    

    var panes = chart1.getPanes();

    var pane = new cfx.Pane();

    panes.add(pane);

    

    var seriesList = chart1.getSeries();

    var series0 = seriesList.getItem(0);

    var series1 = seriesList.getItem(1);

    series0.setPane(pane);

    

    // Setup Top Pane to start in break value

    chart1.getAxisY().setMin(break2);

    chart1.getAxisY().setMax(maxValue);

    

    // make sure both series have same color

    series0.setColor("#0040E0");

    series1.setColor("#0040E0");

    

    // Hide LargeValue from legend box

    chart1.getLegendBox().getItemAttributes().getItem(seriesList, 1).setVisible(false);

    

    // Hide LargeValue from tooltip

    // Also note that we have to make sure we do not show value 50 for big bars in the bottom pane

    var tipContentTemplate = '<DataTemplate>' +

                                '<DockPanel Orientation="Horizontal" Margin="3,0,3,0">' +

                                  '<TextBlock Text="Value:" Margin=\"0,0,4,0\"/>' +

                                  '<TextBlock Text="{Binding Path=DataRealValue}" FontWeight="Bold" HorizontalAlignment="Right"/>' +

                                '</DockPanel>' +

                              '</DataTemplate>';

    chart1.getToolTips().setContentTemplate(tipContentTemplate);

    chart1.getToolTips().setAllSeries(false);

    

    chart1.setGallery(cfx.Gallery.Bar);

 

JuanC 

[Ryan.Alford]

This looks great. Thanks for the help. I appreciate it.