It is currently Mon Feb 19, 2018 1:55 pm Advanced search

HighStock Navigator - Add Icons to Navigator

Technical support for the Highcharts Stock package

HighStock Navigator - Add Icons to Navigator

Postby ruvani881 » Wed Feb 07, 2018 1:10 pm

Hi,

We are using HighStock Series on top of it 'bubble chart'.Also 'navigator' bind to one of the series.

We want to add a flags/icons on the navigator which move according to bubble movements.

Example : Bubble chart has 3 bubbles named Alpha, Beta, Gamma and Navigator icons would be 'a', 'b', 'c', where 'a' moves when moving the 'Alpha'.

- How can we add flags/icon on the navigator ?
- How could we make it interact with the bubble chart ?
ruvani881
 
Posts: 5
Joined: Wed Feb 07, 2018 11:00 am

Re: HighStock Navigator - Add Icons to Navigator

Postby daniel_s » Thu Feb 08, 2018 5:09 pm

hi ruvani881,

Yu can achieve the effect that you expecting, by setting series.showInNavigator equal to true on bubble series, and defining the series.navigatorOptions.type (of that bubble series of course) equal to ''flags". I you will do that, there would be one more thing to do, namely configure name and title parameters of each data point of your bubble series, and its dataLabel format. Please take a look at code below:
Code: Select all
series: [{
    type: 'bubble'
    showInNavigator: true,
    navigatorOptions: {
       type: 'flags'
    },
    dataLabels: {
      enabled: true,
      format: '{point.name}'
    }
}]

Code: Select all
data: [{
  x: Date.UTC(2014, 1, 3),
  y: 5,
  title: 'A',
  name: 'Alpha'
}, {
  x: Date.UTC(2014, 1, 5),
  y: 15,
  title: 'B',
  name: 'Beta'
}, {
  x: Date.UTC(2014, 1, 6),
  y: 7,
  title: 'C',
  name: 'Gamma'
}]


