PDA

View Full Version : bar charts of average grade



Prochotap
Feb 8th, 2017, 06:02 PM
hi all! :)
I appeal to you for help. I'm looking for a way to show the arithmetic mean of students and the middle class of the object using a bar graph (which is still read data from a table) Does anybody is able to suggest how to write it in some way? I'll be grateful in advance and send mail beer. Session chasing the session and that is the last thing I have no idea how to do ...

Ther is my code


<html>
<head>
<link rel="Stylesheet" href="style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<script>
function av_grade () {
var i1 = document.getElementById('count1');
var i2 = document.getElementById('count2');
var i3 = document.getElementById('count3');
var i4 = document.getElementById('count4');
var i5 = document.getElementById('count5');
var o = document.getElementById('result');

var l1 = parseInt(i1.value, 10);
var l2 = parseInt(i2.value, 10);
var l3 = parseInt(i3.value, 10);
var l4 = parseInt(i4.value, 10);
var l5 = parseInt(i5.value, 10);

var sum = (l1 || 0) + (l2 || 0) + (l3 || 0) + (l4 || 0) + (l5 || 0);

o.value = sum / (5 - isNaN(l1) - isNaN(l2) - isNaN(l3) - isNaN(l4) - isNaN(l5));
o.value =o.toFixed(2);
}
</script>

<div class="tabs">
<a href="#tab-1" class="active">Math</a>
<a href="#tab-2">English</a>
<a href="#tab-3">History</a>
</div>

<div class="tabs-container">
<article id="tab-1" class="tab-content active">

<form oninput="av_grade()">

<table class="tg">
<tr>
<th class="tg-yw4l">Lp</th>
<th class="tg-amwm">Surname and Name</th>
<th class="tg-amwm" colspan="5">Grades</th>
<th class="tg-9hbo">Average grade</th>
<th class="tg-9hbo">Grade</th>
</tr>
<tr>
<td class="tg-b7b8">1</td>
<td class="tg-spn1">Adrian Marta</td>
<td class="tg-4eph"><input id="count1" class="grade_input" maxlength='2' size='1'></td>
<td class="tg-4eph"><input id="count2" class="grade_input" maxlength='2' size='1'></td>
<td class="tg-4eph"><input id="count3" class="grade_input" maxlength='2' size='1'></td>
<td class="tg-4eph"><input id="count4" class="grade_input" maxlength='2' size='1'></td>
<td class="tg-4eph"><input id="count5" class="grade_input" maxlength='2' size='1'></td>
<td class="tg-n8ug"><input id="result" class="average" maxlength='5' size='1'></td>
<td class="tg-n8ug"><input id="grade" class="last_grade" maxlength='2' size='1'></td>
</tr>
<tr>
<td class="tg-yw4l">2</td>
<td class="tg-s6z2">Anloik Ireneusz</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-eey6"></td>
<td class="tg-eey6"><input id="grade" class="last_grade" maxlength='2' size='1'></td>
</tr>
<tr>
<td class="tg-b7b8">3</td>
<td class="tg-spn1">Dzik Tomasz</td>
<td class="tg-4eph"></td>
<td class="tg-4eph"></td>
<td class="tg-4eph"></td>
<td class="tg-4eph"></td>
<td class="tg-4eph"></td>
<td class="tg-zb4x"></td>
<td class="tg-zb4x"><input id="grade" class="last_grade" maxlength='2' size='1'></td>
</tr>
<tr>
<td class="tg-yw4l">4</td>
<td class="tg-s6z2">Gwodzol Robert</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-eey6"></td>
<td class="tg-eey6"><input id="grade" class="last_grade" maxlength='2' size='1'></td>
</tr>
<tr>
<td class="tg-b7b8">5</td>
<td class="tg-spn1">Mika Adam</td>
<td class="tg-4eph"></td>
<td class="tg-4eph"></td>
<td class="tg-4eph"></td>
<td class="tg-4eph"></td>
<td class="tg-4eph"></td>
<td class="tg-zb4x"></td>
<td class="tg-zb4x"><input id="grade" class="last_grade" maxlength='2' size='1'></td>
</tr>
<tr>
<td class="tg-yw4l">6</td>
<td class="tg-s6z2">Przybyła Gabriela</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-eey6"></td>
<td class="tg-eey6"><input id="grade" class="last_grade" maxlength='2' size='1'></td>
</tr>
<tr>
<td class="tg-b7b8">7</td>
<td class="tg-spn1">Psota Adam</td>
<td class="tg-4eph"></td>
<td class="tg-4eph"></td>
<td class="tg-4eph"></td>
<td class="tg-4eph"></td>
<td class="tg-4eph"></td>
<td class="tg-zb4x"></td>
<td class="tg-zb4x"><input id="grade" class="last_grade" maxlength='2' size='1'></td>
</tr>
<tr>
<td class="tg-yw4l">8</td>
<td class="tg-s6z2">Ulanska Kinga</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-eey6"></td>
<td class="tg-eey6"><input id="grade" class="last_grade" maxlength='2' size='1'></td>
</tr>
</table>

