It is currently Sat Oct 20, 2018 8:16 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: 12
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: 737
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: 12
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: 737
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: 12
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: 737
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: 12
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: 12
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: 737
Joined: Fri Sep 01, 2017 1:01 pm

Re: HighStock Navigator - Add Icons to Navigator

Postby ruvani881 » Mon Feb 19, 2018 2:59 pm

Hi Daniel,

Appologies, it was quiet hard to reproduce the error. However I have tried again.

This is the link for the jsFiddle.

https://jsfiddle.net/ruwani881/g82gzsnf/165/

Scenario
1. Volume - Column chart - Y axis 0
2. Volatility - Area chart - Y axis 1
3. zIndex on Volume chart set as 2 to get it front of the volatility chart.
4. Click on the options Alpha, Beta and Gamma should add bubble charts (it would be 1 bubble chart for each selected option)
5. If a bubble chart is already exist, next time on 'Add or Update Series' data should be updated.

Reproduce the error
1. Select both Alpha and Beta options
2. Clikc "Add or Update Series''
Note: We are using Highstock 5.0.14 licenced version.

Error

highstock.js:335 Uncaught TypeError: Cannot read property '0' of undefined
at p.update (https://cdnjs.cloudflare.com/ajax/libs/ ... js:335:318)
at p.<anonymous> (https://cdnjs.cloudflare.com/ajax/libs/ ... js:492:341)
at p.a.(anonymous function) [as update] (https://cdnjs.cloudflare.com/ajax/libs/ ... k.js:19:99)
at https://cdnjs.cloudflare.com/ajax/libs/ ... js:484:281
at Array.forEach (<anonymous>)
at a.each (https://cdnjs.cloudflare.com/ajax/libs/ ... .js:27:404)
at D.updateNavigatorSeries (https://cdnjs.cloudflare.com/ajax/libs/ ... k.js:484:1)
at D.setBaseSeries (https://cdnjs.cloudflare.com/ajax/libs/ ... k.js:483:6)
at a.Chart.<anonymous> (https://cdnjs.cloudflare.com/ajax/libs/ ... js:492:250)
at a.Chart.a.(anonymous function) [as addSeries] (https://cdnjs.cloudflare.com/ajax/libs/ ... k.js:19:99)


Notes:
1. I don't get this error if I commented the "zIndex = 2" in code line 71.
2. I don't get this error if I use Highchart v6.0 ( you can try this in jsFiddle)

I believe this error is Highchart related and this may have fixed in Highchart v6.0, but we have licence only for Highchart 5.0. Appreciate, if there is any workaround for this and if you could explain the reason for this.
if this have fixed in the Highchart v6.0 could you please confirm it as.

Please let me know if anything not clear.

Thanks.
Ruvani
ruvani881
 
Posts: 12
Joined: Wed Feb 07, 2018 11:00 am

Re: HighStock Navigator - Add Icons to Navigator

Postby daniel_s » Tue Feb 20, 2018 5:51 pm

hi ruvani881,

Now I see the problem, so thank you for more detailed description of it. That's right, it only occurs in v5.0.14 and below, because it is fixed in this #c549955. Here is the link to commit changes: https://github.com/highcharts/highcharts/commit/c5499558522d3d01de94b7ca2ea83e0bf78f76f3

If you would like to simply use that changes, you should override two functions that was changed in that commit, just by doing it like in the example below:

Live example: https://jsfiddle.net/msfut9bo/

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

Re: HighStock Navigator - Add Icons to Navigator

Postby ruvani881 » Tue Feb 20, 2018 6:08 pm

Hi Daniel,

Thanks very much.

I will try this. :)
ruvani881
 
Posts: 12
Joined: Wed Feb 07, 2018 11:00 am

Re: HighStock Navigator - Add Icons to Navigator

Postby ruvani881 » Tue Feb 20, 2018 6:55 pm

Hi Daniel,

is there a version 5.x with this fix ?

Since we have licence for version 5, are we able to get a patch for this rather than via jsFiddle.

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

Re: HighStock Navigator - Add Icons to Navigator

Postby daniel_s » Wed Feb 21, 2018 11:09 am

hi ruvani881,

Unfortunately, there is no version with this fix. It came out from v6.0.0, so the way out of that issue is using the code below in the same place where you importing the Highcharts. Here is the necessary raw code:
Code: Select all
(function(H) {
   H.Series.prototype.update = function (newOptions, redraw) {
      var series = this,
         chart = series.chart,
         oldOptions = series.userOptions,
         oldType = series.oldType || series.type,
         newType = newOptions.type || oldOptions.type || chart.options.chart.type,
         proto = H.seriesTypes[oldType].prototype,
         n,
         preserveGroups = [
            'group',
            'markerGroup',
            'dataLabelsGroup'
         ],
         preserve = [
            'navigatorSeries',
            'baseSeries'
         ],

         animation = series.finishedAnimating && { animation: false };

      if (Object.keys && Object.keys(newOptions).toString() === 'data') {
         return this.setData(newOptions.data, redraw);
      }

      if (
         (newType && newType !== oldType) ||
         newOptions.zIndex !== undefined ||
         series.options.isInternal
      ) {
         preserveGroups.length = 0;
      }

      H.each(preserve.concat(preserveGroups), function (prop) {
         preserve[prop] = series[prop];
         delete series[prop];
      });

      newOptions = H.merge(oldOptions, animation, {
         index: series.index,
         pointStart: series.xData[0]
      }, { data: series.options.data }, newOptions);

      series.remove(false, null, false);
      for (n in proto) {
         series[n] = undefined;
      }
      H.extend(series, H.seriesTypes[newType || oldType].prototype);

      H.each(preserve, function (prop) {
         series[prop] = preserve[prop];
      });

      series.init(chart, newOptions);
      series.oldType = oldType;
      chart.linkSeries();
      if (H.pick(redraw, true)) {
         chart.redraw(false);
      }
   }
 
 
  H.Navigator.prototype.updateNavigatorSeries = function () {
      var navigator = this,
         chart = navigator.chart,
         baseSeries = navigator.baseSeries,
         baseOptions,
         mergedNavSeriesOptions,
         chartNavigatorSeriesOptions = navigator.navigatorOptions.series,
         baseNavigatorOptions,
         navSeriesMixin = {
            enableMouseTracking: false,
            index: null,
            linkedTo: null,
            group: 'nav',
            padXAxis: false,
            xAxis: 'navigator-x-axis',
            yAxis: 'navigator-y-axis',
            showInLegend: false,
            stacking: false,
            isInternal: true,
            visible: true
         },
         navigatorSeries = navigator.series = H.grep(
            navigator.series || [], function (navSeries) {
               var base = navSeries.baseSeries;
               if (H.inArray(base, baseSeries) < 0) {

                  if (base) {
                     H.removeEvent(
                        base,
                        'updatedData',
                        navigator.updatedDataHandler
                     );
                     delete base.navigatorSeries;
                  }
                  navSeries.destroy();
                  return false;
               }
               return true;
            }
         );

      if (baseSeries && baseSeries.length) {
         H.each(baseSeries, function (base) {
            var linkedNavSeries = base.navigatorSeries,
               userNavOptions = !H.isArray(chartNavigatorSeriesOptions) ?
                     chartNavigatorSeriesOptions :
                     H.defaultOptions.navigator.series;

            if (
               linkedNavSeries &&
               navigator.navigatorOptions.adaptToUpdatedData === false
            ) {
               return;
            }

            navSeriesMixin.name = 'Navigator ' + baseSeries.length;

            baseOptions = base.options || {};
            baseNavigatorOptions = baseOptions.navigatorOptions || {};
            mergedNavSeriesOptions = H.merge(
               baseOptions,
               navSeriesMixin,
               userNavOptions,
               baseNavigatorOptions
            );

            var navigatorSeriesData = baseNavigatorOptions.data || userNavOptions.data;
            navigator.hasNavigatorData = navigator.hasNavigatorData || !!navigatorSeriesData;
            mergedNavSeriesOptions.data = navigatorSeriesData || baseOptions.data && baseOptions.data.slice(0);

            if (linkedNavSeries) {
               linkedNavSeries.update(mergedNavSeriesOptions);
            } else {
               base.navigatorSeries = chart.initSeries(mergedNavSeriesOptions);
               base.navigatorSeries.baseSeries = base; // Store ref
               navigatorSeries.push(base.navigatorSeries);
            }
         });
      }
      if (
         chartNavigatorSeriesOptions.data &&
         !(baseSeries && baseSeries.length) ||
         H.isArray(chartNavigatorSeriesOptions)
      ) {
         navigator.hasNavigatorData = false;
         chartNavigatorSeriesOptions = H.splat(chartNavigatorSeriesOptions);
         H.each(chartNavigatorSeriesOptions, function (userSeriesOptions, i) {
            navSeriesMixin.name = 'Navigator ' + (navigatorSeries.length + 1);
            mergedNavSeriesOptions = H.merge(
               H.defaultOptions.navigator.series,
               {
                  color: chart.series[i] &&
                     !chart.series[i].options.isInternal &&
                     chart.series[i].color ||
                     chart.options.colors[i] ||
                     chart.options.colors[0]
               },
               navSeriesMixin,
               userSeriesOptions
            );
            mergedNavSeriesOptions.data = userSeriesOptions.data;
            if (mergedNavSeriesOptions.data) {
               navigator.hasNavigatorData = true;
               navigatorSeries.push(chart.initSeries(mergedNavSeriesOptions));
            }
         });
      }

      this.addBaseSeriesEvents();
   }
})(Highcharts)

Also, you could wrap it up into a module and import it as a file.

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

Re: HighStock Navigator - Add Icons to Navigator

Postby ruvani881 » Thu Mar 01, 2018 12:45 pm

Hi Daniel,

Thanks for your help last time. It worked.

We need to do one more change

We would like to set the navigator icons for Alpha, Beta and Gamma in different heights.
We thought may be we can acheive this through setting the flag icon's vertical line heights.
Please let us know how to acheive this or if there is a better approach to set the heights.

so that all 3 navigator icons would place vertically in one line. like below
____________________________________________________________
--------------Alpha icon-----------------------------------------------------------
--------------Beta Icon------------------------------------------------------------
--------------Gamma icon--------------------------------------------------------
____________________________________________________________

Our latest example :

https://jsfiddle.net/ruwani881/94sbnrp2/10/

To get the chart,

Click on 'Update forecast chart'
Select options 'Alpha', 'Beta'.
Click 'Add or Update Series'
ruvani881
 
Posts: 12
Joined: Wed Feb 07, 2018 11:00 am

Next

Return to Highstock Usage

Who is online

Users browsing this forum: No registered users and 2 guests