How can I make Hours of Service chart in Android?

Hi Obaid Rehman,

Thanks for your question.

Unfortunately we don’t support this type of chart out of the box but you can achieve similar output by customizing our 2D chart with line series.

I modified one of examples from our Example Suite and here is what I got:

public class LineChartFragment extends ExampleBaseFragment {

@BindView(R.id.chart)
SciChartSurface surface;

@Override
protected int getLayoutId() {
    return R.layout.example_single_chart_fragment;
}

@Override
protected void initExample() {
    final IAxis xAxis = new HourOfServiceNumericAxis(getActivity());
    xAxis.setAxisAlignment(AxisAlignment.Top);

    final IAxis leftYAxis = sciChartBuilder.newNumericAxis()
            .withVisibleRange(-0.5, 3.5)
            .withAutoTicks(false)
            .withMajorDelta(1d)
            .withMinorDelta(0.5)
            .withAxisId("LeftAxis")
            .withDrawMinorTicks(false)
            .withDrawMajorBands(false)
            .withDrawMajorTicks(false)
            .withDrawMajorGridLines(false)
            .withAxisAlignment(AxisAlignment.Left)
            .build();

    final IAxis rightYAxis = sciChartBuilder.newNumericAxis()
            .withVisibleRange(-0.5, 3.5)
            .withAutoTicks(false)
            .withMajorDelta(1d)
            .withMinorDelta(0.5)
            .withDrawMinorTicks(false)
            .withDrawMajorBands(false)
            .withDrawMajorTicks(false)
            .withDrawMajorGridLines(false)
            .withAxisId("RightAxis")
            .build();

    xAxis.setLabelProvider(new NumericLabelProvider(new XAxisLabelFormatter()));
    leftYAxis.setLabelProvider(new NumericLabelProvider(new YAxisLabelFormatter(Arrays.asList("Off Duty", "Sleeper", "Driving", "On Duty"))));
    rightYAxis.setLabelProvider(new NumericLabelProvider(new YAxisLabelFormatter(Arrays.asList("15:05:50", "00:00:00", "02:14:34", "06:39:36"))));

    rightYAxis.setAxisTitle("Total\nHours");
    rightYAxis.setAxisTitlePlacement(AxisTitlePlacement.Top);
    rightYAxis.setAxisTitleOrientation(AxisTitleOrientation.Horizontal);
    rightYAxis.setAxisTitleGravity(Gravity.TOP | Gravity.END);

    final PenStyle minorGridLineStyle = sciChartBuilder.newPen().withColor(Color.BLACK).withThickness(1f).build();
    xAxis.setMinorGridLineStyle(minorGridLineStyle);
    xAxis.setMajorGridLineStyle(minorGridLineStyle);
    leftYAxis.setMinorGridLineStyle(minorGridLineStyle);
    rightYAxis.setMinorGridLineStyle(minorGridLineStyle);

    final IXyDataSeries<Double, Double> dataSeries = sciChartBuilder.newXyDataSeries(Double.class, Double.class).build();

    final Random random = new Random();
    for(double x = 0; x < 25d; x += 0.25) {
        final double y = random.nextInt(4);
        dataSeries.append(x, y);
    }

    final FastLineRenderableSeries rSeries = sciChartBuilder.newLineSeries().withYAxisId("LeftAxis").withDataSeries(dataSeries).withStrokeStyle(Color.BLUE, 2f, true).withIsDigitalLine(true).build();

    UpdateSuspender.using(surface, new Runnable() {
        @Override
        public void run() {
            surface.setTheme(R.style.SciChart_Bright_Spark);
            Collections.addAll(surface.getXAxes(), xAxis);
            Collections.addAll(surface.getYAxes(), leftYAxis, rightYAxis);
            Collections.addAll(surface.getRenderableSeries(), rSeries);
        }
    });
}

class XAxisLabelFormatter implements ILabelFormatter<NumericAxis> {

    @Override
    public void update(NumericAxis axis) {

    }

    @Override
    public CharSequence formatLabel(Comparable dataValue) {
        return format((Double) dataValue);
    }

    @Override
    public CharSequence formatCursorLabel(Comparable dataValue) {
        return format((Double) dataValue);
    }

    private CharSequence format(Double dataValue) {
        final int value = dataValue.intValue();

        return Integer.toString(value % 12 + 1);
    }
}

class YAxisLabelFormatter implements ILabelFormatter<NumericAxis> {

    private final List<String> labels;

    YAxisLabelFormatter(List<String> labels) {

        this.labels = labels;
    }

    @Override
    public void update(NumericAxis axis) {

    }

    @Override
    public CharSequence formatLabel(Comparable dataValue) {
        return format((Double) dataValue);
    }

    @Override
    public CharSequence formatCursorLabel(Comparable dataValue) {
        return format((Double) dataValue);
    }

    private CharSequence format(Double dataValue) {
        final int index = dataValue.intValue();

        if(index < labels.size()) {
            return labels.get(index);
        } else {
            return "";
        }
    }

}
}

Also I created custom XAxis which draws gridlines which are similar to the ones which you require:

public class HourOfServiceNumericAxis extends NumericAxis {
public HourOfServiceNumericAxis(Context context) {
    super(context);

    setGridLinesRenderer(new HourOfServiceGridLinesRenderer());

    setVisibleRange(new DoubleRange(0d, 24d));
    setAutoTicks(false);
    setMajorDelta(1d);
    setMinorDelta(0.25d);
    setIsLabelCullingEnabled(false);

    setDrawMajorTicks(false);
    setDrawMinorTicks(false);
    setDrawMajorBands(false);
}

private static class HourOfServiceGridLinesRenderer extends DisposableBase implements IAxisGridLinesRenderer {
    private IAxis axis;

