areski / django-nvd3

Django wrapper for nvd3 - It's time for beautiful charts
Other
416 stars 124 forks source link

Impossible add more than one tooltip for char #79

Open SalahAdDin opened 8 years ago

SalahAdDin commented 8 years ago

Hi.

In this momment i'm trying doing a multibarchart with multistacked values, very hard, in one requierement is add tooltip for each bar.

I'm doing this in code:

extra_serie_wins = {
        "tooltip": {"y_start": "Wins ", "y_end": " times in the cup "},
    }

    extra_serie_ties = {
        "tooltip": {"y_start": "Ties ", "y_end": " times in the cup "},
    }

    extra_serie_defeats = {
        "tooltip": {"y_start": "Defeats ", "y_end": " times in the cup "},
    }

    """
    colombia = [[1,2,3],[4,5,6],[7,8,9],[10,11,12],[13,14,1]]

    chartdata = {
        'x': xdata,
        'name1': countries[0], 'y1': colombia, 'extra1': extra_serie_wins,
    }
    """

    chartdata = {
        'x': xdata,
        'name1': countries[0], 'y1': ydataw[0], 'extra1': extra_serie_wins,
        'name2': countries[0], 'y2': ydatat[0], 'extra2': extra_serie_ties,
        'name3': countries[0], 'y3': ydatad[0], 'extra3': extra_serie_defeats,
        'name4': countries[1], 'y4': ydataw[1], 'extra4': extra_serie_wins,
        'name5': countries[1], 'y5': ydatat[1], 'extra5': extra_serie_ties,
        'name6': countries[1], 'y6': ydatad[1], 'extra6': extra_serie_defeats,
        'name7': countries[2], 'y7': ydataw[2], 'extra7': extra_serie_wins,
        'name8': countries[2], 'y8': ydatat[2], 'extra8': extra_serie_ties,
        'name9': countries[2], 'y9': ydatad[2], 'extra9': extra_serie_defeats,
    }

And django renders me this:

chart.yAxis
                .tickFormat(d3.format(',f'));
            chart.xAxis
                .tickFormat(d3.format(',f'));

                    chart.tooltipContent(function(key, y, e, graph) {
                        var x = String(graph.point.x);
                        var y = String(graph.point.y);
                                            if(key == 'Colombia'){
                        var y = 'Wins ' +  String(graph.point.y)  + ' times in the cup ';
                    }
                    if(key == 'Colombia'){
                        var y = 'Ties ' +  String(graph.point.y)  + ' times in the cup ';
                    }
                    if(key == 'Colombia'){
                        var y = 'Defeats ' +  String(graph.point.y)  + ' times in the cup ';
                    }
                    if(key == 'Argentina'){
                        var y = 'Wins ' +  String(graph.point.y)  + ' times in the cup ';
                    }
                    if(key == 'Argentina'){
                        var y = 'Ties ' +  String(graph.point.y)  + ' times in the cup ';
                    }
                    if(key == 'Argentina'){
                        var y = 'Defeats ' +  String(graph.point.y)  + ' times in the cup ';
                    }
                    if(key == 'Brasil'){
                        var y = 'Wins ' +  String(graph.point.y)  + ' times in the cup ';
                    }
                    if(key == 'Brasil'){
                        var y = 'Ties ' +  String(graph.point.y)  + ' times in the cup ';
                    }
                    if(key == 'Brasil'){
                        var y = 'Defeats ' +  String(graph.point.y)  + ' times in the cup ';
                    }

                        tooltip_str = '<center><b>'+key+'</b></center>' + y + ' at ' + x;
                        return tooltip_str;
                    });

      chart.showLegend(true);

And, of course! I haven't only tool tip, the last: "tooltip": {"y_start": "Defeats ", "y_end": " times in the cup "}, chart_1

What's can i do for solve this?