syampillai / SOCharts

A wrapper around the "echarts" JavaScript library to use it as a Vaadin component.
Apache License 2.0
27 stars 11 forks source link

How to add dynamically BarChart on the chart #38

Open EmilienRNN opened 3 months ago

EmilienRNN commented 3 months ago

Hello, First, I wanted to say that your library is really cool to use and a lot of stuff can be done thanks to your work. I have a chart with multiple BarChart (more precisely StackedBarChart). I want to add one by one the barcharts on the chart like that my user can display what he wants. However, I have tried to use clear(), update(), removeAll() methods in order to update the chart but it doesn't work. I works but the data is not well displayed. Example : I add BarChart1, works well, well displayed. I add BarChart2, the data of BarChart1 is destroyed. Only remains the data of barchart2 but we can still see the StackedBarChart1 on the chart (but it is not displayed on the good values, BarChart1 is displayed on values of Barchart2). Hope I was quite clear.

Bowl76 commented 3 months ago

Hi, I assume you used proper Position parameters to place charts, for example for 3 charts placed horizontally I use this position values (not all code is listed)


        soChart = new SOChart();
        soChart.setSize("1900px", "600px");

        Position p = new Position();
        // chart Left
        p.setWidth(Size.percentage(30));
        //small gap on left side to allow some space for axis labels
        p.setLeft(Size.percentage(2));
        // coord. system needed for bar/line charts
        rcoords1.setPosition(p);

        // chart Center
        p = new Position();
        p.setWidth(Size.percentage(30));
        p.justifyCenter();
        rcoords2.setPosition(p);

        // chart Right
        p = new Position();
        p.setWidth(Size.percentage(30));
        // create small gap on the right side
        p.setRight(Size.percentage(2));
        rcoords3.setPosition(p);

I haven't tried adding this dynamically but if you still have issues you could try creating three different containers (SOChart), placing each chart (Bar, Line, etc) in separate SOChart container and then positioning containers with HorizontalLayout, VerticalLayout or some other layouth components.

Regards

EmilienRNN commented 3 months ago

Hello, I will try to be more clear. I want to display Barcharts representing a number of publication type per year. One BarChart is linked to a publication type. I can have multiple BarCharts stacked on top of others in order to have an idea of total of publications on one year. I managed to display everything in my database. But something that i want to recreate is the way of clicking on the legend in order to show/hide some barcharts by another way that i created. But nothing really works.

sochart

Here you have an example of what i manage to plot but it means that i have to put everything from the beginning. What I want is to choose which publication type i want to display thanks to a MultiSelectComboBox. When i add an element in the MultiSelectComboBox, i want the data linked to this element to be added dynamically in the chart. But it doesn't really work by using legend.hide(element) or legend.show(element) or soChart.update()

Hope i was clear.

Bowl76 commented 3 months ago

Oh, I'm sorry, I misunderstood your issue. I don't have a clue so far, other that regenerating/redrawing all charts from scratch each time and leaving out charts that are not selected. I anything useful comes to my mind I'll post back. Regards

Bowl76 commented 3 months ago

Have you tried with

legend.hide(barChart1);
sochart1.update();

I've converted a small example from SOCharts to add previously prepared barchart with one button and then simulate clicking on legend mark to hide another barchart wih legend.hide(someChart) with second button. I think the same should work in MultiSelectComboBox, with proper event handling.

Link to example

I hope this helps. Regards

EmilienRNN commented 3 months ago

Hello, Yeah I have tried that as you said. The hide function works well but if i want to show again the barchart, it does not work at all with the show(barchart) of the function.

Bowl76 commented 3 months ago

Yes you are right, legend.show(chart) doesn't have any effect. Only clicking on the legend symbol to show or hide specific chart seems to work ok. If I knew a way to capture that click event and replicate it or at least what is the content of that legend click event that would probably solve this issue. Regards

EmilienRNN commented 3 months ago

No problem, I did it another way by deleting and creating again a chart when i click on a simple button. It's a shame that we can not find something that works a little as the legend of a chart : when you click on it, it hides or shows the data.