pepstock-org / Charba

J2CL and GWT Charts library based on CHART.JS
https://pepstock-org.github.io/Charba-Wiki/docs
Apache License 2.0
62 stars 6 forks source link

Multiple Y axes show up in stacked bar chart with a time series x axis #101

Closed divq closed 3 months ago

divq commented 3 months ago

I used the following code to create a stacked bar chart, with two datasets and a time x axis and a number y axis, but the result chart has two y axis, and I do not know what went wrong.

Thanks for your help

    StackedBarChartWidget createStackedBarChart() {
        StackedBarChartWidget chart = new StackedBarChartWidget();

        CartesianTimeSeriesAxis timeAxis = new CartesianTimeSeriesAxis(chart, ScaleId.create("TIME"), AxisKind.X);
        timeAxis.getTime().setUnit(TimeUnit.HOUR);

        CartesianLinearAxis yAxis = new CartesianLinearAxis(chart, ScaleId.create("Y"), AxisKind.Y);
        timeAxis.setStacked(true);
        yAxis.setStacked(true);
        chart.getOptions().getScales().setAxes(timeAxis, yAxis);

        StackedBarDataset ds = chart.newDataset();
        final int count = 3;
        Date[] randomDates = ChartUtil.getRandomDates(count);
        ds.setDataPoints(ChartUtil.createTimeSeriesPoints(randomDates, ChartUtil.getRandomNumbers(count, 100)));
        ds.setLabel("Box1");
        StackedBarDataset ds2 = chart.newDataset();
        ds2.setDataPoints(ChartUtil.createTimeSeriesPoints(randomDates, ChartUtil.getRandomNumbers(count,5)));
        ds2.setLabel("Box2");
        chart.getData().setDatasets(ds, ds2);
        return chart;
    }
public class ChartUtil {

    public static Date[] getRandomDates(int count) {
        Date[] dates = new Date[count];
        long now = System.currentTimeMillis();
        for (int i = 0; i < dates.length; i++) {
            dates[i] = new Date(now + 3600L * 1000L*i);
        }
        return dates;
    }

    public static DataPoint[] createTimeSeriesPoints(Date[] dates, double[] values) {
        DataPoint[] dataPoints = new DataPoint[dates.length];
        for (int i = 0; i < dataPoints.length; i++) {
            DataPoint dataPoint = new DataPoint();
            dataPoints[i] = dataPoint;
            dataPoint.setX(dates[i]);
            dataPoint.setY(values[i]);
        }
        return dataPoints;
    }

    public static double[] getRandomNumbers(int count, int baseLine) {
        double[] doubles = new double[count];
        Random random = new Random();
        for (int i = 0; i < doubles.length; i++) {
            doubles[i] = random.nextDouble() + baseLine;
        }
        return doubles;
    }
}
image
stockiNail commented 3 months ago

@divq the issue is on the following statement:

CartesianLinearAxis yAxis = new CartesianLinearAxis(chart, ScaleId.create("Y"), AxisKind.Y);

Chart.js by default is using x and y as scale ids. In you code you are creating another scale (because you are using Y uppercase) which is not used.

Try one the following solutions (in my opinion the best is the last one, by constant):

lowercase y

CartesianLinearAxis yAxis = new CartesianLinearAxis(chart, ScaleId.create("y"), AxisKind.Y);

using constructor where scale id is a string

CartesianLinearAxis yAxis = new CartesianLinearAxis(chart, "y", AxisKind.Y);

using scale id constant DefaultScaleId

CartesianLinearAxis yAxis = new CartesianLinearAxis(chart, DefaultScaleId.Y);

Let me know if it is working.

divq commented 3 months ago

@divq the issue is on the following statement:

CartesianLinearAxis yAxis = new CartesianLinearAxis(chart, ScaleId.create("Y"), AxisKind.Y);

Chart.js by default is using x and y as scale ids. In you code you are creating another scale (because you are using Y uppercase) which is not used.

Try one the following solutions (in my opinion the best is the last one, by constant):

lowercase y

CartesianLinearAxis yAxis = new CartesianLinearAxis(chart, ScaleId.create("y"), AxisKind.Y);

using constructor where scale id is a string

CartesianLinearAxis yAxis = new CartesianLinearAxis(chart, "y", AxisKind.Y);

using scale id constant DefaultScaleId

CartesianLinearAxis yAxis = new CartesianLinearAxis(chart, DefaultScaleId.Y);

Let me know if it is working.

This works, thanks!