Cannot update text in plots

[ChristofferHS]

Hi, I am having some issues with updating text in plots. The code below renders a graph with the title and y axis labels both set to "Label 4", like it should. However, clicking the button has no effect on the graph, even though calling the function that the button calls has an effect when done directly in the code (inside the BasicPlot class constructor; before the chart is drawn?).

The code below can be run by inserting

Component grid = new BasicPlot().getGrid();
setContent(grid);

into MyUI.java.

import com.byteowls.vaadin.chartjs.ChartJs;
import com.byteowls.vaadin.chartjs.config.LineChartConfig;
import com.byteowls.vaadin.chartjs.options.Position;
import com.byteowls.vaadin.chartjs.options.scale.Axis;
import com.byteowls.vaadin.chartjs.options.scale.LinearScale;
import com.vaadin.ui.Button;
import com.vaadin.ui.Component;
import com.vaadin.ui.HorizontalLayout;


public class BasicPlot {
    
    HorizontalLayout grid = new HorizontalLayout();
    int labelNumber = 0;
    LinearScale scale;
    LineChartConfig lineConfig;
    
    public BasicPlot() {
        
        lineConfig = new LineChartConfig();
        
        scale = new LinearScale();
        
        scale.display(true).scaleLabel().display(true).labelString("Initial label")
                .and().position(Position.RIGHT);
        lineConfig.options().scales().add(Axis.Y, scale);
        lineConfig.options().maintainAspectRatio(false);
        
        lineConfig.options().title().display(true).text("Initial title");
        
        ChartJs chart = new ChartJs(lineConfig);
        chart.setSizeFull();
        grid.addComponent(chart);
        
        scale.scaleLabel().labelString("New label 1");
        lineConfig.options().title().display(true).text("New label 1");
        
        
        Button button = new Button("Adjust label");
        button.addClickListener(event -> adjustLabel());
        grid.addComponent(button); 
        grid.setSizeFull();
        
        
        scale.scaleLabel().labelString("New label 2");
        lineConfig.options().title().display(true).text("New label 2");
        
        labelNumber = 2;
        
        // verify that the adjust function works
        adjustLabel();
        adjustLabel();
        

    }
    
    private void adjustLabel() {
        labelNumber++;
        String newLabel = "Label " + labelNumber;
        System.out.println("Title and axis Y axis label should now read: " + newLabel);
        
        lineConfig.options().title().text(newLabel);
        
        scale.scaleLabel().labelString(newLabel);
    }
    
    public Component getGrid() {
        return grid;
    }    
    
}

[moberwasserlechner]

Hi,

automatic reloading of the chart is not supported.

You can try to reload the chart by calling

 chart.refreshData();

This example might be of use: http://vaadin-demos.qqjtxeeuih.eu-central-1.elasticbeanstalk.com:5600/#!pie-chart-refresh-data

BR, Michael

[ChristofferHS]

Unfortunately, chart.refreshData(); doesn't seem to work for updating these labels. Currently, I create new ChartJs objects each time I need to update label of the y-axis.

I haven't tested this very thoroughly, but I also have issues switching animation on or off after the chart has been created; so I guess that's the same thing, then.

[alanamircruz]

Hey hi everybody,

I faced the same stuff here while trying to use Locale on my Charts in order to translate the labels displayed, so the thing that I did (following up SeawaterIce suggestion) is to:

1 . Add the ChartJs object (previously configurated) to a "wrapper" element, in this case a VerticalLayout:

public VerticalLayout getChart() {
// Set the Charts configuration over here
        chart = new ChartJs(lineConfig);
        chart.setSizeFull();

        wrapper.addComponent(chart);
        return wrapper;
    }

2. I have an array lets say a global variable, List<String> labels, containing the text values for the labels displayed (obtained through a properties file: EN, DE, SPA) like this (in getChart function as well):

      	Collections.addAll(lineLabels,
      		messages.getString("HardwareTabImpl.acc.labels").split(",")); //$NON-NLS-1$

      	for(String label : lineLabels) {

          	lineConfig.data()
          		.addDataset(new LineDataset().label(label).fill(false))
          		.and();
      	}

3. So each time I want to update my text labels in other language, I call this function:

    public void updateStrings() {

    	wrapper.removeComponent(chart);
    	wrapper.addComponent(getChart());

    	if (this.accus != null) {

    		setData(this.accus);
    	}
    }

So honestly I am not an expert here with Vaadin (just one month developing with it), but it works for me and I hope it can work for you too.

Regards (and any feedback from the masters its really welcome), Alan C.