На сайте со 2 октября действует мета-сервис Статистика. Это мини-статистическая информация по посещениям и просмотрам сайта, а также по использованию различных версий браузеров.
Статистика представленна в виде диаграмм. Надеюсь, такое представление информации является удачным решением.
На странице статистики представлено два типа диаграмм. Для каждого типа сущестует своя функция вывода. Пример входных данных (использования) вы можете посмотреть, открыв исходный код страницы статистики блога.
Функция вывода столбчатой диаграммы:
//elementid - контейнер для вывода
//basicwidth - базовая длина контейнера
//values - значения в виде массива
//prepend - префикс вывода значения
function BuildDiagram(elementid, basicwidth, values, prepend)
{
//Получаем элементы и создаём переменные
var element = document.getElementById(elementid);
var i = 0, state = {sum: 0, current: 0, max: 0, widths: 0, increments: 0, indicators: Array(), summarize: Array()};
//Устанавливаем базовую длину элемента
element.style.width = basicwidth + "px";
//Получаем максимальное значение и сумму всех значений
for (i = 0; i < values.length; i++)
{
state.sum += values[i].value;
if (values[i].value > state.max)
state.max = values[i].value;
}
//Сбрасываем переменную-счётчик
i = 0;
//Проходимся по значениям и отображаем элементы
for (i = 0; i < values.length; i++)
{
//Создаём элементы
var indicator = document.createElement("div");
var indicator_i = document.createElement("div");
var indicator_text = document.createElement("div");
//Вычисляем текущее значение текущего элемента
state.current = (values[i].value / state.sum);
//Устанавливаем стили и настройки элементов
indicator.className = "element";
indicator_i.className = "element-inline";
indicator_text.className = "element-text";
indicator.style.width = (state.current * basicwidth) + "px";
//Устанавливаем идентификаторы элементов
indicator_i.id = "ind_val_" + elementid + "_" + i;
indicator.id = "nat_" + indicator_i.id;
indicator_text.id = "text_" + indicator_i.id;
//Если это максимальное значение, создаём
if (state.max == values[i].value)
indicator_i.className = "element-inline element-active";
//Текст элемента
//indicator_text.innerHTML = values[i].title + " (" + (state.current*100).toString().substr(0,4) + "%)";
indicator_text.innerHTML = values[i].title + " (" + prepend + values[i].value + ")";
//Добавляем элементы в контейнер
indicator.appendChild(indicator_i);
element.appendChild(indicator_text);
element.appendChild(indicator);
//Сохраняем каждый идентификатор и суммаризационные значения
state.indicators[i] = indicator_i.id;
state.summarize[i] = parseInt((state.current*100).toString().substr(0,4));
}
//Устанавливаем новые переменные
var i = 0;
//Функция для повторных действий
var increment_fnc = function()
{
//Если это не последний элемент
if (i != state.indicators.length)
{
//Если длина не равна 100 процентам
if (state.widths <= 100)
{
//document.getElementById("nat_" + state.indicators[i]).style.display = "block";
//document.getElementById("text_" + state.indicators[i]).style.display = "block";
document.getElementById("nat_" + state.indicators[i]).style.visibility = "visible";
document.getElementById("text_" + state.indicators[i]).style.visibility = "visible";
//Увеличиваем длину элемента
document.getElementById(state.indicators[i]).style.width = state.widths + "%";
state.widths += 2;
}
else
{
//В противном случае, переходим к следующему элементу и обнуляем счётчик длины
i++;
state.widths = 0;
}
}
else
clearInterval(state.increments); //В противном случае, очищаем счётчик
}
//Запускаем нашу функцию
state.increments = setInterval(increment_fnc, 10);
}
Функция вывода линейной диаграммы:
//Параметры схожи с параметрами предыдущей функции
function BuildDiagramElastic(elementid, basicwidth, values)
{
//Получаем элементы и создаём переменные
var element = document.getElementById(elementid);
var i = 0, state = {sum: 0, max: 0, current: 0};
//Создаём таблицу и строки
var table =
{
root: document.createElement("table"),
rows:
{
up: document.createElement("tr"),
center: document.createElement("tr"),
down: document.createElement("tr")
}
};
//Определяем зависимости элементов
table.root.appendChild(table.rows.up);
table.root.appendChild(table.rows.center);
table.root.appendChild(table.rows.down);
//Включаем нашу таблицу в элемент контейнер
element.appendChild(table.root);
//Устанавливаем базовую длину элемента
//Устанавливаем стили элементов и добавляем элементы
element.style.width = basicwidth + "px";
table.root.className = "elastic-container";
//Получаем максимальное значение и сумму всех значений
for (i = 0; i < values.length; i++)
{
state.sum += values[i].value;
if (values[i].value > state.max)
state.max = values[i].value;
}
//Проходимся по значениям и отображаем элементы
for (i = 0; i < values.length; i++)
{
//Создаём элементы
var cells =
{
up: document.createElement("td"),
center: document.createElement("td"),
down: document.createElement("td")
};
var text_element = document.createElement("div");
//Определяем зависимости элементов
table.rows.center.appendChild(cells.center);
table.rows.up.appendChild(cells.up);
table.rows.down.appendChild(cells.down);
//Устанавливаем стили элемента
cells.up.className = "up";
cells.down.className = "up";
text_element.className = "marker";
//Устанавливаем текст
text_element.innerHTML = "<nobr>" + values[i].title + " (" + values[i].value + ")</nobr>";
if (i % 2 == 0)
{
cells.up.appendChild(text_element);
cells.up.className += " active";
}
else
{
cells.down.appendChild(text_element);
cells.down.className += " active";
}
//Вычисляем текущее значение текущего элемента
state.current = (values[i].value / state.sum);
//Устанавливаем это значение
cells.center.style.width = (state.current * basicwidth) + "px";
}
//IE Fix
element.innerHTML = element.innerHTML;
}