Changing code to get vertical bars in javascript

Question

Changing code to get vertical bars in javascript

99 views Asked by kentas At 24 November 2024 at 04:36

I have the problem that I need vertical bars instead of horizontal bars. How do i need to change the code? The use of this program is for example for a teacher to type in the exam results and get a nice chart to compare the students.

html code:

<head>
    <title>examAnalysis</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="examAnalysis.js"></script>
</head>

<body>
    <button onclick="gatherData()">Add Participant</button>
    <h4>Chart</h4>
    <div id="chart"></div>
</body>

javascript code:

var participant = [];
 var maxPoints = 200;
 var barHeight = 20;

function gatherData() {
    var name = window.prompt('Please enter the name of the participant:');
    var points = window.prompt('Please enter the achieved points of the participant:');

    name = name.replace(/\s+/g, '');
    points = parseInt(points, 10);


    if (name !== '' && !isNaN(points)) {
        participant.push({name: name, points: points});
    }

    createChart();
};

function createChart () {
    var i = 0;
    var len = participant.length;
    var bar = null;

    var container = document.getElementById('chart');
    container.innerHTML='';

    while (i < len) {

        bar = document.createElement('div');
        bar.style.height = barHeight + 'px';
        bar.style.marginBottom = '5px';
        bar.style.backgroundColor = getRandomColor();

        bar.style.width = ((participant[i].points / maxPoints) * 100) + '%';
        bar.innerHTML = ['<p>', participant[i].name, '</p>'].join('');

        container.appendChild(bar);

        i = i+1;
    }
};

function getRandomColor () {
    return ['rgb(', Math.floor(Math.random() * 255), ', ', Math.floor(Math.random() * 255), ', ', Math.floor(Math.random() * 255), ')'].join('');
 };

Original Q&A

There are 1 answers

**Lance** · Accepted Answer · 2015-06-07 13:53:52

Change var barHeight = 20; to var barWidth = 20;

Change bar.style.height = barHeight + 'px'; to bar.style.width= barWidth + 'px';

Change bar.style.width = ((participant[i].points / maxPoints) * 100) + '%'; to bar.style.height= ((participant[i].points / maxPoints) * 100) + '%';

This will make the charts vertical but they will be stacked so you will need to do some work on the positioning of each bar.

<head>
    <title>examAnalysis</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
 var participant = [];
 var maxPoints = 200;
 var barWidth = 20;

function gatherData() {
    var name = window.prompt('Please enter the name of the participant:');
    var points = window.prompt('Please enter the achieved points of the participant:');

    name = name.replace(/\s+/g, '');
    points = parseInt(points, 10);


    if (name !== '' && !isNaN(points)) {
        participant.push({name: name, points: points});
    }

    createChart();
};

function createChart () {
    var i = 0;
    var len = participant.length;
    var bar = null;

    var container = document.getElementById('chart');
    container.innerHTML='';

    while (i < len) {

        bar = document.createElement('div');
        bar.style.width = barWidth + 'px';
        bar.style.marginBottom = '5px';
        bar.style.backgroundColor = getRandomColor();

        bar.style.height = ((participant[i].points / maxPoints) * 100) + '%';
        bar.innerHTML = ['<p>', participant[i].name, '</p>'].join('');

        container.appendChild(bar);

        i = i+1;
    }
};

function getRandomColor () {
    return ['rgb(', Math.floor(Math.random() * 255), ', ', Math.floor(Math.random() * 255), ', ', Math.floor(Math.random() * 255), ')'].join('');
 };
    </script>
</head>

<body>
    <button onclick="gatherData()">Add Participant</button>
    <h4>Chart</h4>
    <div id="chart"></div>
</body>

    function createChart ()
    {
     var i = 0;
     var len = participant.length;
     var bar = null;
    
     var container = document.getElementById('chart');
     container.innerHTML='';
    
     while (i < len)
     {
    
      bar = document.createElement('div');
      bar.style.width = barWidth + 'px';
      bar.style.marginBottom = '5px';
      bar.style.backgroundColor = getRandomColor();
      bar.style.float = 'left';
      bar.style.marginRight = '10px';
    
      bar.style.height = ((participant[i].points / maxPoints) * 200) + 'px';
      bar.style.marginTop = 200 - parseInt(bar.style.height) + 'px';
      percent = ((participant[i].points / maxPoints) * 100) + '%';
      bar.innerHTML = ['<p>', participant[i].name, '<br />', percent, '</p>'].join('');
    
      container.appendChild(bar);
    
      i = i + 1;
     }
    };

TechQA.

Changing code to get vertical bars in javascript

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CHARTS

Popular Questions

Popular Tags

Trending Questions