javascript - Customize the amCharts Stock Chart legend -


i use amcharts' stock chart comparison function. use stocklegend object legend , want customize valuetextcomparing parameter. actually, have :

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 want have 2 different colors [[percents.value]] switch value positive or negative (and add bold effect on valuetextcomparing).

i see in documentation valuefunction parameter, not equivalent comparing.

can me?

ok find way want. it's bit cheating it's work. first, use specific character separate value , percent (here "|") :

stocklegend.periodvaluetext = '[[value.close]]|[[percents.value.close]]%'; stocklegend.valuetextcomparing = '[[value]]|[[percents.value]]%'; 

after that, created 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, created function change 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, call function when graph selection changed :

chart.addlistener("zoomed", function(event){     parselegend($); }); 

and when mouse moving hover 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 timeout because amcharts take moment change legend , javascript events fast him).


Comments

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

java - Android – MapFragment overlay button shadow, just like MyLocation button -