SmartWare,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ТИТЛ</title>
<link rel="stylesheet" href="header.css" />
<script src='Chart.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<form action="?" method="post">
<textarea name="comments" cols=38 rows="7" id="counter"></textarea>
</form>
<!-- Гистограмма -->
</br></br>
<canvas id="income" width="600" height="400"></canvas>
<script>
var income = document.getElementById("income").getContext("2d");
var barData = {
labels: [],
datasets: [
{
fillColor: "#48A497",
strokeColor: "#48A4D1",
data: []
}
]
}
new Chart(income).Bar(barData);
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var textarea = document.getElementsByName("comments")[0];
textarea.onkeyup = function () {
// регвыр символов, которые учавствуют в подсчёте.
var allowed = /[а-яё]/i,
s = this.value;
// собираем информацию :
var results = Array.prototype.reduce.call(s, function (data, letter) {
if (allowed.test(letter)) {
letter = letter.toLowerCase();
if (data[letter] === undefined) {
data[letter] = 0;
}
data[letter] += 1;
}
return data;
}, {});
barData.labels = []
barData.datasets[0].data = [];
// выводим:
for (var letter in results) {
barData.labels.push(letter);
barData.datasets[0].data.push(results[letter]);
new Chart(income).Bar(barData);
}
}
});
</script>
</body>
</html>