nandv
Posts: 12
Joined: Sat Sep 11, 2021 5:01 am

Efficiently draw (and code) large # of 'flags'

Highstock newbie here, even new to Javascript (I am a python person):

My project is simple, to have a stacked 5 min and 15 min charts (with dataGrouping disabled), and need to put some markers (or flags) on some specific points. I've also modified the sample code to have both the crosshair and selected ranges synced. (see (2) and (3)), for whatever reason the sample code from https://jsfiddle.net/BlackLabel/rLy1uxd0/
doesn't work since the Y Axis for both charts are of the same length where I am trying to sync a 5min chart with a 15min chart so coded a little index lookup code as

Code: Select all

// return the chart2 (15m corresponding data array index)
function syncid(v) {
    var z;
    var c2data = chart2.series[0].processedXData
    z = c2data.findIndex(ele => ele >= v);
    if (c2data[z] != v) {
	z = z -1;
    }
    return z
}
Pretty happy with what I've got so far, with two remaining issues need help from here:

1. The indicator value subgraph (marked (1)), values are in the range of [-130 to 130], why the system will always pad the area to [-200 to 200]? Is there any way to set it to [-130..130]?
2. I need to read in an array and plot/render/annotate them. The flags/marker is just a simple triangle, no text, and no fancy pictures.

I've read thru the doc and demo codes, seems there're three ways to do this:
1. flags --> being a series, I did a quick check and it has some performance hits!
2. annotate: seems not very convenient to have a loop to quickly build up the annotation data.
3. renderer, I've seen some renderer code and it's not very 'declarative'!

I suspect renderer is the fastest, flags slowest, but renderer is hard to code..
Can annotation handle say > 2000 'triangles' efficiently?
Also do we have some examples of declaring annotations (from a read-in JSON array or set)? All the examples I've seen are individually declared, with an emphasis on showing rich varieties of annotation content (which I don't need!)

Thanks.

Image
nandv
Posts: 12
Joined: Sat Sep 11, 2021 5:01 am

Re: Efficiently draw (and code) large # of 'flags'

This is solved by generating a list of circle shapes anchored by the bar data

Code: Select all

 
            shapes: [{
		point: {
                    xAxis: 0,
                    yAxis: 0,
 		    x: data[20][0],
 		    y: data[20][2] + 5
		},
		type: 'circle',
		r: 2
            }, {}....
            ]
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Efficiently draw (and code) large # of 'flags'

Hello,

Welcome to our forum and thanks for contacting us with your question!

The idea with annotations seems very good. I'm glad you found a solution.

However, there is a limit to customizing them. If you want to do more, you can use a renderer. You can add logic to the render function to add your own type of annotation that you can use as a chart option as in the demo below.
Demo: https://jsfiddle.net/BlackLabel/bepxgtzr/

As for the first point, I think I would need a code demo from you, for example in jsfiddle.

If you have further inquiries, you may reach out to me at any time.
Best regards!
Dawid Draguła
Highcharts Developer
nandv
Posts: 12
Joined: Sat Sep 11, 2021 5:01 am

Re: Efficiently draw (and code) large # of 'flags'

Dawid, Thanks for the notes.
I've managed to put in roughly
Relative new to Javascript, I've tried to get this stuff to jsfiddle but failed.. will keep on working on it
In the meantime, I've tried loading ~100 small circles and the speed is very good so I won't try your renderer suggestions.
The remaining issues are in my private msg, please take a look when you get a chance.
Thanks
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Efficiently draw (and code) large # of 'flags'

Hi,

I think the problem with opening your demo was that by default jsfiddle runs on HTTPS and the API you are referencing is on HTTP. For the demo to work, you need to run jsfiddle on HTTP.

The problem with displaying the maximum and minimum on the yAxis is that they are automatically calculated and want to cover the entire tick intervals. To set the range you want, I suggest you set tickInterval to a value that divides the range into equal parts, i.e. in your case, e.g. 130, 65 etc.
See: https://api.highcharts.com/highcharts/y ... ckInterval

Demo: http://jsfiddle.net/BlackLabel/2gv1usnb/

Feel free to ask any further questions!
Best regards!
Dawid Draguła
Highcharts Developer
nandv
Posts: 12
Joined: Sat Sep 11, 2021 5:01 am

Re: Efficiently draw (and code) large # of 'flags'

The support here is just amazing, thanks.
I've tried the 65/130 etc but didn't seem to affect performance. I will experiment more.
Re-enable rangeSelector and set it to be 0 (smallest) speed up the innitial loading quite a bit (This is a roughly one year 5-min chart)

While I was looking thru areas to save more real estate, a wild idea popped up:
It is doable to (javascript) to open another browser window and create the 2nd chart (15m) in it? While still maintaining crosshair and selectRange synced?
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Efficiently draw (and code) large # of 'flags'

Glad you like our support!

Unfortunately, I don't think that's possible. Javascript does not allow communication between browser tabs mainly for security reasons.

Regards!
Dawid Draguła
Highcharts Developer

Return to “Highcharts Stock”