Add button to legend based on stack name

[ericplan]

Lost in syntax again

Trying to hide the dummy series. Succeeded, but now I don't get it back. Added this only for the EDV dummy series on line 44. (added a single value to the empty series, just for debugging)

Fiddle: http://jsfiddle.net/rs5otukm/

[ericplan]

I guess this is the max I get out: http://jsfiddle.net/6L0c3r14/1/
In almost every case it works, but only when you first hide a named series and after that hide a year(stack) when press show again on the named series all years will show up, because no flag is set yet. After hiding and showing the corresponding year this is corrected and the display is again correct.

[ericplan]

Hoped to show the final result, I did spend a lot of time in fiddling with flags and logic. For everyday use it should be ok, but if you are a button presser the thing gets mixed up. Learned a lot about javascript and falsies etc. Maybe I give it another try, but for the time being this will do.
http://jsfiddle.net/w2aodfjt/4/

One solution is to make the year charts 'only hide' by adding a ShowinLegend=false for this. What is the syntax when I want to put this in the year loop?

[ericplan]

It keeps me busy
This piece of code should work, but there is something strange I don't get. The return on the 'else if' is false, but the code is executed nonetheless. Here is the fiddle: http://jsfiddle.net/dgt8pq52/5/

It is this piece of code on line 45 (for EDV) , and repeated for EMP and PHP on lines further below.

Code: Select all

else if	((this.name == s.userOptions.id) && (!s.visible || s.flag !== false)) {
              this.legendSymbol.element.style.fill = this.color
              s.show();
              console.log
              ('EDV show',s.index,(this.name == s.userOptions.id) && (!s.visible || s.flag !== false) )
            }

Easy to see this behaviour by pressing the sequence EDV > 2015 > EDV.
Series 7 shows up, although it returns a false on the evaluation. Why

[ericplan]

After another day I am sure this won’t work without adding the flag mechanism to the named series as well. So that is my target for today. The linkedParent is the key for the named series. One simple question. How can I initial set the flag for all series to false at the start, even without a LegendItemClick?

[bastss]

Eric,

I wrote you before that your project is too complicated for regular support time. I gave you a lot of guidelines on how to achieve what you want - rest it's just a JavaScript programming skill and work on it.

One simple question. How can I initial set the flag for all series to false at the start, even without a LegendItemClick?

Here is an example of how to set an initial set flag for all series after load the chart: https://jsfiddle.net/BlackLabel/c8spj3qr/

Kind regards!

[ericplan]

Thanks, you helped me a lot. Especially adding a flag (or any other tag) like this is useful. I'm still spending (too) much time on this, but I hope to show the final result here and with that help others. Highcharts is very powerful, but to learn it from the api's is very hard.

[bastss]

Hey Eric,

Thanks for kind words and your willingness to share your work with users. If I will have more free time I also will try to work on this case because it is an interesting challenge.

API includes the chart configuration options, and the methods and properties of Highcharts objects, what you are trying to do it's more advanced and not supported by regular API options. Callbacks functions triggered after some events give you a free hand to integrate into the core code and implement what you are trying to do - custom functionality.

Kind regards!

[ericplan]

Well, I guess I did it.
It took me long time to find out that the preventDefault() doesn't work well with the linkedTo mechanism. Don't know if this is a bug or not, but showing the parent after hiding always shows all linked child series, regardless the preventDefault.

I found another way by combining your strategy with the flag and pushing values to an array. As far as I know it works OK, but only when you hide all series from one sort, you have to reload. And I don't like this piece of code, but for now it works. Target is to push unique values to an array from a forEach loop.

Code: Select all

chart.series.forEach(s => {
            if (s.userOptions.stack && s.visible) {
              names.push(s.name)
            }
          })
          uniq = [...new Set(names)];
          console.log(uniq)

It can probably be written in two lines or so, but my JS knowledge is simply not good enough. Only issue open is when hiding all series, I hope to fix that in some time.

I hope that others can use this example.. That is why I keep posting.

Link to the fiddle: http://jsfiddle.net/6n94x0wv/7/

[ericplan]

I rewrote a small part to clean the code:

Code: Select all

if (s.userOptions.stack && s.visible) {
              names.push(s.name)  }
          })
          names = [...new Set(names)]

This will do for my purpose. There is still a minor fault in the logic, but only after numerous clicks. I was not able to reproduce the sequence, but sometimes it goes wrong.

Still looking for ideas to prevent the lock when all years or all name series are hidden. This produces an empty array. Is it possible to prevent at least one series from hiding?

The fiddle: http://jsfiddle.net/36zwf1t5/2/

[ericplan]

I could reproduce the error, it seemed the logic with flags ran out of sync when hiding series. I replaced it with the array routine I earlier put it the show series part and removed all the flags. As far as I know it runs flawless now.

Furthermore I cleaned up the code and I was able to put it all in one code block in the plotoptions section. This results in much nicer code.

Only thing left is how to handle the empty array? Easiest option should be to redraw the chart, but how? (line 23, line 24) I tried { chart.redraw() } but this didn't work.

The fiddle: http://jsfiddle.net/2ckgpbLa/8/

[ericplan]

Implemented this solution. Works fine, but you have to stick to your choice. First hiding all years and then pressing a name gives wrong result.

http://jsfiddle.net/2ckgpbLa/10/

[bastss]

Hey Eric!

Thank you for sharing your solution! Good that you made it and found a satisifed solution!

In case of any future custom projects, you can contact with our company - https://www.blacklabel.pl/

Kind regards!

[ericplan]

[...]
It took me long time to find out that the preventDefault() doesn't work well with the linkedTo mechanism. Don't know if this is a bug or not, but showing the parent after hiding always shows all linked child series, regardless the preventDefault.

[...]

Did you read this? Is it expected behaviour or a bug?

Thank you for sharing your solution! Good that you made it and found a satisifed solution!

In case of any future custom projects, you can contact with our company - https://www.blacklabel.pl/

You're welcome, this was the last chart from this small solar energy monitor program to be rewritten from Open Flash Charts to Highcharts. I hope it is finished for now. I learned a lot from you and Highcharts support. Thanks for that.

[bastss]

Eric,

Sorry for missing this part of your message.
As you can find on the Internet preventDefault() is a method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be. More: https://developer.mozilla.org/en-US/doc ... entDefault

In simply word - in your case, preventDefault stopped default legend feature and triggered only your custom code, so I don't think that is a bug. As I mentioned many posts before - your case requires some changes in linkedTo feature logic (core) - actually here:

Code: Select all

            linkSeries: function () {
                var chart = this, chartSeries = chart.series;
                // Reset links
                chartSeries.forEach(function (series) {
                    series.linkedSeries.length = 0;
                });
                // Apply new links
                chartSeries.forEach(function (series) {
                    var linkedTo = series.options.linkedTo;
                    if (isString(linkedTo)) {
                        if (linkedTo === ':previous') {
                            linkedTo = chart.series[series.index - 1];
                        }
                        else {
                            linkedTo = chart.get(linkedTo);
                        }
                        // #3341 avoid mutual linking
                        if (linkedTo && linkedTo.linkedParent !== series) {
                            linkedTo.linkedSeries.push(series);
                            series.linkedParent = linkedTo;
                            series.visible = pick(series.options.visible, linkedTo.options.visible, series.visible); // #3879
                        }
                    }
                });
                fireEvent(this, 'afterLinkSeries');
            },

Notice that series visible is setting by picking one boolean from many options. It is a fix for bug #3879 -
https://github.com/highcharts/highcharts/issues/3879

Kind regards!