    private boolean isAttached;

    private final FloatValues minorGridLines = new FloatValues();
    private final FloatValues majorGridLines = new FloatValues();

    private final Action2<IRenderContext2D, IAssetManager2D> drawMinorGridLinesOperation = new Action2<IRenderContext2D, IAssetManager2D>() {
        @Override
        public void execute(IRenderContext2D renderContext, IAssetManager2D assetManager) {
            final PenStyle minorGridLineStyle = axis.getMinorGridLineStyle();
            if(needToDraw(minorGridLines, minorGridLineStyle)){
                final float[] itemsArray = minorGridLines.getItemsArray();
                final int size = minorGridLines.size();

                final IPen2D pen = assetManager.createPen(minorGridLineStyle);
                renderContext.drawLines(itemsArray, 0, size, pen);
            }
        }
    };

    private final Action2<IRenderContext2D, IAssetManager2D> drawMajorGridLinesOperation = new Action2<IRenderContext2D, IAssetManager2D>() {
        @Override
        public void execute(IRenderContext2D renderContext, IAssetManager2D assetManager) {
            final PenStyle majorGridLineStyle = axis.getMajorGridLineStyle();
            if(needToDraw(majorGridLines, majorGridLineStyle)){

                final float[] itemsArray = majorGridLines.getItemsArray();
                final int size = majorGridLines.size();

                final IPen2D pen = assetManager.createPen(majorGridLineStyle);
                renderContext.drawLines(itemsArray, 0, size, pen);
            }
        }
    };

    private static boolean needToDraw(FloatValues points, Style style){
        return points.size() > 0 && style.isVisible();
    }

    @Override
    public void onDraw(IRenderContext2D renderContext, IAssetManager2D assetManager, RenderOperationLayers drawingLayers) {
        drawingLayers.get(RenderOperationLayers.AXIS_MINOR_GRID_LINES).enqueue(drawMinorGridLinesOperation);
        drawingLayers.get(RenderOperationLayers.AXIS_MAJOR_GRID_LINES).enqueue(drawMajorGridLinesOperation);
    }

    @Override
    public void onLayout(IAssetManager2D assetManager, int viewportWidth, int viewportHeight) {
        minorGridLines.clear();
        majorGridLines.clear();

        final TickCoordinates tickCoordinates = axis.getTickCoordinatesProvider().getTickCoordinates();

        final boolean hasMajorTicks = tickCoordinates.getMajorTickCoordinates().size() > 0;
        final boolean hasMinorTicks = tickCoordinates.getMinorTickCoordinates().size() > 0;


        if (axis.getDrawMinorGridLines() && hasMinorTicks) {
            final DoubleValues ticks = axis.getTickProvider().getTicks().getMinorTicks();
            final FloatValues coordinates = tickCoordinates.getMinorTickCoordinates();

            final int size = coordinates.size();

            minorGridLines.setSize(size * 4 * 4); // 4 points(x1, y1, x2, y2) for each coordinate * 4 lines

            final float[] gridLinesArray = minorGridLines.getItemsArray();
            final float[] coordinatesArray = coordinates.getItemsArray();
            final double[] ticksArray = ticks.getItemsArray();

            int offset = 0;

            final float step = viewportHeight / 4f;

            for (int i = 0; i < size; i++) {
                final float coordinate = coordinatesArray[i];
                final double tick = ticksArray[i];

                final float lineLength;
                if(DoubleUtil.isDivisibleBy(tick, 0.5))
                    lineLength = step / 2;
                else
                    lineLength = step / 4;

                for (int j = 0; j < 4; j++) {
                    final float yCoord = step * j + step;

                    gridLinesArray[offset++] = coordinate;
                    gridLinesArray[offset++] = yCoord - lineLength;

                    gridLinesArray[offset++] = coordinate;
                    gridLinesArray[offset++] = yCoord;
                }
            }
        }

        if (axis.getDrawMajorGridLines() && hasMajorTicks) {
            final FloatValues coordinates = tickCoordinates.getMajorTickCoordinates();
            final int size = coordinates.size();

            majorGridLines.setSize(size * 4); // 4 points(x1, y1, x2, y2) for each coordinate

            final float[] gridLinesArray = majorGridLines.getItemsArray();
            final float[] coordinatesArray = coordinates.getItemsArray();

            int offset = 0;

            for (int i = 0; i < size; i++) {
                final float coordinate = coordinatesArray[i];

                gridLinesArray[offset++] = coordinate;
                gridLinesArray[offset++] = 0;

                gridLinesArray[offset++] = coordinate;
                gridLinesArray[offset++] = viewportHeight;
            }
        }
    }


    @Override
    public void onRenderSurfaceChanged() {

    }

    @Override
    public void attachTo(@NonNull IServiceContainer services) {
        this.axis = services.getService(IAxis.class);
        this.isAttached = true;
    }


    @Override
    public void detach() {
        disposeRendererComponents();

        this.axis = null;
        this.isAttached = false;
    }

    @Override
    public final boolean isAttached() {
        return isAttached;
    }

    @Override
    public void dispose() {
        disposeRendererComponents();
    }

    private void disposeRendererComponents() {
        minorGridLines.disposeItems();
        majorGridLines.disposeItems();
    }
}
}

Is this suitable for your needs?

Best regards,
Yura