</form>
</article>
<article id="tab-2" class="tab-content">
</body>
</html>

Sempervivum
Feb 8th, 2017, 10:58 PM
It's highly recommended to use thead for the headline of your table. This makes styling easier.
An ID has to be unique for the document. However you use the ID "grade" multiplely.



What do you want to display in the bar graph? I assume the value of the element #result?

jmrker
Feb 8th, 2017, 11:59 PM
What is the purpose of using JQuery when you have no calls that require it?
:confused:

Note also that your closing 'article' tag preceeds the opening tag.

Prochotap
Feb 9th, 2017, 01:45 PM
first graph it should be graph loading from <id = #result>
and second (if were able to) should load from from count1 to count5


<form oninput="av_grade()">

<table class="tg">
<tr>
<th class="tg-yw4l">Lp</th>
<th class="tg-amwm">Surname and Name</th>
<th class="tg-amwm" colspan="5">Grades</th>
<th class="tg-9hbo">Average grade</th>
<th class="tg-9hbo">Grade</th>
</tr>
<tr>
<td class="tg-b7b8">1</td>
<td class="tg-spn1">Adrian Marta</td>
<td class="tg-4eph"><input id="count1" class="grade_input" maxlength='2' size='1'></td>
<td class="tg-4eph"><input id="count2" class="grade_input" maxlength='2' size='1'></td>
<td class="tg-4eph"><input id="count3" class="grade_input" maxlength='2' size='1'></td>
<td class="tg-4eph"><input id="count4" class="grade_input" maxlength='2' size='1'></td>
<td class="tg-4eph"><input id="count5" class="grade_input" maxlength='2' size='1'></td>
<td class="tg-n8ug"><input id="result" class="average" maxlength='5' size='1'></td>
<td class="tg-n8ug"><input id="grade" class="last_grade" maxlength='2' size='1'></td>
</tr>

Sempervivum
Feb 9th, 2017, 05:05 PM
Try this:

HTML and CSS:

<div id="wrbar1">
<div id="bar1"></div>
</div>
<style>
#wrbar1 {
width: 100px;
height: 12px;
border: 1px solid black;
}

#bar1 {
width: 0%;
height: 10px;
border: 1px solid black;
background-color: blue;
}
</style>

Javascript function:

function updateBar(idbar, value, maxValue) {
var bar = document.getElementById(idbar);
w = value / maxValue * 100;
bar.style.width = w + "%";
}
Call this function inside of your function av_grade():

updateBar("bar1", sum, 10);

Sempervivum
Feb 9th, 2017, 05:14 PM
PS: If you need additional features like labeling and multiple bars I recommend using a library like chart.js.

Prochotap
Feb 9th, 2017, 05:23 PM
<html>
<head>
<link rel="Stylesheet" href="style.css">
<script type="text/javascript" src="jquery.min.js"></script>
<style>
#wrbar1 {
width: 100px;
height: 12px;
border: 1px solid black;
}

