Tijden veranderen
grafiek maken
ik ben een echte neewbie met php. en wil een grafiek maken met data uit mysql.
het gaat om een lijngrafiek. ik probeer jpgraph maar loop vast ,
iemand ervaring die mij hier mee kan helpen?????
thnx
Ik heb op dit moment mysql draaien met daarin db analyzer en tbl instruments
in deze tabel worden diverse metingen weergeven waaronder O2, Co2 , and date/time. deze wil ik selecteren en omzetten naar een lijn grafiek met bv rode lijn voor co2 en blauw voor O2 de yas loopt van 0tot100% en de xas is de tijd van de meting.
en voorbeeld zoals dit : http://jpgraph.net/features/gallery.php#line1
hoe kan ik nu een sql query toevoegen aan JPgraph zodat mijn data wordt gebruikt.
zijn er ergens goede voorbeeld scripts te vinden die zelf aantepassen zijn?
hopelijk wil je me helpen met opstarten.
thnx,bennie
klik
deze gebruik ik zelf en is redelijk eenvoudig te koppelen door een query te gebruiken in de javascript code...
daarnaast moet je gewoon een aantal punten bepalen, highcharts (jquery btw) schaalt zelf de grafiek al dus daar heb je geen omkijken naar.
Gewijzigd op 12/07/2010 15:48:30 door Mick ForSure
Als je even op de website van jpgraph leest ( http://jpgraph.net/doc/howto1.php )
Die highcharts is misschien nog makkelijker in gebruik omdat je veel meer clientside laat rekenen.
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'line'
},
credits: false,
title: {
text: 'Bezoekersaantallen per dag'
},
subtitle: {
text: ''
},
xAxis: {
categories: ['01-07','02-07','03-07','04-07','05-07','06-07','07-07','08-07','09-07','10-07','11-07','12-07'],
title: {
text: 'Month'
}
},
yAxis: {
title: {
text: 'Bezoekers'
}
},
tooltip: {
enabled: true,
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +' bezoeker(s)';
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
}
}
},
series: [
{ name: 'Pagina1',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2] },
{ name: 'Pagina2',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3] },
{ name: 'Error404',
data: [0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0] },
{ name: 'Pagina3',
data: [0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0] },
{ name: 'Pagina4',
data: [0, 0, 0, 0, 0, 0, 0, 0, 7, 0, 0, 3] },
{ name: 'Pagina5',
data: [0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0] },
]
});
});
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'line'
},
credits: false,
title: {
text: 'Bezoekersaantallen per dag'
},
subtitle: {
text: ''
},
xAxis: {
categories: ['01-07','02-07','03-07','04-07','05-07','06-07','07-07','08-07','09-07','10-07','11-07','12-07'],
title: {
text: 'Month'
}
},
yAxis: {
title: {
text: 'Bezoekers'
}
},
tooltip: {
enabled: true,
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +' bezoeker(s)';
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
}
}
},
series: [
{ name: 'Pagina1',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2] },
{ name: 'Pagina2',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3] },
{ name: 'Error404',
data: [0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0] },
{ name: 'Pagina3',
data: [0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0] },
{ name: 'Pagina4',
data: [0, 0, 0, 0, 0, 0, 0, 0, 7, 0, 0, 3] },
{ name: 'Pagina5',
data: [0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0] },
]
});
});
waarbij hier name: de naam is van het object en daarachter in de array data: de gegevens.
Bij mij is het heel simpel, elke getalletje is het aantal bezoekers op de desbetreffende pagina.
Dit is trouwens wel statisch, je zal het zelf met php moeten gaan uitzoeken.
edit: op de x-as zie je categories: (bij mij zijn dit de afgelopen 10 dagen) ook deze zal je aan moeten passen.
Gewijzigd op 12/07/2010 15:59:25 door Mick ForSure
bedankt voor je reactie ziet er inderdaad goed uit die grafiek. heb hem inmiddels gedownload en de grafiek aanpassingen zijn idd erg makkelijk te doen.
ga zo google'n om te kijken hoe ik mijn data erin krijg of heeft iemand daar een voorbeeld/idee van?
in elk geval bedankt voor de reacties laat de uitkomst zeker weten :-)