Search code examples
androidaxis-labelsanychart

Anychart Android polar plot xAxis labels change them to char strings


Good morning,

I was trying to implement an AnyChart polar plot in android (https://github.com/AnyChart/AnyChart-Android) which should look something similar to this (https://playground.anychart.com/gallery/Polar_Charts/Line_Polar_Chart). I know this example is in javascript and I am developping it within Android, which is not exactly the same, but to keep a reference of the result I want to achieve is fine.

From that example, I have been struggling to change the xAxis Labels (0°, 30°, ...) to custom made strings, such as ("Zero", "Thirty",...). I didn't manage to find a xAxis label getter which returns the label string (https://api.anychart.com/v8/anychart.core.ui.LabelsFactory#getLabel) but haven't been able to find a label setter...

My aim would be to keep the numerical functionallity of a Anychart polar plot, where a line could be plotted from (45°, value 1) to (45°, value 5) and having displayed chars at the xlabel of the plot, so instead of seeing "45°" to the label, it should say "fourty-five"

Do anyone have any idea if this is achievable? Thank you very much!


Solution

  • You can achieve that using format() function of the xAxis labels. In the callback function you can implement your own logic on how to translate numbers to words (if, case, hashmap, etc). The snippet describes how to achieve that.

            AnyChartView anyChartView = findViewById(R.id.any_chart_view);
    
            Polar polar = AnyChart.polar();
    
            List<DataEntry> data = new ArrayList<>();
            data.add(new ValueDataEntry(0, 10));
            data.add(new ValueDataEntry(15, 8));
            data.add(new ValueDataEntry(30, 12));
            data.add(new ValueDataEntry(45, 11));
    
            Set set = Set.instantiate();
            set.data(data);
            Mapping series1Data = set.mapAs("{ x: 'x', value: 'value' }");
    
            polar.line(series1Data);
    
            Linear scale = Linear.instantiate();
            scale.minimum(0).maximum(360);
            scale.ticks().interval(30);
            polar.xScale(scale);
    
            polar.xAxis().labels().format("function() {" +
                    "if (this.tickValue == 60) return 'sixty';" +
                    "if (this.tickValue == 90) return 'ninety';" +
                    "if (this.tickValue == 120) return 'hundred twenty';" +
                    "return this.tickValue;" +
                    "}");
    
            anyChartView.setChart(polar);
    

    Below is the result: enter image description here