Jump to content
JChartFX Community
  • 0
Ryan.Alford

setCustomSteps issue Y Axis

Question

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 

Share this post


Link to post
Share on other sites

4 answers to this question

Recommended Posts

  • 0

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 

Share this post


Link to post
Share on other sites
  • 0

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?

Share this post


Link to post
Share on other sites
  • 0

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 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×