#bar1 {
width: 0%;
height: 10px;
border: 1px solid black;
background-color: blue;
}
</style>
</head>
<body>
<script>
function av_grade () {
var i1 = document.getElementById('count1');
var i2 = document.getElementById('count2');
var i3 = document.getElementById('count3');
var i4 = document.getElementById('count4');
var i5 = document.getElementById('count5');
var o = document.getElementById('result');

var l1 = parseInt(i1.value, 10);
var l2 = parseInt(i2.value, 10);
var l3 = parseInt(i3.value, 10);
var l4 = parseInt(i4.value, 10);
var l5 = parseInt(i5.value, 10);

var sum = (l1 || 0) + (l2 || 0) + (l3 || 0) + (l4 || 0) + (l5 || 0);

o.value = sum / (5 - isNaN(l1) - isNaN(l2) - isNaN(l3) - isNaN(l4) - isNaN(l5));
o.value =o.toFixed(2);
updateBar("bar1", sum, 10);
}
</script>
<script>
function updateBar(idbar, value, maxValue) {
var bar = document.getElementById(idbar);
w = value / maxValue * 100;
bar.style.width = w + "%";
}
</script>

<div class="tabs">
<a href="#tab-1" class="active">Math</a>
<a href="#tab-2">English</a>
<a href="#tab-3">History</a>
</div>

<div class="tabs-container">
<article id="tab-1" class="tab-content active">

<form oninput="av_grade()">

<table class="tg">
<tr>
<th class="tg-yw4l">Lp</th>
<th class="tg-amwm">Surname and Name</th>
<th class="tg-amwm" colspan="5">Grades</th>
<th class="tg-9hbo">Average grade</th>
<th class="tg-9hbo">Grade</th>
</tr>
<tr>
<td class="tg-b7b8">1</td>
<td class="tg-spn1">Adrian Marta</td>
<td class="tg-4eph"><input id="count1" class="grade_input" maxlength='2' size='1'></td>
<td class="tg-4eph"><input id="count2" class="grade_input" maxlength='2' size='1'></td>
<td class="tg-4eph"><input id="count3" class="grade_input" maxlength='2' size='1'></td>
<td class="tg-4eph"><input id="count4" class="grade_input" maxlength='2' size='1'></td>
<td class="tg-4eph"><input id="count5" class="grade_input" maxlength='2' size='1'></td>
<td class="tg-n8ug"><input id="result" class="average" maxlength='5' size='1'></td>
<td class="tg-n8ug"><input id="grade" class="last_grade" maxlength='2' size='1'></td>
</tr>
<tr>
<td class="tg-yw4l">2</td>
<td class="tg-s6z2">Anloik Ireneusz</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-eey6"></td>
<td class="tg-eey6"><input id="grade" class="last_grade" maxlength='2' size='1'></td>
</tr>
<tr>
<td class="tg-b7b8">3</td>
<td class="tg-spn1">Dzik Tomasz</td>
<td class="tg-4eph"></td>
<td class="tg-4eph"></td>
<td class="tg-4eph"></td>
<td class="tg-4eph"></td>
<td class="tg-4eph"></td>
<td class="tg-zb4x"></td>
<td class="tg-zb4x"><input id="grade" class="last_grade" maxlength='2' size='1'></td>
</tr>
<tr>
<td class="tg-yw4l">4</td>
<td class="tg-s6z2">Gwodzol Robert</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-eey6"></td>
<td class="tg-eey6"><input id="grade" class="last_grade" maxlength='2' size='1'></td>
</tr>
<tr>
<td class="tg-b7b8">5</td>
<td class="tg-spn1">Mika Adam</td>
<td class="tg-4eph"></td>
<td class="tg-4eph"></td>
<td class="tg-4eph"></td>
<td class="tg-4eph"></td>
<td class="tg-4eph"></td>
<td class="tg-zb4x"></td>
<td class="tg-zb4x"><input id="grade" class="last_grade" maxlength='2' size='1'></td>
</tr>
<tr>
<td class="tg-yw4l">6</td>
<td class="tg-s6z2">Przybyła Gabriela</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-eey6"></td>
<td class="tg-eey6"><input id="grade" class="last_grade" maxlength='2' size='1'></td>
</tr>
<tr>
<td class="tg-b7b8">7</td>
<td class="tg-spn1">Psota Adam</td>
<td class="tg-4eph"></td>
<td class="tg-4eph"></td>
<td class="tg-4eph"></td>
<td class="tg-4eph"></td>
<td class="tg-4eph"></td>
<td class="tg-zb4x"></td>
<td class="tg-zb4x"><input id="grade" class="last_grade" maxlength='2' size='1'></td>
</tr>
<tr>
<td class="tg-yw4l">8</td>
<td class="tg-s6z2">Ulanska Kinga</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-eey6"></td>
<td class="tg-eey6"><input id="grade" class="last_grade" maxlength='2' size='1'></td>
</tr>
</table>
<div id="wrbar1"></div>
<div id="bar1"></div>


