Интерактивные графики и диаграммы средствами HTML5 - это следующий уровень визуализации данных. В отличие от статичных графиков, интерактивные решения позволяют пользователям взаимодействовать с данными: фильтровать, масштабировать, наводить курсор для получения дополнительных сведений и менять параметры визуализации.
Кроме этого, исходными источниками для построения графиков могут являтся внешние информационные системы и объекты с соотвествующими API для интерактивного взаимодействия.
Интерактивный график с интерполяцией между точками с возможностью редактирования входных данных
Для ввода произвольных данных используются кроссбраузерные ползунки диапазона на базе CSS и JavaScript решений, для построения графика в выделенной области HTML Canvas используется глобальная библиотека Chart.js. Исходный код реализации виджета можно просмотреть кликнув по ссылке "Показать код".
Входные данные Интерполированный график с автомасштабированием по вертикали
 
Коэффициент кривых Безье между узлами
Показать код
CSS и JavaScript  
 
CSS код для обеспечения кроссбраузерности и стилизации ползунков

<style>
input[type="range"]{
-webkit-appearance: none;
background: transparent;
cursor: pointer;
outline:none;
}
.v-range::-webkit-slider-runnable-track {
background-color: #fff;
border: 1px solid #008080;
width:6px;
}
.v-range::-moz-range-track {
background-color: #fff;
border: 1px solid #008080;
width:5px;
}
.v-range::-webkit-slider-thumb {
-webkit-appearance: none;
background: #fff;
background: linear-gradient(#00AACC, #fff, #008080);
border: 1px solid #008080;
border-radius: 3px;
height: 14px;
width: 28px;
cursor: pointer;
margin-left: -12px;
}
.v-range::-moz-range-thumb {
background:#fff;
background: linear-gradient(#00AACC, #fff, #008080);
border: 1px solid #008080;
border-radius: 3px;
height: 14px;
width: 28px;
cursor: pointer;
}
.v-range {
width: 48px;
height:260px;
}
.v-range[orient=vertical] {
appearance: slider-vertical;
}
.v-range:not([orient=vertical]) {
writing-mode: vertical-lr;
direction: rtl;
}

JavaScript Plugin

<script type="text/javascript">
$(document).ready(function(){
var bezier = $('input[name="tension_group"]:checked').val();
var val1 = parseInt($('#v-range1').val());
var val2 = parseInt($('#v-range2').val());
var val3 = parseInt($('#v-range3').val());
var val4 = parseInt($('#v-range4').val());
var val5 = parseInt($('#v-range5').val());
$('#num1').val(val1);
$('#num2').val(val2);
$('#num3').val(val3);
$('#num4').val(val4);
$('#num5').val(val5);
var ctx = document.getElementById('line-chart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Point-1', 'Point-2', 'Point-3', 'Point-4', 'Point-5'],
datasets: [{
backgroundColor: '#4BC0C0',
label: ' Line Dataset',
//fill: true,
data: [val1, val2, val3, val4, val5],
borderColor: '#4BC0C0',
tension: bezier
}]
},
options: {
pointBackgroundColor: '#FFF',
pointHoverBackgroundColor: '#FFF',
pointRadius: '5',
pointHoverRadius: '5',
responsive: true,
scales: {
y: {
beginAtZero: true}}
}
});
});
</script>
Интерактивная вертикальная диаграмма с возможностью редактирования входных данных
Здесь также используются кроссбраузерные ползунки на базе кастомных CSS решений, JavaScript и глобальная библиотека Chart.js. Исходный код доступен для просмотра и копирования по ссылке ниже.
Входные данные Отображение DATA с автомасштабированием по вертикали
Показать код
JavaScript  
 
<script type='text/javascript'>
function change2(){
var val6 = parseInt($('#v-range6').val());
var val7 = parseInt($('#v-range7').val());
var val8 = parseInt($('#v-range8').val());
var val26 = val6*0.3; var val27 = val7*0.3; var val28 = val8*0.3;
let canvasContainer = $('#div-bar-chart');
canvasContainer.empty().append('<canvas id="bar-chart" width="400" height="200"></canvas>');
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: ["DATA-1", "DATA-2", "DATA-3","DATA-4", "DATA-5", "DATA-6"],
datasets: [
{
label: " Bar Dataset",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#3e95cd", "#8e5ea2","#3cba9f"],
data: [val6,val7,val8,val26,val27,val28]
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Predicted parameters'
}
}
});
};
</script>
Интерактивная круговая диаграмма с возможностью редактирования входных данных
Круговая диаграмма представляет собой круговой статистический график, разделенный на фрагменты для иллюстрации числовых пропорций. На круговой диаграмме длина дуги каждого среза пропорциональна количеству, которое он представляет. Например, сколько зарегистрированных пользователей сейчас имеют статус Online Active, сколько Inactive и сколько пользователей в Offline.
Входные данные Отображение данных в пропорции (%) Легенда диаграммы
  Online Active
  Inactive
  Offline
 
   
