FusionCharts - Global population map by continent - Using icon legend with fixed data range

Created using FusionCharts Suite XT - www.fusioncharts.com

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.maps.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<script src="http://static.fusioncharts.com/code/latest/maps/fusioncharts.world.js"></script>

CSS

/*
 * Table styles
 */
table.dataTable {
  width: 100%;
  margin: 0 auto;
  clear: both;
  border-collapse: separate;
  border-spacing: 0;
  /*
   * Header and footer styles
   */
  /*
   * Body styles
   */
}
table.dataTable thead th,
table.dataTable tfoot th {
  font-weight: bold;
  color: #c8d02c;
  background-color: #000000;
}
table.dataTable thead th,
table.dataTable thead td {
  /*lm modif padding: 10px 18px;*/
  padding: auto;
  border-bottom: 1px solid #111111;
}
table.dataTable thead th:active,
table.dataTable thead td:active {
  outline: none;
}
table.dataTable tfoot th,
table.dataTable tfoot td {
  padding: 10px 18px 6px 18px;
  border-top: 1px solid #111111;
}
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting {
  cursor: pointer;
  *cursor: hand;
}
table.dataTable thead .sorting {
	background: black url("../images/sort_both.png") no-repeat center right;
}
table.dataTable thead .sorting_asc {
	background: black url("../images/sort_asc.png") no-repeat center right;
}
table.dataTable thead .sorting_desc {
	background: black url("../images/sort_desc.png") no-repeat center right;
}
table.dataTable thead .sorting_asc_disabled {
  background: black url("../images/sort_asc_disabled.png") no-repeat center right;
}
table.dataTable thead .sorting_desc_disabled {
  background: black url("../images/sort_desc_disabled.png") no-repeat center right;
}
table.dataTable tbody tr {
  background-color: white;
}
table.dataTable tbody tr.selected {
  background-color: #b0bed9;
}
table.dataTable tbody th,
table.dataTable tbody td {
  /*lm modif padding: 8px 10px;*/
  padding: auto;
}
table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
  border-top: 1px solid #dddddd;
}
table.dataTable.row-border tbody tr:first-child th,
table.dataTable.row-border tbody tr:first-child td, table.dataTable.display tbody tr:first-child...

JavaScript

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
     <link rel="stylesheet" href="aeff/jquery.dataTables.css" />
     <script type="text/javascript" language="javascript" src="aeff/jquery.js"></script>
     <script type="text/javascript" language="javascript" src="aeff/jquery.dataTables.min.js"></script>
     <script src="tableau.js"></script>



</head>
<body>
<table id="exampletoto" class="display" cellspacing="0" width="100%" height:"300px";>
        <thead>
            <tr>
                <th>Organization</th>
                <th>Nb docs</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td id="orga1">CEA</td>
                <td>2</td>
            </tr>
            <tr>
                <td id="orga2">CNRS</td>
                <td>8</td>
            </tr>
            <tr>
                <td id="orga3">ABIS</td>
                <td>8</td>
            </tr>
            <tr>
                <td id="orga4">Adobe</td>
                <td>99</td>
            </tr>
            <tr>
                <td id="orga5">Alcoa</td>
                <td>89</td>
            </tr>
            <tr>
                <td id="orga6">Boeing</td>
                <td>4</td>
            </tr>
            <tr>
                <td id="orga7">Google</td>
                <td>3</td>
             </tr>
            <tr>
                <td id="orga8">IBM</td>
                <td>68</td>
            </tr>
            <tr>
                <td id="orga9">Questar</td>
                <td>2</td>
            </tr>
            <tr>
                <td id="orga10">Enron</td>
                <td>758</td>
            </tr>
            <tr>
                <td id="orga11">Sony</td>
                <td>3</td>
             </tr>
            <tr>
                <td id="orga12">Quinn</td>
                <td>65</td>
            </tr>
            <tr>
                <td id="orga13">Charde</td>
               ...