Построение гистограмм с помощью JavaScript

"Праздник, который всегда с тобой" писал Хемингуэй про Париж и вино. Если дать волю воображению, то эту фразу можно применить и к JavaScript. Нужен простой рассчет, используем внешний или встроенный калькулятор. Серьезный рассчет - без специализированной программы не обойтись. А вот в случае промежуточном отлично работает JavaScript. "На коленочке" (в "блокноте") набираем несколько программных строк, сохраняем как html-файл, открываем его в браузер, и вуаля! Решение на экране. Надеюсь, вы не допустили ошибок в коде ;-)
Вы можете использовать javascript для построения гистограмм. Зачастую это ускоряет процесс создания страницы (нужно ввести только несколько цифр) и уменьшает размер, который занимает итоговая страница (размер текста плюс размер картинок).

Пример 1. Площади территорий стран мира, млн. кв. км

Пример 2. Наиболее населенные страны в 2004, млн. житилей

Ниже приведен javascript-код для построения гистограмм.

<script>
var arrText = new Array( "Российская Федерация", "Канада", "Китай", "США", "Бразилия" );
var arrValue = new Array( 17.075 , 9.976, 9.596, 9.363, 8.511 );

drawGraphHoriz( arrText, arrValue, 400, 0 );
</script>

<script>
var arrText2 = new Array( "China", "India", "USA", "Indonesia", "Brazil", "Pakistan", "Russia", "Bangladesh", "Nigeria", "Japan", "Mexico" );
var arrValue2 = new Array( 1286 , 1049, 290, 234, 182, 150, 144, 138, 133, 127, 104 );

drawGraphVert( arrText2, arrValue2, 400, 0, 60 );
</script>

Ниже приведен javascript-код поддержки построения гистограмм.

<script>
//red, orange, yellow, green, blue, violet, cyan, gray
var arrCol8 = new Array( "#ff0000", "#ffaa00", "#ffff00", "#00ff00", "#00aaff", "#0000bb", "#aa00aa", "#cccccc" );

function drawGraphHoriz( arrText, arrValue, width, border )
{
 var i, j;
 if( "" + width == "undefined" ) width = 400;
 if( "" + border == "undefined" ) border = 1;
 
 var nCol = arrCol8.length;
 var len = arrText.length;
 var dMax = 0, iWidthSpan;
 for( i = 0; i < arrValue.length; i++ )
 {
  if( dMax < arrValue[ i ] ) dMax = arrValue[ i ];
 }

 document.writeln( "<table border='" + border + "'>" );
 
 for( i = 0; i < arrText.length; i++ )
 {
  j = i % nCol;
  iWidthSpan =  Math.ceil( ( arrValue[ i ] * width ) / dMax );
  document.writeln( "<tr>" );
  document.writeln( "<td>" + arrText[ i ] + "</td>" );
  document.writeln( "<td><span style='background-color:" + arrCol8[ j ] + 
   "; width:" + iWidthSpan + "'> " + arrValue[ i ] + "</span></td>" );
  document.writeln( "</tr>" );
 }
 
 document.writeln( "</table>" );
}

function drawGraphVert( arrText, arrValue, height, border, width )
{
 var i, j;
 if( "" + height == "undefined" ) height = 400;
 if( "" + border == "undefined" ) border = 1;
 if( "" + width == "undefined" ) width = 0;
 
 var nCol = arrCol8.length;
 var len = arrText.length;
 var dMax = 0, iHeightSpan;
 for( i = 0; i < arrValue.length; i++ )
 {
  if( dMax < arrValue[ i ] ) dMax = arrValue[ i ];
 }

 document.writeln( "<table border='" + border + "'>" );
 document.writeln( "<tr>" );
 
 for( i = 0; i < arrText.length; i++ )
 {
  j = i % nCol;
  iHeightSpan =  Math.ceil( ( arrValue[ i ] * height ) / dMax );
  document.writeln( "<td align='center' valign='bottom'><span style='background-color:" + arrCol8[ j ] + 
   "; width:30px; height:" + iHeightSpan + "px'> " + arrValue[ i ] + "</span></td>" );
 }
 document.writeln( "</tr>" );
 
 document.writeln( "<tr>" );
 for( i = 0; i < arrText.length; i++ )
 {
  document.writeln( "<td" );
  if( width > 0 ) document.writeln( " width='" + width + "'" );
  document.writeln( " align='center'>" + arrText[ i ] + "</td>" );
 }
 document.writeln( "</tr>" );
 
 document.writeln( "</table>" );
}
</script>

Немного комментариев.
Для хранения цветов используется массив arrCol8. "На вкус и на цвет товарищей нет". Меняйте на здоровье.
Значения аргументов функции drawGraphHoriz( arrText, arrValue, width, border ):