HTML5, JS ve CSS ile Bar Grafik Çizdirme




















<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link href="Content/Site.css" rel="stylesheet" type="text/css" />
    <title>HTML5 BAR Grafik</title>
    <script type="text/javascript">
    <!--
        // bar grafiğindeki verilerin dizisi oluşturuluyor, ilk değer X ekseni, ikinci değer Y eksenini gösteriyor.
//Örneğin il değerde, 2007 yılında 750 kişi ziyaret etmiş olduğunu söylüyoruz.
        var arrVisitors = new Array();
        arrVisitors[0] = "2007, 750";
        arrVisitors[1] = "2008, 425";
        arrVisitors[2] = "2009, 960";
        arrVisitors[3] = "2010, 700";
        arrVisitors[4] = "2011, 800";
        arrVisitors[5] = "2012, 975";
        arrVisitors[6] = "2013, 375";
        arrVisitors[7] = "2014, 775";
 
        var canvas;
        var context;
        // grafik özellik değişkenleri
        var cWidth, cHeight, cMargin, cSpace;
        var cMarginSpace, cMarginHeight;
        // bar özellik değişken tanımları
        var bWidth, bMargin, totalBars, maxDataValue;
        var bWidthMargin;
        // bar animasyonu için değişken tanımları
        var ctr, numctr, speed;
        // eksen özellikleri
        var totLabelsOnYAxis;
 
 
        // bar oluşturuluyor
        function barChart() {
            canvas = document.getElementById('bchart');
            if (canvas && canvas.getContext) {
                context = canvas.getContext('2d');
            }
 
            chartSettings();
            drawAxisLabelMarkers();
            drawChartWithAnimation();
        }
 
        // grafik Ayarları
        function chartSettings() {
            // grafik özellikleri
            cMargin = 25;
            cSpace = 60;
            cHeight = canvas.height - 2 * cMargin - cSpace;
            cWidth = canvas.width - 2 * cMargin - cSpace;
            cMarginSpace = cMargin + cSpace;
            cMarginHeight = cMargin + cHeight;
            // bar özellikleri
            bMargin = 15;
            totalBars = arrVisitors.length;
            bWidth = (cWidth / totalBars) - bMargin;
 
 
            // maksimum değeri bulma
            maxDataValue = 0;
            for (var i = 0; i < totalBars; i++) {
                var arrVal = arrVisitors[i].split(",");
                var barVal = parseInt(arrVal[1]);
                if (parseInt(barVal) > parseInt(maxDataValue))
                    maxDataValue = barVal;
            }
 
            totLabelsOnYAxis = 10;
            context.font = "10pt Garamond Fontu kullanıldı";
 
            // başlangıç değerlerini ayarlama
            ctr = 0;
            numctr = 100;
            speed = 10;
        }
 
        // grafiğin etiketlerini, verilerini ayarlama
        function drawAxisLabelMarkers() {
            context.lineWidth = "2.0";
            // y eksenini çizdirme
            drawAxis(cMarginSpace, cMarginHeight, cMarginSpace, cMargin);
            // x eksenini çizdirme
            drawAxis(cMarginSpace, cMarginHeight, cMarginSpace + cWidth, cMarginHeight);
            context.lineWidth = "1.0";
            drawMarkers();
        }
 
        // X ve Y ekseni çizgilerini lineTo ile çizme
        function drawAxis(x, y, X, Y) {
            context.beginPath();
            context.moveTo(x, y);
            context.lineTo(X, Y);
            context.closePath();
            context.stroke();
        }
 
        // X ve Y eksenleri Yazı Hizalama ve Rengini ayarlama
        function drawMarkers() {
            var numMarkers = parseInt(maxDataValue / totLabelsOnYAxis);
            context.textAlign = "right";
            context.fillStyle = "#000"; ;
 
            // Y Axis
            for (var i = 0; i <= totLabelsOnYAxis; i++) {
                markerVal = i * numMarkers;
                markerValHt = i * numMarkers * cHeight;
                var xMarkers = cMarginSpace - 5;
                var yMarkers = cMarginHeight - (markerValHt / maxDataValue);
                context.fillText(markerVal, xMarkers, yMarkers, cSpace);
            }
 
            // X Ekseni
            context.textAlign = 'center';
            for (var i = 0; i < totalBars; i++) {
                arrval = arrVisitors[i].split(",");
                name = arrval[0];
 
                markerXPos = cMarginSpace + bMargin + (i * (bWidth + bMargin)) + (bWidth / 2);
                markerYPos = cMarginHeight + 10;
                context.fillText(name, markerXPos, markerYPos, bWidth);
            }
 
            context.save();
 
            // Y eksenine başlık ekleme
            context.translate(cMargin + 10, cHeight / 2);
            context.rotate(Math.PI * -90 / 180);
            context.fillText('Ziyaretçi Sayısı(Bin)', 0, 0);
 
            context.restore();
 
            // X eksenine başlık ekleme
            context.fillText('Yıllar', cMarginSpace + (cWidth / 2), cMarginHeight + 30);
        }
 
        function drawChartWithAnimation() {
            // Bar grafiklerin animasyonlu şekilde yükseltilmesi sağlanıyor
            for (var i = 0; i < totalBars; i++) {
                var arrVal = arrVisitors[i].split(",");
                bVal = parseInt(arrVal[1]);
                bHt = (bVal * cHeight / maxDataValue) / numctr * ctr;
                bX = cMarginSpace + (i * (bWidth + bMargin)) + bMargin;
                bY = cMarginHeight - bHt - 2;
                drawRectangle(bX, bY, bWidth, bHt, true);
            }
 
            // bar grafik yeterli büyüklüğe ulaşmamışsa çizmeye devam
  
            if (ctr < numctr) {
                ctr = ctr + 1;
                setTimeout(arguments.callee, speed);
            }
        }
 
//dikdörtgen Çizdirme fonksiyonu
        function drawRectangle(x, y, w, h, fill) {
            context.beginPath();
            context.rect(x, y, w, h);
            context.closePath();
            context.stroke();
 
            if (fill) {
                var gradient = context.createLinearGradient(0, 0, 0, 300);
                gradient.addColorStop(0, 'green'); //yeşil renkli çiziliyor
                gradient.addColorStop(1, 'rgba(67,203,36,.15)');
                context.fillStyle = gradient;
                context.strokeStyle = gradient;
                context.fill();
            }
        }
 
 
        -->
    </script>
    <noscript>
        JavaScript tarayıcınız tarafından etkinleştirilmediğinden
grafik gösterilemiyor.
    </noscript>
</head>
<body onload="barChart();">
    <div id="body">
        <section class="featured">
            <div class="content-wrapper">
                <hgroup class="title">
                    <h1>
                        HTML5 ile Bar Grafik</h1>
                </hgroup>
                <p>
                   
                </p>
            </div>
        </section>
        <section class="content-wrapper main-content clear-fix">
            <canvas id="bchart" height="400" width="600">
   Tarayıcı HTML Canvas özelliğini desteklemiyor. </canvas>
        </section>
    </div>
</body>
</html>


ÇALIŞAN DEMO 

KAYNAKLAR

http://www.dotnetcurry.com/showarticle.aspx?ID=839
 
Bookmark and Share
Dil Değiştir(Change Language)