CODEWITHSUNDEEP
javascriptjquerychartslegendfusioncharts
CrazyCoder
CrazyCoder

Reputation: 2388

Show legend using jquery

I'm creating some charts using Fusion Charts. Due to some problem, I have to display legends separately and not use the legends provided by fusion charts.
I have a table data in which I have status and their hex colors.

status  code
A       #006400
B       #FFFFFF
C       #FFFF00
D       #90EE90
E       #FFA500

I need to display this in the form of legend on my page using jquery or javascript.
Something like
A and then show color of A
B and then show color of B
and so on.

Can anyone give me an idea how it can be done? Thanks.

Upvotes: 1

Views: 2150

Answers (3)

Cybernetic
Cybernetic

Reputation: 13334

You can store your table data as json:

legend_data = [
    {
    'status' : 'A',
    'code' : '#006400'
    },
    {
    'status' : 'B',
    'code' : '#FFFFFF'
    },
    {
    'status' : 'C',
    'code' : '#FFFF00'
    },
    {
    'status' : 'D',
    'code' : '#90EE90'
    },
    {
    'status' : 'E',
    'code' : '#FFA500'
    }
    ]

Create a div in your html that will hold legend info:

<html>
<body>
<div id='legend'></div>
</body>
</html>

Add CSS styling:

body {
  color: white;
}
#legend {
  width: 100px; 
  height: 150px; 
  border-radius: 3px; 
  background: grey;
  padding: 10px;  
  font-family: arial; 
}
.circle {
  width: 20px; 
  border-radius: 100%;
}

Write a function in JS/jQuery that will load your legend_data into the #legend div:

function create_legend() {
   $.each(legend_data, function(index, element) {
       col = element.code;
       $('#legend').append("<table width='100%'><td align='center' style='font-size: 20px'>" + element.status + "</td><td align='center'><div class='circle' style='background: " + col + "'>&nbsp;</div></td></table>"); 
   });
}

create_legend();

Here is the result:

enter image description here

Upvotes: 3

Sanyami Vaidya
Sanyami Vaidya

Reputation: 809

You can try this,

JS code:

 var StatusDiv = '';
  $.ajax({
            type: "GET",
            url: 'URL',
            dataType: "JSON ",
            success: function (data) {
                var result = data;
                $.each(result, function (i, Status) {
                    StatusDiv += '<div style="font-size:12px;margin-right:8px;float:left;" title="' + Status.name + '"><div style="height:15px;width:15px;margin-top:0px;background-color:' + Status.color + ';float:left"></div><div style="float:none;padding-left:17px;">' + Status.name + '</div></div>';
                });
                $('#StatusColorDescription').html(StatusDiv);
            },
            error: function (result) {
            }
        });

HTML:

<div id="StatusColorDescription" style="float:left"></div>

Upvotes: 1

A.D.
A.D.

Reputation: 2372

You can use "colorrange": property for legends color condition or for more help visit this article...
legend-options

Upvotes: 0

Related Questions