How can I use a zk-chart on click? - charts

I have a great problem with ZK charts!
I have 2 type of chart: a chart with data of the current day (so this chart is generated automatically) and a chart with data of a clicked date.
The first chart works correctely, the second not!
If I have clicked on a date, I build a graph! But it's impossible to modify the label position or name of label! And I need to modify these things. This is my graph:
<charts width="1700" style="height: 400px" type="line" model="#bind(vm.chart2)" title="">
</charts>
When I clicked I call this method:
#Command
#NotifyChange("chart2")
public ChartsModel viewGraph(#BindingParam("self") Group self){
String a = self.getLabel();//this is for passed a parameter
ServiceImpl usr = new ServiceImpl();
chart2 = usr.viewGraph(a);
return chart2;
}
viewGraph is so built:
#Override
public ChartsModel viewGraph(String data) {
//chart2 = new Charts();
chart2.setModel(LineLabelsData.setCategoryModel2(data));
chart2.getXAxis().getLabels().setRotation(180);
chart2.getYAxis().getTitle().setText("TEXT");
chart2.getTooltip().setEnabled(false);
chart2.getXAxis().getLabels().setRotation(180);
LinePlotOptions linePlotOptions =
chart2.getPlotData().getPlotOptions().getLine();
linePlotOptions.setEnableMouseTracking(false);
linePlotOptions.getDataLabels().setEnabled(true);
return chart2.getModel();
}
If I print something in this method my console view it correctely! The problem is that
chart2.getYAxis().getTitle().setText("TEXT");
does not work like
chart2.getXAxis().getLabels().setRotation(180);
How can I change that values?

To change yAxis title, you can simply call chart2.getYAxis().setTitle("title");
You may want to post your questions in ZK Forum rather than stackoverflow as our community users are experienced in ZK, and can help you quicker.

Related

Accordion dropdown filtering through ion search bar

Hi I just created the ionic accordion dropdowns by following a tutorial blog link which used widgets for creating an accordion dropdowns, Below is the link of that blog.
http://masteringionic.com/blog/2019-01-27-creating-a-simple-accordion-widget-in-ionic-4/
updated: here is the my project demo link https://stackblitz.com/github/dSaif/search-accordion
Everything is working perfect, but i want to add Ion-searchbar at the top of the accordions sothat the dropdowns gets filter by inputing text.
please assist me how can i do that. Thank you.
You are going to have to create a variable in your homepage to store your filtered results. Then you need to have a filter function that will take the input from the search bar and filter your master list. Keep in mind you should not set the new variable to the master list, this could cause issues due to object referencing.
So you should have something like
in your html
<ion-searchbar placeholder="Search a name." [(ngModel)]="searchValue" (ionChange)="filterList()"></ion-searchbar>
In your ts file
searchValue: string = '';
filteredList: Array<{ name: string, description: string, image: string }> = this.technologies;
// function called in the html whenever you change the ion searchbar value
private filterList(){
//Make a variable so as to avoid any flashing on the screen if you set it to an empty array
const localFilteredList = []
this.technologies.forEach(currentItem => {
//here goes your search criteria, in the if statement
if(currentItem.name && currentItem.name.toLowerCase().includes(this.searchValue.toLowerCase())) {
localFilteredList.push(currentItem);
}
});
//finally set the global filter list to your newly filtered list
this.filteredList = localFilteredList;
}
You also need to make sure to reference the filterList variable instead of the current one you are referencing.

Control Wicket wizard's flow by setting setComplete(boolean)

Hey there I'm still trying to improve a customized Wicket Wizard to display the steps with following states: active, completed, pending. Therefore the information of isCompleted(); should return the right value. Refering to a previous question, isComplete(); returns true, if the wizard can go to the next step.
How can I manipulate this information to get the full advantage of my draft? E.g. in one WizardStep I have multiple input fields.
super(new ResourceModel("daten.title"), new ResourceModel("daten.summary"));
java.util.Collections.addAll(sprachen, "Deutsch","English","Français","Italiano");
add(name = new RequiredTextField<String>("name", Model.of("")));
add(vorname = new RequiredTextField<String>("vorname", Model.of("")));
add(strasse = new RequiredTextField<String>("strasse", Model.of("")));
add(ort = new RequiredTextField<String>("ort", Model.of("")));
...
I don't want the step to "be completed" until each field is filled out. To check the condition I'd have to add an AjaxListener to each component and check for it's state to setComplete(boolean);. Can I control this flow from outside the wizard form? For example with an implementation of ICondition or is there another way? Because basically I can't go to the next step, because all of my textfields are RequiredTextField and cannot be skipped.
Any suggestions are highly appreciated.
Update / Solution
Component buttonbar = getForm().get(Wizard.BUTTONS_ID);
buttonbar.setOutputMarkupId(true);
Just get(Wizard.BUTTONS_ID); won't work.
Thanks to Sven Meier for the hint!
You'll have to add an AjaxFormComponentUpdatingBehavior to all your form components.
Then override #onEvent() in your wizard:
public MyWizard(id, WizardModel model) {
super(id, model);
get(Wizard.BUTTONS_ID).setOutputMarkupId(true);
}
public void onEvent(IEvent<?> event) {
if (event.getPayload() instanceof AjaxRequestTarget) {
((AjaxRequestTarget)event.getPayload()).add(get(Wizard.BUTTONS_ID));
}
}
Let your step#isComplete() return true depending on its model values, this way the wizard buttons will always be up to date.

