Basically, I want to implement a webpage using Primefaces line chart that can change every one second.
In my managed bean, I get, say 100 data from my database. Instead of populating the line chart all at once, I want to display them like a data wave, so that these 100 data can be shown in 100 seconds.
How can I implement this?
You should get 100 data from DB and store them in a list let say main list, and there should be one more list which will be refreshed every one second and the current element of main list will be appended to second list . Sth. like that:
@ManagedBean
@ViewScoped
public class DataBean {
private ArrayList<Data> mainList;//fill this from DB via seperate DAO class
private ArrayList<Data> viewList;
public int counter;
//getter and setters
public void refreshList() {
viewList.add(mainList.get(counter);
counter++;
}
}
And at the view layer you should call refreshList method periodically of course this can be done with p:poll or p:remoteCommand. RemoteCommand needs to be called more than once via JS code, it's like:
jQuery(document).ready(function () {
setInterval("updateChart", 1000);//every 1 sec
});
And this func. will call the p:remoteCommand which is named as updateChart:
<p:remoteCommand name="updateChart" actionListener="#{dataBean.refreshList}"
update="myChart"/>
myChart is the client id of your p:lineChart component you have to give the exact ID, you can detect it via your browser's developer settings.
And remember that this is not the exact implementation there can be errors, and p:lineChart expects model classes instead arrayLists, I've never used chart components but I'm assuming series similar to lists. Hope this can guide you.
