Jump to content
JChartFX Community
  • 0

setCustomSteps issue Y Axis


Ryan.Alford

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 

Link to post
Share on other sites

4 answers to this question

Recommended Posts

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 

Link to post
Share on other sites

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 

Link to post
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...