Issue removing and readding series to chart

I'm trying to write a method in GWT to override the series.show function for all Highcharts series, on show I want to essentially copy the series, remove the series from the chart, and readd it so that showing the series will redraw the line (instead of the default behavior where the line appears and the chart redraws). I have this modeled in a Jsfiddle: http://jsfiddle.net/ax3o8uf3/16/
I used Moxie's highcharts wrapper for GWT and used the setSeriesPlotOptions() method to set the series show event handler and call this native method from inside the onShow().
public static native void showSeries(JavaScriptObject series, JavaScriptObject chart) /*-{
var options = series.options;
options.color = series.color;
options.index = series.index;
options.marker.symbol = series.symbol;
series.remove();
options.visible = true;
chart.addSeries(options);
}-*/;
and everything worked fine. Then we updated the project's highcharts and highstock.js files and it broke everything. Now hiding and showing a series in the legend will cause it to redraw fine for the first series you do it for, but as soon as you try and show another series it breaks and goes back to the default functionality for all series. Any ideas on what I'm doing wrong or what might be causing it to not work after showing a second series on the graph?
I'm not sure why but for some reason using the seriesShowEventHandler() caused it to break after trying to show more than one series, the solution I came up with was something like this:
setSeriesPlotOptions(new SeriesPlotOptions().setSeriesLegendItemClickEventHandler(new SeriesLegendItemClickEventHandler() {
#Override
public boolean onClick(SeriesLegendItemClickEvent seriesLegendItemClickEvent) {
Series series = getSeries(seriesLegendItemClickEvent.getSeriesId());
if(seriesLegendItemClickEvent.isVisible()) {
series.hide();
} else if((series.getOptions().get("type").toString()).equals("\"line\"")){
removeAndReAddSeries(getNativeChart(), series.getNativeSeries());
} else {
series.show();
}
return false;
}
}));

What would be a good way of filtering a GWT CellList using multiple CheckBoxes?

Working in Google Web Toolkit (GWT) I am using a CellList to render the details of a list of Tariffs (using a CompositeCell to show a CheckBoxCell next to a custom cell of my own).
I want to filter the list by tariff length (12, 18, 24, 36 months etc). I would like to render a checkbox for each tariff length at the top of the list, and update the dataProvider as necessary when users uncheck and recheck a box.
I do not know in advance the set of tariff lengths, they will be extracted from the result set when the page is rendered. There could just be two (requiring two checkboxes), but possibly there could be 10 (requiring 10 checkboxes) - I only want to render a checkbox for each as needed.
So somehow I need to associate an int value with each checkbox, and then pass that int to a function that updates the list by removing all tariffs that match. I'm just not sure how to add the handler for the checkboxes and how to get the value for that particular box.
This is what I'm thinking:
// panel to hold boxes
private Panel contractLengthPanel = new HorizontalPanel();
textPanel2.add(contractLengthPanel);
// create a set of the terms, by looping the result set
Set<String> contractTerms = new HashSet<String>();
for(ElecTariff tariff : tariffs)
{
contractTerms.add(Integer.toString(tariff.getContractLength()));
}
// loop that set, creating a CheckBox for each value
for(String term : contractTerms)
{
CheckBox box = new CheckBox(term + " Months");
// set all boxes with the same name, and a unique id
box.getElement().setAttribute("name", "termBoxes");
box.getElement().setAttribute("id", "termBox" + term);
contractLengthPanel.add(box);
}
Now I'm not sure if I'm along the right lines here, but now I have each box as part of the same group (they have the same name) I would like to use that to add a handler that is called when a box is checked or unchecked, passing the box id (which contains the tariff length) to that function.
I hope this wasn't too confusingly written. Help appreciated.
There really is nothing like a "group of checkboxes" in HTML, and neither there is in GWT. There are kind of "groups of radiobuttons" though, but it's only about having their checked state mutually exclusive, it doesn't change anything to the way you work with them from code.
You have to listen to changes on each and every checkbox.
What you can do though is to use the same event handler for all your checkboxes; something like:
ValueChangeHandler<Boolean> handler = new ValueChangeHandler<Boolean>() {
#Override
public void onValueChange(ValueChangeEvent<Boolean> event) {
CheckBox box = (CheckBox) event.getSource();
String id = box.getFormValue();
boolean checked = box.getValue();
…
}
};
(note: I used getFormValue() rather than getElement().getId(); I believe it's a better choice: it's specifically made to associate a value with the checkbox)

How can I tell a DefaultDataTable to refresh itself?

I am new to Wicket. I have a search page with two fields, startDate and endDate, inside a form that is inside a panel. The panel contains a DefaultDataTable. When the user submits the form, I use the startDate and endDate in the onSubmit() to get the results. However, my table remains empty. How do I tell the DefaultDataTable to refresh?
I have added a form and a submit button to this example. If I want to change the contents of the list, where do I do it?
Button submitButton = new Button("submitButton"){
#Override
public void onSubmit(){
System.out.println("submit button was clicked");
}
};
Form myForm = new Form("myForm");
myForm.add(submitButton);
add(myForm);
Ok, here is my comment as proper answer: make the DataProvider.iterator() dependend on the 2 Dates.