Column Color

[rsivamanickam]

Hi,

I want to set the colors  for  Y axis values as condition based using the Bar 2D chart.

for an example

<chart chartRightMargin='30' numberSuffix='%'>

 <set label='January' value='46' />

 <set label='February' value='85' />

 <set label='March' value='67' />

 <set label='April' value='49' />

 <set label='May' value='76' />

 <set label='June' value='96' />

 <set label='July' value='62' />

 <set label='August' value='62' />

 <set label='September' value='37' />

 <set label='October' value='49' />

 <set label='November' value='76' />

 <set label='December' value='96' />

</chart>

 

The values between

0 - 25 - red color

26 -50 - yellow color 

50 - 75 - Orange color

75 -100 - Green color.

Can i need for this JavaScript or any other.

Thanks,

Maalan

[Arindam]

Hi,

 It is possible with JavaScript and Server Side scripting like (asp, php, asp.net).

[rsivamanickam]

Hi,

Thanks for ur reply. May i know any javascript examples for this..

[Arindam]

Hi,

Could you please use this function?

function getXML(){

var data = [

  ['January', 46],

  ['February', 85],

  ['March', 67],

  ['April', 49 ],

  ['May', 76],

  ['June', 96],

  ['July', 62],

  ['August', 62],

  ['September', 37],

  ['October', 49],

  ['November', 76],

  ['December', 96]

];

  var strXML="<chart chartRightMargin='30' numberSuffix='%25'>";

  for(var i=0;i<12;i++){

var color="";

   var value=data[1];

 

   switch (true){

case (value>=0 && value<=25):

color="color='FF0000'";

break;

case (value>=26 && value<=50):

color="color='EAE03B'";

break;

case (value>=50 && value<=75 ):

color="color='E28B55'";

break;

case (value>=75 && value<=100):

color="color='00FF00'";

break;

default:

color="color='0000FF'";

break;

};

 

strXML += "<set label='" + data[0] + "' value='" + value + "' " + color + " />";

     

 }

 

 strXML +="</chart>";

 

 return(strXML);

 

  }

Use it this way, please dont forget to add FusionCharts.js

<div id="chart1div">

  This text is replaced by the Flash movie.

</div>

<script type="text/javascript">

var chart1 = new FusionCharts("FusionCharts/Bar2D.swf", "ChId1", "400", "300", "0", "0");

chart1.setDataXML(getXML());

chart1.render("chart1div");

</script>

[rsivamanickam]

Hi Team,

Thanks for ur reply. The code is working fine. I'm wondering of your service and quick reply.