Javascript - Javascript Ve Html Ile Grafik çizmek
-
Javascript - Javascript Ve Html Ile Grafik çizmek
<script>
function showGraph(elm, hit)
{
var barHeight = 300;
var barWidth = 10;
var space = 10;
var maxValue = 0;
var width = (barWidth+space)*hit.length;
var graphHtml = '';
for(var i=1; i<hit.length;i++)
for(var j=0; j<hit[i ].length; j++)
if(hit[i ][j]>maxValue)
maxValue = hit[i ][j];
var bolen = maxValue / barHeight;
for(var i=0; i<hit.length; i++)
for(var j=0; j<hit[i ].length; j++)
graphHtml += '<div class=bar'+j+
' style="width:'+barWidth+'px;height:'+
(hit[i ][j]/bolen)+'px;top:'+(barHeight-(hit[i ][j]/bolen))+'px;left:'+
((barWidth+space)*i+(space/hit[0].length)*j)+'px"></div>';
for(var i=0; i<maxValue/bolen; i+=maxValue/bolen/4)
graphHtml += '<div class=lines style="top:'+i+'px;width:'+(width+barWidth+space)+
'px" align=right>' + Math.ceil(maxValue-i*bolen) + '</div>';
document.getElementById(elm).innerHTML = graphHtml;
}
</script>
<style>
div.bar0 {
position:absolute;
background:red;
border:1px solid black;
}
div.bar1 {
position:absolute;
background:yellow;
border:1px solid black;
}
div.lines {
position:absolute;
border-top:1px dashed black
}
#graph {
position:relative;
padding:20px;
}
</style>
<body onload="showGraph('graph', [[1757,6039],[1760,6619],[1344,4763],[1758,5789],
[1580,6265],[2127,6764],[2065,6718],[3221,10314],
[3750,12473],[3554,13042],[3499,9933],[4177,11018],
[5181,13485],[4436,11893],[4673,11872],[4983,12542]])">
<div id="graph"></div>
</body>
[ Geri ] - [ Ana Sayfa ] -
