datum wil ik anders onder aan de grafiek.
In de grafiek zie ik de datum als jaar, maand dag heb, maar ik wil hem dus precies omgekeerd.
Misschien moet ik er een aparte topic van maken, maar ik wil ook met de muis over de grafiek en dan de datum met het bedrag van de staaf in beeld krijgen.
Dit is mijn code:
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
$(document).ready(function(){
var s1 = <?php echo json_encode($debet_arr, JSON_NUMERIC_CHECK); ?>;
var s2 = <?php echo json_encode($credit_arr, JSON_NUMERIC_CHECK); ?>;
var ticks = <?php echo json_encode($datum_arr, JSON_NUMERIC_CHECK); ?>;
plot2 = $.jqplot('chart2', [s1, s2], {
// Turns on animatino for all series in this plot.
animate: false,
cursor: {
show: true,
zoom: true,
looseZoom: true,
showTooltip: false,
tooltipLocation:'sw'
},
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
rendererOptions: {
fillToZero: true,
useNegativeColors: true // false = negative same color as positive
},
pointLabels: { show: true },
// Set the varyBarColor option to true to use different colors for each bar.
// The default series colors are used.
varyBarColor: false
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
formatString: '%d %b %Y',
showMark: true,
angle: -90,
textColor: '#755E28'
}
},
yaxis: {
autoscale: true,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
label: 'inkomsten en uitgaven',
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
formatString: " %.2f",
showMark: true,
textColor: '#755E28'
}
}
},
series: [
{
pointLabels: { show: true },
renderer: $.jqplot.BarRenderer,
fill: false,
label: 'inkomsten',
color: '#1AA017',
negativeColor: '#1AA017'
},
{
renderer: $.jqplot.BarRenderer,
label: 'uitgaven',
color: '#FD3400',
negativeColor: '#FD3400'
},
{
lineWidth:4,
markerOptions:{ style:'square' }
}
],
// legenda
legend: {
show: true,
placement: 'outside'
},
// layout
grid: {
background: 'rgba(57,57,57,0.0)',
drawBorder: false,
shadow: false,
gridLineColor: '#755E28',
gridLineWidth: 1
},
// mouseover
highlighter: {
showMarker: true,
tooltipAxes: 'xy',
yvalues: 1,
formatString:'<table class="jqplot-highlighter"> \
<tr><td>%s</td>><td>%s</td></tr> \
</table>'
}
});
$('#chart2').bind('jqplotDataHighlight',
function (ev, seriesIndex, pointIndex, data) {
$('#info2').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
$('#chart2').bind('jqplotDataUnhighlight',
function (ev) {
$('#info2').html('Nothing');
}
);
});
var s1 = <?php echo json_encode($debet_arr, JSON_NUMERIC_CHECK); ?>;
var s2 = <?php echo json_encode($credit_arr, JSON_NUMERIC_CHECK); ?>;
var ticks = <?php echo json_encode($datum_arr, JSON_NUMERIC_CHECK); ?>;
plot2 = $.jqplot('chart2', [s1, s2], {
// Turns on animatino for all series in this plot.
animate: false,
cursor: {
show: true,
zoom: true,
looseZoom: true,
showTooltip: false,
tooltipLocation:'sw'
},
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
rendererOptions: {
fillToZero: true,
useNegativeColors: true // false = negative same color as positive
},
pointLabels: { show: true },
// Set the varyBarColor option to true to use different colors for each bar.
// The default series colors are used.
varyBarColor: false
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
formatString: '%d %b %Y',
showMark: true,
angle: -90,
textColor: '#755E28'
}
},
yaxis: {
autoscale: true,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
label: 'inkomsten en uitgaven',
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
formatString: " %.2f",
showMark: true,
textColor: '#755E28'
}
}
},
series: [
{
pointLabels: { show: true },
renderer: $.jqplot.BarRenderer,
fill: false,
label: 'inkomsten',
color: '#1AA017',
negativeColor: '#1AA017'
},
{
renderer: $.jqplot.BarRenderer,
label: 'uitgaven',
color: '#FD3400',
negativeColor: '#FD3400'
},
{
lineWidth:4,
markerOptions:{ style:'square' }
}
],
// legenda
legend: {
show: true,
placement: 'outside'
},
// layout
grid: {
background: 'rgba(57,57,57,0.0)',
drawBorder: false,
shadow: false,
gridLineColor: '#755E28',
gridLineWidth: 1
},
// mouseover
highlighter: {
showMarker: true,
tooltipAxes: 'xy',
yvalues: 1,
formatString:'<table class="jqplot-highlighter"> \
<tr><td>%s</td>><td>%s</td></tr> \
</table>'
}
});
$('#chart2').bind('jqplotDataHighlight',
function (ev, seriesIndex, pointIndex, data) {
$('#info2').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
$('#chart2').bind('jqplotDataUnhighlight',
function (ev) {
$('#info2').html('Nothing');
}
);
});
Gewijzigd op 16/11/2018 00:58:35 door Frits van Leeuwen
Ook voor de mouseover is er een plugin, maar misschien werkt dit al zoals je wilt op het moment dat je de "ticks" aanpast.
(dit alles kostte mij 5 mins Googlen trouwens)
Gewijzigd op 16/11/2018 15:22:14 door Thomas van den Heuvel
Ik heb de datum op een goede manier gezien, maar toen ik verder ging was de datum op een bepaald moment anders. Maar toen ik dat constateerde, was ik al weer zo ver met ontwikkelen, dat ik niet meer wist waar het fout ging.
Als ik google, vind ik dat ik met
Code (php)
1
2
3
4
5
6
2
3
4
5
6
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {formatString: '%d %b %Y'}
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {formatString: '%d %b %Y'}
de datum naar wens moet krijgen. Echter, dat gebeurt niet en ik vraag me af waarom?
Het zelfde geldt voor mijn vraag over de mouseover. Hiervoor dacht ik dat dit stukje code goed was. Maar helaas.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
// mouseover
highlighter: {
showMarker: true,
tooltipAxes: 'xy',
yvalues: 1,
formatString:'<table class="jqplot-highlighter"> \
<tr><td>%s</td>><td>%s</td></tr> \
</table>'
}
highlighter: {
showMarker: true,
tooltipAxes: 'xy',
yvalues: 1,
formatString:'<table class="jqplot-highlighter"> \
<tr><td>%s</td>><td>%s</td></tr> \
</table>'
}
Gewijzigd op 16/11/2018 15:53:56 door Frits van Leeuwen
Dit staat ook min of meer in de documentatie:
Quote:
To use this renderer, include the plugin in your source
<script type="text/javascript" language="javascript" src="plugins/jqplot.dateAxisRenderer.js"></script>
<script type="text/javascript" language="javascript" src="plugins/jqplot.dateAxisRenderer.js"></script>
Heb je dit ook gedaan, en heb je er ook voor gezorgd dat je browser cache geleegd is, want wijzigingen in JavaScript en het effect daarvan op pagina's willen soms niet direct bijgewerkt worden zodat deze de nieuwe situatie weerspiegelt, waardoor het inderdaad lijkt alsof er niets is veranderd :).
Gewijzigd op 16/11/2018 16:09:05 door Thomas van den Heuvel
Wat je noemt heb ik inderdaad ook wel zo geregeld. maar toch werkt het niet.
Het antwoord van de regel
is
Code (php)
1
["2018-10-18","2018-10-19","2018-10-20","2018-10-21","2018-10-22","2018-10-23","2018-10-24","2018-10-25","2018-10-26"]
Dat gaat dus ticks in.
Gewijzigd op 17/11/2018 00:11:58 door Frits van Leeuwen
Gewijzigd op 17/11/2018 10:50:17 door Thomas van den Heuvel
Bedankt voor de assistentie.