grafieken en mysql variabelen
employee_id | comp1 |comp2
id 1 100 40
id 2 80 40
id 3 80 60
In onderstaande html wordt gebruik gemaakt van http://www.rgraph.net/examples/bar-line-and-pie-charts.html
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1"/>
<title>RGraph</title>
<link rel="stylesheet" href="include/website.css" type="text/css" media="screen" />
<link rel="stylesheet" href="include/animations.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="images/favicon.png"/>
<script src="include/RGraph.common.core.js" ></script>
<script src="include/RGraph.common.dynamic.js" ></script>
<script src="include/RGraph.common.key.js" ></script>
<script src="include/RGraph.drawing.rect.js" ></script>
<script src="include/RGraph.common.effects.js" ></script>
<script src="include/RGraph.common.tooltips.js" ></script>
<script src="include/RGraph.bar.js" ></script>
<script src="include/jquery.min.js" ></script>
<script>
window.onload = function ()
{
var bar = new RGraph.Bar('cvs_bar', [[100,40],[80,40],[80,60]])
.Set('labels', ['id1', 'id2', 'id3'])
.Set('colors', ['Gradient(#99f:#27afe9:#058DC7:#058DC7)', 'Gradient(#94f776:#50B332:#B1E59F)', 'Gradient(#fe783e:#EC561B:#F59F7D)'])
.Set('hmargin', 15)
.Set('strokestyle', 'white')
.Set('linewidth', 1)
.Set('shadow', true)
.Set('shadow.color', '#ccc')
.Set('shadow.offsetx', 0)
.Set('shadow.offsety', 0)
.Set('shadow.blur', 10)
.Draw();
}
</script>
</head>
<body>
<canvas width="800" height="600" id="cvs_bar" style="float: left" class="animated rotateIn"></canvas>
</body>
</html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1"/>
<title>RGraph</title>
<link rel="stylesheet" href="include/website.css" type="text/css" media="screen" />
<link rel="stylesheet" href="include/animations.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="images/favicon.png"/>
<script src="include/RGraph.common.core.js" ></script>
<script src="include/RGraph.common.dynamic.js" ></script>
<script src="include/RGraph.common.key.js" ></script>
<script src="include/RGraph.drawing.rect.js" ></script>
<script src="include/RGraph.common.effects.js" ></script>
<script src="include/RGraph.common.tooltips.js" ></script>
<script src="include/RGraph.bar.js" ></script>
<script src="include/jquery.min.js" ></script>
<script>
window.onload = function ()
{
var bar = new RGraph.Bar('cvs_bar', [[100,40],[80,40],[80,60]])
.Set('labels', ['id1', 'id2', 'id3'])
.Set('colors', ['Gradient(#99f:#27afe9:#058DC7:#058DC7)', 'Gradient(#94f776:#50B332:#B1E59F)', 'Gradient(#fe783e:#EC561B:#F59F7D)'])
.Set('hmargin', 15)
.Set('strokestyle', 'white')
.Set('linewidth', 1)
.Set('shadow', true)
.Set('shadow.color', '#ccc')
.Set('shadow.offsetx', 0)
.Set('shadow.offsety', 0)
.Set('shadow.blur', 10)
.Draw();
}
</script>
</head>
<body>
<canvas width="800" height="600" id="cvs_bar" style="float: left" class="animated rotateIn"></canvas>
</body>
</html>
Via de onderstaande code lees ik de tabel uit:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
sql = "SELECT employee_id, comp1, comp2 FROM Tresults"
$report = MYSQL_Query(sql)
while($report_row = mysql_fetch_array($report))
{
$employee_id = $report_row['employee_id'];
$comp1 = $report_row['comp1'];
$comp2 = $report_row['comp2'];
}
$report = MYSQL_Query(sql)
while($report_row = mysql_fetch_array($report))
{
$employee_id = $report_row['employee_id'];
$comp1 = $report_row['comp1'];
$comp2 = $report_row['comp2'];
}
Hoe krijg ik nu de resultaten van de query ($employee_id, $comp1 en $comp2) beschikbaar in de javascript code?
Code (php)
1
2
2
var bar = new RGraph.Bar('cvs_bar', [[100,40],[80,40],[80,60]])
.Set('labels', ['id1', 'id2', 'id3'])
.Set('labels', ['id1', 'id2', 'id3'])
Toevoeging op 04/03/2014 22:57:00:
Iemand die weet hoe dit aan te pakken?
Toevoeging op 05/03/2014 08:06:15:
iemand een idee?
Er zijn nog geen reacties op dit bericht.