</form>
</article>
<article id="tab-2" class="tab-content">
</body>
</html>


Should be work?

Sempervivum
Feb 9th, 2017, 05:32 PM
Yes, give it a try. I have tested the code before posting.

jmrker
Feb 9th, 2017, 11:24 PM
You have 8 lines that contain the following code in post #7.


<input id="grade" class="last_grade" maxlength='2' size='1'>

ID values must be unique.
When you reference 'grade', it is like calling out for "John" in a salesman convention.
You'll never know which one answers if they answer at all!

Prochotap
Feb 10th, 2017, 10:34 AM
hmm. I write in Microsoft Expression Web 4 and unfortunately it doesn't work. I would like to do bar chart like this: Chart Editor - CanvasJS (http://canvasjs.com/editor/?id=http://canvasjs.com/example/gallery/column/oil_reserves/)
but it could dowload data from written table like can someone please help how to write like that. maybe should be action button like "draw a bar chart"? Thx a lot for advance! ;)

Prochotap
Feb 10th, 2017, 10:56 AM
hmm. I write in Microsoft Expression Web 4 and unfortunately it doesn't work. I would like to do bar chart like this: Chart Editor - CanvasJS (http://canvasjs.com/editor/?id=http://canvasjs.com/example/gallery/column/oil_reserves/)
but it could dowload data from written table like can someone please help how to write like that. maybe should be action button like "draw a bar chart"? Thx a lot for advance! ;)

aaa. I forgot to say of course it should assume values from id= result and count1-count5.

Sempervivum
Feb 10th, 2017, 12:42 PM
"unfortunately it doesn't work" - don't understand why as I tested my code. Maybe you have not taken it over correctly. Put it online and post the URL.
You should have noted that you already have a script for drawing bar charts. It would be easy to realize it by use of this.

Prochotap
Feb 10th, 2017, 01:44 PM
Okey, Can you please send the source code which you made that?

Sempervivum
Feb 10th, 2017, 03:19 PM
I tested this code:
<script>
function updateBar(idbar, value, maxValue) {
var bar = document.getElementById(idbar);
w = value / maxValue * 100;
bar.style.width = w + "%";
}
function av_grade() {
var i1 = document.getElementById('count1');
var i2 = document.getElementById('count2');
var i3 = document.getElementById('count3');
var i4 = document.getElementById('count4');
var i5 = document.getElementById('count5');
var o = document.getElementById('result');

var l1 = parseInt(i1.value, 10);
var l2 = parseInt(i2.value, 10);
var l3 = parseInt(i3.value, 10);
var l4 = parseInt(i4.value, 10);
var l5 = parseInt(i5.value, 10);

var sum = (l1 || 0) + (l2 || 0) + (l3 || 0) + (l4 || 0) + (l5 || 0);

sum = sum / (5 - isNaN(l1) - isNaN(l2) - isNaN(l3) - isNaN(l4) - isNaN(l5));
o.value = sum.toFixed(2);
updateBar("bar1", sum, 10);
}
</script>

