What I wanna do: I have a basic line chart which is initialy load with an array of data (series: [...]) which creates me lets say x lines. I will also render x checkboxes above the chart. On click on one of the checkboxes the corresponding line should disappear or appear. Therefor I am listening to the click event and then I want to add or remove a line.
The problem: I can not figure out how to replace the whole series with a new one. What I have found is the setData() method, but that only works on an item of the data array. I also found the methods addSeries() which will add an item. And remove() which will remove a specific item. The problem is, I dont know which item is which. What I would like is to hide a line or show them, but have the full x lines in the data series all the time. I think.
I also found the method update() which will let me pass a new configuration object to the chart, but its not working if i pass the option 'series: newData (array)'.
I am either looking for an option to pass the full data array at the beginning and then hide or show a line, or, to overwrite the full series data at any given them with a new array.
Hopefully thats understandable and someone can point out what I am missing! Thanks!
I have found a solution. I would load the whole data array in the beginning and show or hide certain series for the initial display with the option visible:false.
On click of the checkboxes I need to find the right series and then there are the methods show() and hide() to manipulate that visible property on runtime.
chart.series[myIndex].show();
chart.series[myIndex].hide();
You can use setVisible method for series and bind checkboxes with the series:
var checkboxes = document.getElementById('checkboxes').children;
for (var i = 0; i < checkboxes.length; i++) {
(function(i) {
checkboxes[i].addEventListener('change', function() {
chart.series[i].setVisible(this.checked);
});
})(i);
}
Live demo: http://jsfiddle.net/BlackLabel/ur31g4j5/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#setVisible
Related
I need to save the default positions of the grid items on a button click.
I'm able to save and reload the grid items. but, after resetting the grid items, if I hit F5 it is taking me back to previous grid positions.
I want to save default positions on a click. please help.
thanks in advance.
// I'm not able to save the default grid positions after this line of code.
$grid.packery('reloadItems');
What you are looking for is the "stamp" option for Packery. From Packery's docs:
Packery will layout items around stamped elements.
The stamp option stamps elements only when the Packery instance is
first initialized. You can stamp additional elements afterwards with
the stamp method.
Have a look at this guide for more details and instructions.
I want a behavior like if you click on the first listitem open do a thing, if I click on the second listitem do other thing. Same thing for the third and second.
Similar to switchboard but not in iconview (I have the animason and gtk.stack set up):
https://www.youtube.com/watch?v=Lj2wKNYVFR8
This is the code:
var listbox = new Gtk.ListBox();
listbox.set_activate_on_single_click(true);
var l = new Watcher.List.ListItem("title", "subtitle");
listbox.insert(l, 0);
var l2 = new Watcher.List.ListItem("title2", "subtitle2");
listbox.insert(l2, 1);
"l" and l2 is a Gtk.ListBoxRow object so basically I add 2 listboxrow item into a listbox.
When I click on an Item do stuff:
listbox.row_selected.connect( ()=>{
stack.set_visible_child_name("new");
back.set_child_visible(true);
});
It will always show the stack child named "new" whether I click the first or second item in the list. I can acces the ListBoxRow index but that is just only for a specific Row.
I need to add custom formated items into a list and I was told that ListBox can do it. (Others can't?)
My ListBoxRow is just a grid with two labels in it but I want to add buttons and some more later.
Look at the reference for Listbox.row_selected(): You'll see that it has a ListBoxRow argument. You should update your row_selected closure to have that argument as well -- then you can use the row inside the closure to figure out which child you want to set visible.
If you really need to know the index of the row inside the listbox, you call row.get_index().
I want to make a chart with 4 series' and show only 1 or 2 of them at the same time. The user can choose, which series he wants to see. This works fine with series.show and series.hide, but the baseSeries, set in "navigator", doesn't change.
Is there a way to change it dynamically?
Navigator series is based on first series data, as a result is not updated. In case when you would like to update navigator series, you need to use setData() on series[1] object.
http://jsfiddle.net/sbochan/HwuRr/
chart.series[1].setData([5,2,1,2,4,6,10]);
I have a highchart displaying multiple series, each contains 100+ data points
I have a UI containing a checkbox for each series that when clicked calls the series.hide() or series.show() to toggle the hide/show of each line
My problem is that the hide and show are extremely slow such that I cant check one checkbox whilst processing from a previous is taking place
Does anyone know how to handle this?
Thanks
Rather than calling hide() for each series, call setVisible(false, false);. This second parameter is the redraw parameter, and you can avoid causing a redraw (which is slow) for each series.
Then, after you're done changing visibilities, call chart.redraw() once.
http://api.highcharts.com/highcharts#Series.setVisible
as answered in:
Hiding _groups_ of series in Highcharts and jQuery: how to get acceptable performance?
highcharts draw each time a show or hide is called;
disabling and enabling the redraw function worked for me;
var _redraw = this.chart.redraw;
this.chart.redraw = function(){};
//do work
this.chart.redraw = _redraw;
this.chart.redraw();
How about adding visible: false for the series that are hidden before calling Highcharts.chart()?
Please see references: 1. Highcharts API and 2. Demo
In my case, above approach showed the best performance comparing to the followings:
series.hide()
setVisible(false, false)
setVisible(false, true) or setVisible(false, false); redraw();
the SearchFieldDemo works well for me, but has one problem: when you add a new country to the KeywordFilterList through the menu and that new item is on the bottom of the sorted list, then the user doesn't see anything and is unsure if the new item has been added or not.
A solution would be to make the KeywordFilterList scroll to the new item, but I can't figure out, how to do that. I've tried:
void addElementToList(Country country)
{
_countryList.addElement(country);
_keywordFilterField.updateList();
int index = _countryList.getIndex(country);
System.err.println("XXX index: " + index);
_keywordFilterField.setSelectedIndex(index);
}
But this does not have any effect: the printed index is correct and the KeywordFilterList scrolls, but not to a correct spot.
Any ideas please?
Alex
In the sample app you might have noticed the _keywordFilterField.setKeyword(""); line as the first thing they do before adding a new item to the list. This is to guarantee the new item will be visible in the list. Otherwise with some filter applied the list may not display the new item.
So in your code it looks like you don't handle this point. As a result the index you get with int index = _countryList.getIndex(country); may not be the same as it is in the visible filtered by some current keyword list. BTW, to find the index in the visible list you could use the ReadableList which can be got with _keywordFilterField.getResultList().
So the workflow could be as follows:
reset keyword by _keywordFilterField.setKeyword(""); - now there is no filtering applied so the visible list should include a new item.
add a new item to the underlying collection - _countryList.addElement(country);
call _keywordFilterField.updateList(); to refresh the ListField.
to be on the safe side find an index to scroll to by using the collection got by calling the _keywordFilterField.getResultList()
select the new item with _keywordFilterField.setSelectedIndex(index);