BenjiG
Posts: 11
Joined: Fri Dec 03, 2021 10:37 am

Dynamic Markers

Hello,

On my graph I would like that on some curves, on the maximum value a marker appears.
I found this: http://jsfiddle.net/d_paul/oLh69sgp/

However, I have 2 problems when I try to adapt it to another example:
1 - What do I have to change so that on the curve in black, the symbol also appears on the largest value? I wanted to make a copy but I think there is a better way and anyway it is probably wrong because it does not work.

2- My biggest problem: If I modify on the navigator at the bottom, is it possible that the symbol changes position depending on the displayed section? In other words, the symbol should appear only on the largest value of the graph as it is displayed.

Here is the link I modified: http://jsfiddle.net/Lcfp56kt/

Thank you!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Dynamic Markers

Hello BenjiG,

Thanks for contacting us with your questions.

That logic is fine. It can be implemented in a few slightly different ways but general idea is to find a point with the highest value and then update its marker. It didn't work in your case because you didn't change the variable name and in result you were iterating over the same set of points again.

If you want to update marker only for points that are visible you should use the exactly same logic with afterSetExtreme event and check conditionally if point is visible on the plot.
Demo: http://jsfiddle.net/BlackLabel/qutosdz2/
API reference: https://api.highcharts.com/highcharts/x ... etExtremes

Let me know if that was what you were looking for!
Regards!
Mateusz Bernacik
Highcharts Developer
BenjiG
Posts: 11
Joined: Fri Dec 03, 2021 10:37 am

Re: Dynamic Markers

Hello,

Thanks

Indeed it works on the link (on the other hand the suns are not removed as you go along, so if you touch the navigator too much a lot of markers appear).

On the other hand, when I want to adapt it on my code it does not work. Before digging deeper I already have a problem between this version of the code that works:

Code: Select all

       load: function() {
        var chart = this,
            points = chart.series[0].points,
            points2 = chart.series[1].points,
            maxValue,
            maxValue2,
            chosenPoint = chart.series[0].points[0],
            chosenPoint2 = chart.series[1].points[0];

        points.forEach(function(point, index) {
          if (!maxValue || maxValue < point.y) {
            maxValue = point.y;
            chosenPoint = point;
          }
        });
        
        points.forEach(function(point2, index) {
          if (!maxValue2 || maxValue2 < point2.y) {
            maxValue2 = point2.y;
            chosenPoint2 = point2;
          }
        });

        chosenPoint.update({
          marker: {
			enabled:true,
            symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
          }
        });
        chosenPoint2.update({
          marker: {
			enabled:true,
            symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
          }
        });
      }
DEMO : https://raspigournayaronde.sytes.net/Gr ... hique2.php

And the one proposed here that does not work:

Code: Select all

  load: function() {
        var chart = this,
            points = chart.series[0].points,
            points2 = chart.series[1].points,
            maxValue,
            maxValue2,
            chosenPoint = chart.series[0].points[0],
            chosenPoint2 = chart.series[1].points[0];

        points.forEach(function(point, index) {
          if (point.y > chosenPoint.y && point.isInside) {
            maxValue = point.y;
            chosenPoint = point;
          }
        });
        
        points.forEach(function(point, index) {
          if (point.y > chosenPoint2.y && point.isInside) {
            maxValue2 = point.y;
            chosenPoint2 = point2;
          }
        });

        chosenPoint.update({
          marker: {
			enabled:true,
            symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
          }
        });
        chosenPoint2.update({
          marker: {
			enabled:true,
            symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
          }
        });
      }
DEMO : https://raspigournayaronde.sytes.net/Gr ... phique.php
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Dynamic Markers

Hi BenjiG,

Here is a demo where sun marker is being updated when extremes change: http://jsfiddle.net/BlackLabel/g5xj9u80/

Could you try to reproduce your issue in js fiddle or other online IDE? It is hard to tell for me what is wrong without looking at the code. Demo and part of code that you shared is helpful but not enough to get whole context of the issue.

Regards!
Mateusz Bernacik
Highcharts Developer
BenjiG
Posts: 11
Joined: Fri Dec 03, 2021 10:37 am

Re: Dynamic Markers

Thank you for the answer,
In fact my code is quite complex and is not entirely mine, it depends on a DB and many PHP functions.

I managed to integrate the icons at the beginning in the "load" but I had to remove the "&& point.isInside" from the IF, I don't know why. => https://raspigournayaronde.sytes.net/Gr ... phique.php

On the other hand the part in "xAxis: {
events: {
afterSetExtremes"
doesn't work, the graph is displayed with all the series activated and especially the crash tab.

I could attach my code but I understand that it is not customary to do so. But if a solution is found this way I will still be able to share here the error encountered and the solution.

Thank you!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Dynamic Markers

Hello BenjiG,

'point.isInside' rule is to check if point is actually visible, if it is not located somewhere beyond the range. When it comes to afterSetExtreme event, it has almost the same logic as load event. The only difference is that it is triggered everytime extremes are being changed, e.g. when user change data range with navigator, or range selector. We want to use it that way because we want to update only markers that are present on selected date range.

When it comes to your code it would be great if you could reproduce it in a form of a simplified working demo. You can remove most of your custom functions. You don't need to worry about your DB and PHP because you can simply hardcode your data that you get from db. If it is not possible then feel free to share your raw code. I don't guarantee that I will be able to help you in that case, and we don't work like that in general but I can try.

Regards!
Mateusz Bernacik
Highcharts Developer
BenjiG
Posts: 11
Joined: Fri Dec 03, 2021 10:37 am

Re: Dynamic Markers

Hello,

thank you for the proposal.
I managed to find another solution that works better in my case, just add a dataLabels for each series where you want to display an icon on the max and min
The only problem is that the icon appears multiple times if the values are several times reached.

Code: Select all

				dataLabels: {
					useHTML: true,
					enabled: true,
					formatter: function () {
					var max = this.series.dataMax,
					min = this.series.dataMin;
					
					if (this.y === max) {
						return '<img src="images/thermochaud.png" style="position:absolute; left: -15px;top: -25px;margin: 0 0, padding: 0 0">';
						}
					if (this.y === min) {
						return '<img src="images/thermofroid.png" style="position:absolute;left:-15px;top:-25px;margin: 0 0, padding: 0 0"><img>';
						}
						}
						}
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Dynamic Markers

Hi BenjiG,

If you want to show only one marker in cases where max or min values have duplicates you need to define some criteria that would determine on which point marker should be shown. For example if you want to show the marker on the latest point with max value then you could compare points indexes. It is up to you. If you have already an idea about such criteria feel free to tell me and I will help you implement it.

Regards!
Mateusz Bernacik
Highcharts Developer
BenjiG
Posts: 11
Joined: Fri Dec 03, 2021 10:37 am

Re: Dynamic Markers

Hello,
Thank you for the answer!
In fact it would be necessary that for the image appears only once per hour (in "timestamp") in order to avoid having many superimposed images.
Thank you.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Dynamic Markers

Hi BenjiG,

I could try to create demo with solution like that but I still don't know how would you determine which point should have changed marker if there are few points with same highest values within one hour. If you would have any idea or you would need my help then let me know!

Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”