How to add flags to countinuous update angular highcharts

Question

I tried to add flags for loading dynamical data that worked at first when I used the continuous update charts as follows https://www.highcharts.com/stock/demo/dynamic-update and then the flags as follows https://www.highcharts.com/stock/demo/flags-shapes.

Can you please give me some solution for adding flags for continuous data? Also, I would want that if the continuous data exceeds some limit, the flags should appear on that series. And i want flags on continuous data also

i forgot to add js fiddle https://jsfiddle.net/BlackLabel/8c6mw5vf/ and i want flags on continuous data if it exceeds the limit — Gvd Kishore, Feb 05 '19 at 07:57
Editing your question is not a problem, since it would probably improve it ;) — user871611, Feb 05 '19 at 12:28

score 1 · Accepted Answer · answered Feb 05 '19 at 14:46

1

Similar to adding points for the basic series, you should also add flag series points:

    events: {
        load: function () {
            var series = this.series[0],
                flagSeries = this.series[1];

            setInterval(function () {
                var x = (new Date()).getTime(), // current time
                    y = Math.round(Math.random() * 100);

                series.addPoint([x, y], true, true);

                flagSeries.addPoint({
                    x: x,
                    title: y
                });
            }, 1000);
        }
    }

Live demo: https://jsfiddle.net/BlackLabel/rh8jug5d/

API: https://api.highcharts.com/class-reference/Highcharts.Series#addPoint

answered Feb 05 '19 at 14:46

ppotaczek

36,341
2
14
24

But when there is no data that exceeds the flags value the flag is interrupting the graph like its showing on x axis title or some where else while it should not be there because there is no data that exceeds the flag – Gvd Kishore Feb 08 '19 at 12:07
Hi Gvd Kishore, In this case you need to only add flag series point if base series point exists: https://jsfiddle.net/BlackLabel/xpou6s8L/ – ppotaczek Feb 08 '19 at 12:22
For adding in series it is ok. but in pre loaded data its not happening like when there is some pre loaded data and we are adding flags on them its misleading the whole chart when there is no flag data means inn default series flags – Gvd Kishore Feb 11 '19 at 05:42
forgot to add code like when we add flags in default graph type: 'flags', name: 'rpm alert', data: [{ x: this.newalertvalue, title: 'ALERT', text: 'Rpm threshold Exceeded' }], onSeries: 'Speed', color: Highcharts.getOptions().colors[5], // same as onSeries fillColor: Highcharts.getOptions().colors[5], shape: 'squarepin' in here when this.newalertvalue is not available the graph is going blank – Gvd Kishore Feb 11 '19 at 10:07
Hi Gvd Kishore, Could you provide me with a reproduction of this situation on jsfiddle? – ppotaczek Feb 11 '19 at 12:04
in this fiddle "jsfiddle.net/046vozxy" wheni there is no x data in type: flags the graph is going blank – Gvd Kishore Feb 12 '19 at 09:46
hi @ppotaczek can we remove the old flags and keep only new like when the new data arrives the old flags should go way and only new flags should be there – Gvd Kishore Feb 12 '19 at 11:35
Hi Gvd Kishore, Sorry, but I do not see any problems in the example you provided me. To remove old flags and add the new ones, just use `setData` metohd on the flag series: https://api.highcharts.com/class-reference/Highcharts.Series#setData – ppotaczek Feb 12 '19 at 11:51

How to add flags to countinuous update angular highcharts

1 Answers1