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

What is the correct way to change a scale label? #54

Closed peet-hex closed 4 years ago

peet-hex commented 4 years ago

I am trying : CartesianLinearAxis axis1= (CartesianLinearAxis) chart.getOptions().getScales().getYAxes().get(0); axis1.getScaleLabel().setLabelString("something new"); chart.getOptions().getScales().setYAxes(axis1); chart.reconfigure();

but this gives: Uncaught Error: com.google.gwt.event.shared.UmbrellaException: Exception caught: (TypeError) : Cannot read property 'options' of undefined

Am I missing a step?

stockiNail commented 4 years ago

@peet-hex I have tested with LineChart sample of showcase, adding your code:

chart.getOptions().setResponsive(true);
chart.getOptions().setMaintainAspectRatio(true);
chart.getOptions().getLegend().setDisplay(true);
chart.getOptions().getTitle().setDisplay(true);
chart.getOptions().getTitle().setText("Line chart");
chart.getOptions().getTooltips().setMode(InteractionMode.INDEX);
chart.getOptions().getTooltips().setIntersect(false);
chart.getOptions().getHover().setMode(InteractionMode.NEAREST);
chart.getOptions().getHover().setIntersect(true);

List<Dataset> datasets = chart.getData().getDatasets(true);

LineDataset dataset1 = chart.newDataset();
dataset1.setLabel("dataset 1");

IsColor color1 = GoogleChartColor.values()[0];

dataset1.setBackgroundColor(color1.toHex());
dataset1.setBorderColor(color1.toHex());
dataset1.setFill(false);
double[] values = getRandomDigits(months);
List<Double> data = dataset1.getData(true);
for (int i = 0; i < values.length; i++) {
    data.add(values[i]);
}
datasets.add(dataset1);

LineDataset dataset2 = chart.newDataset();
dataset2.setLabel("dataset 2");

IsColor color2 = GoogleChartColor.values()[1];

dataset2.setBackgroundColor(color2.toHex());
dataset2.setBorderColor(color2.toHex());
dataset2.setData(getRandomDigits(months));
dataset2.setFill(false);
datasets.add(dataset2);

CartesianCategoryAxis axis1 = new CartesianCategoryAxis(chart);
axis1.setDisplay(true);
axis1.getScaleLabel().setDisplay(true);
axis1.getScaleLabel().setLabelString("Month");

CartesianLinearAxis axis2 = new CartesianLinearAxis(chart);
axis2.setDisplay(true);
axis2.getScaleLabel().setDisplay(true);
axis2.getScaleLabel().setLabelString("Value");

chart.getOptions().getScales().setXAxes(axis1);
chart.getOptions().getScales().setYAxes(axis2);

chart.getData().setLabels(getLabels());

This is the result:

canvas541

Invoking a randomize of the chart, I've added your code as following:

@UiHandler("randomize")
protected void handleRandomize(ClickEvent event) {
    for (Dataset dataset : chart.getData().getDatasets()) {
        dataset.setData(getRandomDigits(months));
    }
    CartesianLinearAxis axis1= (CartesianLinearAxis) chart.getOptions().getScales().getYAxes().get(0);
    axis1.getScaleLabel().setLabelString("something new");
    chart.getOptions().getScales().setYAxes(axis1);
    chart.reconfigure();
}

The result is the following (the label of scale has been change, without any exception):

canvas542

May you provide the complete code of chart configuration and when you are invoking the reconfiguration?

peet-hex commented 4 years ago

Thanks I will try and create a minimal example of the problem but I am trying to simultaniously change axis labels and datasets. I have three datasets associated with the y axis on the left and three with a second y axis on the right and your question leads me to ask whether there is a preferred order to call chart.update and chart.reconfigure? Should one update the axis scale first or the datasets and labels first while trying to maintain valid yAxisID associations?

peet-hex commented 4 years ago

Ah, found my problem. It was yAxisID alignment, Chartjs problem, not Charba related.

stockiNail commented 4 years ago

Good to hear to found it. I'm gonna have a look to Chart,js issue as well.

Thanks I will try and create a minimal example of the problem but I am trying to simultaniously change axis labels and datasets. I have three datasets associated with the y axis on the left and three with a second y axis on the right and your question leads me to ask whether there is a preferred order to call chart.update and chart.reconfigure? Should one update the axis scale first or the datasets and labels first while trying to maintain valid yAxisID associations?

About updatevs reconfigure, update must be used ONLY when you are changing data of datasets but the configuration remains the same, instead reconfiguration must be used when you are changing the options (in your case the scales).

Reconfiguration is anyway an update therefore if you have to change dataset and scales, ONLY one reconfiguration call is enough.

Thank you!