Рисуем график в Bootstrap

Обновлено: 23 декабря, 2021

Для вывода графика необходимо подключить 2 бибиотеки: Chart.min.js и jquery-1.11.1.min.js
Сам график выводится следующим кодом:


<!DOCTYPE html>
<html lang=”en”>
<head>
<title>ДЕМО – Рисуем график в Bootstrap</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<script src=”js/jquery-1.11.1.min.js”></script>
<script src=”js/Chart.min.js”></script>
</head>
<?
echo “<div class=’col-md-4 col-xs-12′>”;
echo “<div class=’col-md-12 col-xs-12 padding_top_15′ >”;
echo “<h5 class=’clearfix pull-left’>&nbsp;&nbsp;&nbsp;&nbsp;</h5>”;
echo “<div id=’grafmonth’></div>”;
echo “</div>”;
echo “</div>”;
?>

<script>
<?
$url2[0]=”‘json/json_yandex.php'”;
echo ‘$.getJSON(‘.$url2[0].’, function(json){‘;
echo ‘var month = [];’;
echo ‘for (var i = 0; i < json.length; i++) {‘;
echo ‘month.push(json[i])’;
echo ‘}’;
echo ‘var datasets2 = [{‘;
echo ‘label: “Месяц”,’;
echo ‘fillColor: “rgba(48,160,235,0.2)”,’;
echo ‘strokeColor: “rgba(48,160,235,1)”,’;
echo ‘pointColor: “rgba(48,160,235,1)”,’;
echo ‘pointStrokeColor: “#fff”,’;
echo ‘pointHighlightFill: “#fff”,’;
echo ‘pointHighlightStroke: “rgba(48,160,235,1)”,’;
echo ‘data: month’;
echo ‘}];’;
echo ‘var lineChartData2 = {‘;
echo ‘labels: [“b”,”a”,”a”,”a”,”a”,”a”,”a”,”a”,”a”,”a”],’;
echo ‘datasets: datasets2’;
echo ‘};’;
echo ‘new Chart(makeCanvas(“grafmonth”)).Line(lineChartData2, params);’;
echo ‘});’;
?>

// ————– графики и таблицы ———————–
function makeCanvas(id, opt_width, opt_height) {
var container = document.getElementById(id);
container.innerHTML = ”;
var canvas = document.createElement(‘canvas’);
var ctx = canvas.getContext(‘2d’);
canvas.width = opt_width || 600;
canvas.height = opt_height || 200;
container.appendChild(canvas);
return ctx;
};

function makeCanvasBarChart(id, opt_width, opt_height) {
var container = document.getElementById(id);
container.innerHTML = ”;
var canvas = document.createElement(‘canvas’);
var ctx = canvas.getContext(‘2d’);
container.appendChild(canvas);
return ctx;
};

var params = {
responsive: true,
datasetStrokeWidth : 1,
animationEasing: “easeOutElastic”,
tooltipCornerRadius: 3,
scaleFontSize: 10,
tooltipFontFamily: “‘Open Sans’, sans-serif”,
tooltipFontStyle: “300”,
tooltipTitleFontStyle: “300”,
tooltipTitleFontFamily: “‘Open Sans’, sans-serif”,
scaleGridLineWidth : 0.5,
bezierCurve : false,
scaleBeginAtZero : true
};

var paramsLineBarChart = {
responsive: true,
barShowStroke : false,
barValueSpacing : 1,
scaleShowLabels: false
};

</script>

</body>
</html>

Демо можно скачать тут.
Посмотреть демо можно здесь.

Рейтинг автора

Автор статьи

Юрий

SEO-аналитик, программист (PHP, Ajax, Delphi, MySQL).

Написано статей

268