<script src="js/Chart.min.js"></script>
<script src="js/colors.js"></script>
<script src="js.data/line-data.js"></script>
{% block content %}
<!DOCTYPE html>
<html>
<head>
<title>Bar Chart (chart.js)</title>
<meta charset="UTF-8">
<!-- Подключение библиотеки Chart -->
<script src="js/Chart.min.js"></script>
<!-- Подключение файлов данных -->
<script src="js/colors.js"></script>
<script src="js.data/line-data.js"></script>
</head>
<body>
<p>Проверка работоспособности!</p>
<!-- Определение местоположения и размера диаграммы -->
<div id="container" style="border:1px solid #ccc;
width:550px;height:370px;padding:5px">
<canvas id="chart"
width="540" height="360"></canvas>
</div>
<script>
<!-- Определение конфигурации диаграммы -->
var config = {
type: 'line',
data:barChartData
};
<!-- JavaScript создания диаграммы -->
window.onload = function() {
var ctx = document.getElementById("chart").getContext("2d");
window.line = new Chart(ctx, config);
};
</script>
</body>
</html>
{% endblock %}
randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
barChartData = {
labels: [["Июнь","2015"], "Июль", "Август", "Сентябрь",
"Октябрь", "Ноябрь", "Декабрь",
["Январь","2016"],"Февраль", "Март", "Апрель", "Май"],
datasets: [{
label: 'Dataset1',
fill: false,
backgroundColor: color(chartColors.red).alpha(0.5)
.rgbString(),
borderColor: chartColors.red,
borderWidth: 1,
data: [
randomScalingFactor(),
randomScalingFactor(),
. . .
]
},
{
label: 'Dataset2',
backgroundColor: color(chartColors.blue).alpha(0.5)
.rgbString(),
borderColor: chartColors.blue,
borderWidth: 1,
data: [
randomScalingFactor(),
randomScalingFactor(),
. . .
]
}]
};