CODEWITHSUNDEEP
tooltiphighcharts
Prosto Trader
Prosto Trader

Reputation: 3527

Highstocks tooltip doesnt work when chart is small?

I've created custom formatter function for highstocks.js:

            var tooltip = [];
            for (key in this.points) {//if point type is portfolio
                if ( this.points[key].point.type == 'portfolio' ) { 
                    tooltip[key] = '<span style="color:' + his.points[key].series.color +'">' + this.points[key].series.name + '</span>' + '<br/><b>'+ _('', 'Net assets: ') + _s(this.points[key].point.sum, 2) + '</b>' + '<br/><b>'+ _('', 'Чистые активы: ') + _s(this.points[key].point.netassets, 2) +'</b> (<span style="color:' + ( (this.points[key].point.change < 0 )?'#b86565':'#619000') +'">' + _s(this.points[key].point.change, 0)  +'%</span>)<br/>';
                } else {
                    tooltip[key] = '<span style="color:' + this.points[key].series.color +'">' + this.points[key].series.name + '</span>: <b>'+ _s(this.points[key].point.y, 2) +'</b> (<span style="color:' + ( (this.points[key].point.change < 0 )?'#b86565':'#619000') +'">' + _s(this.points[key].point.change, 0)  +'%</span>)<br/>';
                }
            }
             var tl = '';
             for (key in tooltip) {
                tl += tooltip[key]
             }
            var date = Highcharts.dateFormat('%d %b %Y', this.points[0].point.x);

            tl = date + '<br/>' +tl;
            return tl;

The feature is that this function usues not only Y of a point, but also some additinal properties, that I have added to the point: such as type.

For points that are "portfolio" type the tooltop shoold be rendered differently and has to have much more data then for "regular" point type.

The problem that I've encountered that when conatiner div has small width, my template doesnt work, although it works fine when div's width is big.

Highstocks.js does default aggregation when renders chart to relativly small area: http://api.highcharts.com/highstock#plotOptions.area.dataGrouping

When points are groupped, they lose all additional attributes, leaving only Y property, so complex tooltop wont work.

To fix it I had to disable data groupping in chart options: 

        plotOptions: {
        series: {
            dataGrouping: {
                enabled: false
            }
        }
    },

Is ther a way to display complex tooltip on small chart without disabling dataGrouping?

Upvotes: 0

Views: 138

Answers (2)

Prosto Trader
Prosto Trader

Reputation: 3527

as Pawel Fus suggested, I loop throught all points to find closest value and add additinal attributes for each groupped point.

Here is th whole formmater function. 

formatter: function() {
            var tooltip = [];
             //Тултип
            for (var key in this.points) {//Если точка - пользователь

                //прочитаем тип
                var closestX = 0;
                for (var j in this.points[key].series.options.data ) {
                    if ( Math.abs(this.points[key].series.options.data[j].x - this.points[key].point.x) < diff ) {
                        closestX =  j;
                    }
                    var diff = Math.abs(this.points[key].series.options.data[j].x - this.points[key].point.x);
                }

                this.points[key].point.type = this.points[key].series.options.data[closestX].type;
                this.points[key].point.sum = this.points[key].series.options.data[closestX].sum;
                this.points[key].point.netassets = this.points[key].series.options.data[closestX].netassets;

                if ( this.points[key].point.type == 'portfolio' ) { //если точка не пользователь
                    tooltip[key] = '<span style="color:' + this.points[key].series.color +'">' + this.points[key].series.name + '</span>' +
                        '<br/><b>'+ _('', 'Сумма активов: ') + _s(this.points[key].point.sum, 2) + '</b>' +
                        '<br/><b>'+ _('', 'Чистые активы: ') + _s(this.points[key].point.netassets, 2) +'</b> (<span style="color:' + ( (this.points[key].point.change < 0 )?'#b86565':'#619000') +'">' + _s(this.points[key].point.change, 0)  +'%</span>)<br/>';
                } else {
                    tooltip[key] = '<span style="color:' + this.points[key].series.color +'">' + this.points[key].series.name + '</span>: <b>'+ _s(this.points[key].point.y, 2) +'</b> (<span style="color:' + ( (this.points[key].point.change < 0 )?'#b86565':'#619000') +'">' + _s(this.points[key].point.change, 0)  +'%</span>)<br/>';
                }
            }
             var tl = '';
             for (key in tooltip) {
                tl += tooltip[key]
             }
            //Дата
            var date = Highcharts.dateFormat('%d %b %Y', this.points[0].point.x);

            tl = date + '<br/>' +tl;
             return tl;
        },

Upvotes: 0

Paweł Fus
Paweł Fus

Reputation: 45079

The question is: 'How to group point.type'? I guess you would like to group point by type, and then display n-points in that place? Or group point as is, but in options count number of types? What if user will define myCustomFancyProperty - what then? Aggregate all own properties from point? It's getting harder and harder.. what can I advice is to create an idea here with some explanation/solution.

You can always get from grouped point x-value (this.x), and then loop over all points (accessible via this.points[0].series.options.data), find the closest point to that timestamp and display required value.

Upvotes: 1

Related Questions