CODEWITHSUNDEEP
javascriptamchartsamstock
DarkCid
DarkCid

Reputation: 227

Customize the amCharts Stock Chart legend

I use an amCharts' Stock Chart with the comparison function. I use the StockLegend object for the legend and I want to customize the valueTextComparing parameter. Actually, I have this :

var stockLegend = new AmCharts.StockLegend();
stockLegend.markerType = 'bubble';
stockLegend.markerSize = 8;
stockLegend.horizontalGap = 1;
stockLegend.spacing = 100;
stockLegend.periodValueText = '[[value.close]]';
stockLegend.valueTextComparing = '[[value]] | [[percents.value]]%';

What I want is to have two different colors for [[percents.value]] switch the value is positive or negative (and add bold effect on all the valueTextComparing).

I see in the documentation a valueFunction parameter, but not the equivalent for Comparing.

Can you help me?

Upvotes: 1

Views: 1293

Answers (1)

DarkCid
DarkCid

Reputation: 227

OK I find a way to do what I want. It's a bit cheating but it's work. First, I use a specific character to separate the value and the percent (here the "|") :

stockLegend.periodValueText = '[[value.close]]|[[percents.value.close]]%';
stockLegend.valueTextComparing = '[[value]]|[[percents.value]]%';

After that, I created another Legend without amCharts in HTML :

<div id="graph_second_legend">
    <div id="gsl_0_circle"></div>
    <div id="gsl_0"></div>
    <div id="gsl_1"></div>
    <div id="gsl_2_circle"></div>
    <div id="gsl_2"></div>
    <div id="gsl_3"></div>
</div>

Then, I created a function to change this legend :

function parseLegend($){
    $('.amChartsLegend text').each(function(index){
        switch(index){
            case 0:
                var text = $(this).text();
                var content = '<span class="graph_fund_label">' + text + '</span>';
                $('#gsl_'+index).html(content);
                break;
            case 2:
                var text = $(this).text();
                var content = '<span class="graph_index_label">' + text + '</span>';
                $('#gsl_'+index).html(content);
                break;
            default:
                var text = $(this).text().split('|');
                var negative = text[1].split('-');
                var negaClass = '';
                if(negative.length > 1){
                    negaClass = ' negative';
                }
                var content = '<span class="graph_vl_amount">' + text[0] + '</span>&nbsp;&nbsp;&nbsp;&nbsp;';
                content = content + '<span class="graph_vl_percent' + negaClass + '">' + text[1] + '</span>';
                $('#gsl_'+index).html(content);
                break;
        }
    });
}

And finally, I call this function when graph selection changed :

chart.addListener("zoomed", function(event){
    parseLegend($);
});

And when the mouse is moving hover the graph :

$('.amChartsPanel').mouseover(function(){
    setTimeout(function(){parseLegend($);}, 10);
});
$('.amChartsPanel').mouseout(function(){
    setTimeout(function(){parseLegend($);}, 10);
});
$('.amChartsPanel').mousemove(function(){
    setTimeout(function(){parseLegend($);}, 10);
});
$('.amChartsPanel').mouseleave(function(){
    setTimeout(function(){parseLegend($);}, 10);
});

(I used a timeout because amCharts take a moment to change the Legend and the javascript events are too fast for him).

Upvotes: 0

Related Questions