Skip to content
This repository has been archived by the owner on Jul 10, 2020. It is now read-only.

Cannot update text in plots #59

Open
ChristofferHS opened this issue Oct 12, 2017 · 3 comments
Open

Cannot update text in plots #59

ChristofferHS opened this issue Oct 12, 2017 · 3 comments

Comments

@ChristofferHS
Copy link

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
Copy link
Owner

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
Copy link
Author

ChristofferHS commented Oct 17, 2017

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
Copy link

alanamircruz commented Nov 20, 2017

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;
    }
  1. I have an array lets say a global variable, List 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();
      	}
  1. 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.

@moberwasserlechner moberwasserlechner added this to the 1.2.0 milestone Dec 20, 2017
@moberwasserlechner moberwasserlechner removed this from the 1.2.0 milestone Mar 19, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

3 participants