Prochotap
Feb 10th, 2017, 07:16 PM
Sorry, I changed this code too this up code which you sent but still doesn't work maybe should be after button. I would like to send to you a winrar file https://we.tl/VTBggB4AlA because I don't know where I made a mistake.

Sempervivum
Feb 10th, 2017, 08:12 PM
Three errors.

1st here:

o.value =o.toFixed(2);You apply toFixed() to a DOM object but it can be applied to a number only. This is correct:

sum = sum / (5 - isNaN(l1) - isNaN(l2) - isNaN(l3) - isNaN(l4) - isNaN(l5));
o.value = sum.toFixed(2);
updateBar("bar1", sum, 10);


2nd: You have to apply position:relative to the wrapper and position:absolute to the bar:

#wrbar1 {
position: relative;
width: 100px;
height: 12px;
border: 1px solid black;
}

#bar1 {
position: absolute;
width: 0%;
height: 10px;
border: 1px solid black;
background-color: blue;
}

3rd: The bar has to be nested inside the wrapper.
This is wrong:
<div id="wrbar1"></div>
<div id="bar1"></div>
This is correct:

<div id="wrbar1"><div id="bar1"></div></div>

Sempervivum
Feb 10th, 2017, 08:22 PM
PS: Did you notice that the bargraph library you posted is fairly expensive? There are free alternatives like
http://www.chartjs.org/

Prochotap
Feb 11th, 2017, 01:21 PM
1. i fixed these errors and still doesn't work
2. Can you please send me a file which you fixed from the code which i send in link? It could be faster to verify these errors :)

Prochotap
Feb 11th, 2017, 01:38 PM
aha, these bar chart it can apply a numbers only, not signs or letter

Prochotap
Feb 11th, 2017, 01:55 PM
if you send a solution in .rar file (with .html, .css and something else you fixed), i would be very thankful

Sempervivum
Feb 11th, 2017, 11:04 PM
See attachment. This works for me.


aha, these bar chart it can apply a numbers only, not signs or letter
Don't know what you mean. I'm very shure that chart.js is suitable to realize what you need.

Prochotap
Feb 12th, 2017, 09:39 AM
Okey, thx a lot of thx of it. But i have one question. I respect you job which you did, but can you show me how can I show this bar chart perpendicularly and how to show in this chart value assumed from result? thx for advice.

Prochotap
Feb 12th, 2017, 10:40 AM
Wait. Could you send a chart.js file which you added in the library? thx

Sempervivum
Feb 12th, 2017, 05:08 PM
Perpendicular chart is quite easy, simply exchange width an height. See attachment.

Regarding chart.js: Download it and include it in the HTML file. Then try to add the javascript. If it doesn't work, attach a zip file.

Prochotap
Feb 12th, 2017, 06:01 PM
Thank You! :) Only one last question (i hope) as for is bar chart is concerned does it similarly for example #result2 or #result3?

Prochotap
Feb 12th, 2017, 06:34 PM
oh sorry rather not last question. :( Can you tell me please how to write a scatter plot (point chart) assumed from #count1 to count5? I would be grateful to send to You 2 beers right now!

Sempervivum
Feb 12th, 2017, 08:01 PM
A scatter plot can be easily drawn by use of chart.js:
http://www.chartjs.org/docs/#line-chart-scatter-line-charts
Read this an give it a try.

Prochotap
Feb 12th, 2017, 10:36 PM
But you know it have to download from table (from id #count1 to #count5), right? :)

Sempervivum
Feb 13th, 2017, 03:03 PM
"download from table" - what do you mean? The values have to be taken from the table and handed over to the chart.

Prochotap
Feb 13th, 2017, 05:47 PM
yyy... yes. Sorry for my explain, but I didn't know how to interpret - I'm a bit rookie.

Sempervivum
Feb 13th, 2017, 10:18 PM
As I find this subject interesting I have coded a scatter chart by use of chart.js. Have a look at the attachment and check whether it meets your needs.