API Reference ('flags' series, because 'bubble' is not officially supported in combination with Highstock, and it isn't in API at now):
https://api.highcharts.com/highstock/series.flags.showInNavigator
https://api.highcharts.com/highstock/series.flags.navigatorOptions
https://api.highcharts.com/highstock/series.flags.dataLabels.format

Live example: http://jsfiddle.net/BlackLabel/c02fme0b/ (with Draggable Points plugin)

Best regards!
Daniel Studencki,
Highcharts Developer
daniel_s
 
Posts: 336
Joined: Fri Sep 01, 2017 1:01 pm

Re: HighStock Navigator - Add Icons to Navigator

Postby ruvani881 » Thu Feb 08, 2018 6:59 pm

Hi,

Thanks very much for your anser.
Could the flags be custome icons/svg like a small bubble ?
ruvani881
 
Posts: 5
Joined: Wed Feb 07, 2018 11:00 am

Re: HighStock Navigator - Add Icons to Navigator

Postby daniel_s » Fri Feb 09, 2018 2:26 pm

hi ruvani881,

If you would like to set shape of flag, you should just use series.shape parameter in your series.navigatorOptions object. I recommend you to choose one from 'circle' or 'circlepin' values. Take a look at code below:
Code: Select all
navigatorOptions: {
    shape: 'circlepin',
    type: 'flags'
},


If you would like to place there some image, my solution for that is little kind of tricky. I generate new pattern SVG element, and set it as a color value of flags. There you have the live example in which I show how to achieve that:

Live examples:
http://jsfiddle.net/BlackLabel/zvgued6t/ (with image)
http://jsfiddle.net/BlackLabel/krjdvdLq/ (with bubble)

Best regards!
Daniel Studencki,
Highcharts Developer
daniel_s
 
Posts: 336
Joined: Fri Sep 01, 2017 1:01 pm

Re: HighStock Navigator - Add Icons to Navigator

Postby ruvani881 » Fri Feb 09, 2018 4:46 pm

Hi Daniel,

Thanks very much, it is what I was expecting :D

Just one more question.

I have some issues when displaying multiple series on navigator. I believe this is because order of receiving data ( streaming data).

There are 5 charts in this example as we create one series for each option in the bubble chart as there will be more series added on bubble chart's drag event.

For an example, I would say, we have
1. volume curve - with navigator
2. volatility curve
3. bubble - Alpha - drag event adds another series
4. bubble - Beta- drag event adds another series
5. bubble - Gamma- drag event adds another series

3,4,5 added with highchart addSeries with a foreach loop.

All 1, 3, 4, 5 should display on navigator and all these series will be added dynamically.
As the charts creating asynchronously, displaying navigator makes issues.

Are you aware of this issue? Any advice is appreciated.

closest example is this. but only difference is we add the 3 bubble series (3, 4, 5 ) after we creating the chart with the 1, 2
https://jsfiddle.net/gh/get/jquery/1.7. ... le-series/



I have tried to do something like this
https://jsfiddle.net/ruwani881/o0zogp7q ... onAwnujKJP
ruvani881
 
Posts: 5
Joined: Wed Feb 07, 2018 11:00 am

Re: HighStock Navigator - Add Icons to Navigator

Postby daniel_s » Mon Feb 12, 2018 11:32 am

hi ruvani881,

I took a closer look on the example that you provide me with, and there are errors in console caused by the wrong implementation of series, because you tried to assign the object type variable to data property.
I'm not so sure about what do you expect, and what effect exactly do you want to achieve, so please provide me with properly working example, and try to describe your issue and requirements more precisely.

Best regards!
Daniel Studencki,
Highcharts Developer
daniel_s
 
Posts: 336
Joined: Fri Sep 01, 2017 1:01 pm

Re: HighStock Navigator - Add Icons to Navigator

Postby ruvani881 » Tue Feb 13, 2018 5:02 pm

Hi Daniel,

It is quite hard to give a sample as our scenario is based on streaming data. I can give you an idea with static data.
https://jsfiddle.net/ruwani881/o0zogp7q/45/

However, my problem is related to the navigator.

When the navigator is added to multiple series what would be the best way to update the each series on arrival of new data sets.


Kind Regards,
Ruvani
ruvani881
 
Posts: 5
Joined: Wed Feb 07, 2018 11:00 am

Re: HighStock Navigator - Add Icons to Navigator

Postby ruvani881 » Tue Feb 13, 2018 7:24 pm

I tried to explain much with the comments on the chart,
In real scenario,
I have
volume series in yAxis:0 and set to zIndex: 2 (Volume series should be on top of volatility)
volatatlity series in yAxis:1

After updating the bubble charts with new sets of data, I guess the chart is redrawing.
My assumption is that it makes charts to draw volatility first and then navigator series shows errors as it can't find the volume series.

code sample from the real scenario,

Code: Select all
let seriesOptions = [
            {
                type: 'column',
                name: "Volume",
                yAxis: 0,
                zIndex: 2,
                data:this.getData();
                id: 'VolumeSeries',
                showInNavigator: true,
                navigatorOptions: {
                    adaptToUpdatedData: true,
                    type: 'column'
                }
            },
            {
                type: 'area',
                name: "Volatility",
                yAxis: 1,
                data: this.getData();
            },
]


For the bubble chats update

Code: Select all
if (!seriesExists) {
                    if (this._chart && this._chart.series && this._chart.series.length) {
                        this.addExecutionOptionSeries(data);
                    }
                } else {
                    this._chart.get(executionOptionSeries.userOptions.id).remove();
                    this.addExecutionOptionSeries(newData);
                    this._chart.redraw();
                }
ruvani881
 
Posts: 5
Joined: Wed Feb 07, 2018 11:00 am

Re: HighStock Navigator - Add Icons to Navigator

Postby daniel_s » Wed Feb 14, 2018 11:22 am

hi ruvani881,

I'm still unable to reproduce the error that you are trying to describe above. Could you provide me with example and most possible specific steps to reproduce the error? Additionally, please attach the screen of the error here, as well as the lines of code where it occurs. Unfortunately, It's hard to debug the problem with that amount of informations and I can't help you in any way.

Best regards!
Daniel Studencki,
Highcharts Developer
daniel_s
 
Posts: 336
Joined: Fri Sep 01, 2017 1:01 pm


Return to Highstock Usage

Who is online

Users browsing this forum: No registered users and 1 guest