Показать код
JavaScript  
 
<script type="text/javascript">
function change3(){
var val9 = parseInt($('#v-range9').val());
var val10 = parseInt($('#v-range10').val());
var val11 = parseInt($('#v-range11').val());
var sum = (val9+val10+val11);
let canvasContainer = $('#div-circle');
canvasContainer.empty().append('<canvas id="circle" width="300" height="300" style="border:1px solid #999; border-radius:3px;"></canvas>');
var canvas = document.getElementById("circle");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 2;
ctx.font = '12pt Arial';
var PI2 = Math.PI * 2;
var myColor = ["#66CC66", "#FFAA00", "#CCCCCC"];
var myData = [val9,val10,val11];
var cx = 150;
var cy = 150;
var radius = 130;
pieChart(myData, myColor);
function pieChart(data, colors) {
var total = 0;
for (var i = 0; i < data.length; i++) {total += data[i];}
var sweeps = []
for (var i = 0; i < data.length; i++) {
sweeps.push(data[i] / total * PI2);}
var accumAngle = 0;
for (var i = 0; i < sweeps.length; i++) {
drawWedge(accumAngle, accumAngle + sweeps[i], colors[i], data[i]);
accumAngle += sweeps[i];}}

function drawWedge(startAngle, endAngle, fill, label) {
// draw the wedge
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.arc(cx, cy, radius, startAngle, endAngle, false);
ctx.closePath();
ctx.fillStyle = fill;
ctx.strokeStyle = 'white';
ctx.fill();
ctx.stroke();

// draw the label
var midAngle = startAngle + (endAngle - startAngle) / 2;
var labelRadius = 80;
var x = cx + (labelRadius) * Math.cos(midAngle) - 10;
var y = cy + (labelRadius) * Math.sin(midAngle) + 3;
ctx.fillStyle = '#333';
ctx.font = "normal 10pt Arial";
ctx.fillText((Math.round(label*1000/sum)/10) +'%', x, y);
}
}
</script>
Интерактивная эмуляция мониторинга динамических процессов с изменяемой детализацией
Ниже доступны графики эмуляции разных процессов на основе рандомного отклонения от среднего значения с разной детализацией и типом графика отображения данных. График в виде файла process.jpg можно сохранить на локальном РС кликнув по построенному изображению.
 Интервал отсчетов от 4 до 10 с шагом 2 пикселя   Интервал отсчетов от 4 до 10 с шагом 2 пикселя  
 
 
 HTML Canvas и JavaScript  
 
<div id="div-process"><canvas id="process" width="960" height="200" style="border-right:solid 1px #ccc; border-bottom: solid 1px #ccc;"></canvas></div>

<script type='text/javascript'>
function process1(){
let canvasContainer = $('#div-process');
canvasContainer.empty().append('<canvas id="process" width="960" height="200" style="border-right:solid 1px #ccc; border-bottom: solid 1px #ccc;"></canvas>');
var canvas = document.getElementById("process");
var ctx = canvas.getContext("2d");
for (var x = 0.5; x < 960; x += 20) {
ctx.moveTo(x, 0);
ctx.lineTo(x, 200);}
for (var y = 0.5; y < 200; y += 20) {
ctx.moveTo(0, y);
ctx.lineTo(960, y);}
ctx.strokeStyle = "#ccc";
ctx.stroke();
var x = 20;
var delta_x = parseInt($('#number1').val());
var width = delta_x - 2;
ctx.fillStyle = '#008090';
ctx.fillRect(20, 100, width, 20);
function graph(){
x = x + delta_x;
var height = parseInt(Math.random()*30) + 30;
var top = 120 - height;
ctx.fillRect(x, top, width, height);
if (x >= 940) {
clearInterval(intervalId);
}}
var intervalId = setInterval(graph,30);
}
</script>