How to set a scale for Anychart line graph based on Date

Question

I have anycharts already working. I use the ValueDataEntry function to set x & value. I set x to be a string of DateTime in the format DD/MM/YYYY HH:MM:SS (eg: 12/03/2021 18:25:23) and a value of heart rate for each x.

I want to filter the data by month and week OR to set a scale (This is how i want the chart to look like if it has a scale) where I can just adjust the scale on the graph itself. I have a snippet of the code below. Thank you in advance :)

 public void setLineChart() {

        ArrayList<DataEntry> HeartRates = new ArrayList<>();

        readings = LiveData.getReadingHashMap(); //Obtaining the values

        if (readings.isEmpty()){
            HeartRates.add(new ValueDataEntry(0, 0));
            Spo2s.add(new ValueDataEntry(0, 0));
            Temps.add(new ValueDataEntry(0, 0));
        }
        else {
            for(int i =0; i<readings.size(); i++){
                keyReadings = readings.keySet().toArray();
                HeartRate = Double.parseDouble(readings.get(keyReadings[i]).getHeartRate());
                HeartRates.add(new ValueDataEntry(String.valueOf(keyReadings[i]), HeartRate));

            }

        }

        cartesian = AnyChart.line();
        cartesian.animation(true);
        cartesian.padding(10d, 20d, 5d, 20d);
        cartesian.crosshair().enabled(true);
        cartesian.crosshair()
                .yLabel(true)
                .yStroke((Stroke) null, null, null, (String) null, (String) null);
        cartesian.tooltip().positionMode(TooltipPositionMode.POINT);
        cartesian.title("Heart Rate");
        cartesian.yAxis(0).title("Heart Rate");
        cartesian.xAxis(0).title("Time");
        cartesian.xAxis(0).labels().padding(5d, 5d, 5d, 5d);
        cartesian.legend().enabled(true);
        cartesian.legend().fontSize(13d);
        cartesian.legend().padding(0d, 0d, 10d, 0d);
        cartesian.xScale();

        series = cartesian.line(HeartRates);
        series.name("Heart Rate (BPM)");
        series.hovered().markers().enabled(true);
        series.hovered().markers()
                .type(MarkerType.CIRCLE)
                .size(4d);
        series.tooltip()
                .position("right")
                .offsetX(5d)
                .offsetY(5d);

        linechartHeartRate.setChart(cartesian);

Answer 1

I found the solution.

In the code where I set the the properties for the graph, I should just add:

        cartesian.xScroller(true);
        OrdinalZoom xZoomHR = cartesian.xZoom();
        xZoomHR.setToPointsCount(6, false, null);
        xZoomHR.getStartRatio();
        xZoomHR.getEndRatio();