Jqplot staaf-grafiek wordt niet getoond.
Ik heb weer een vreemd probleem.
Ik heb een grafiek gemaakt die niet wordt getoond. De layout ziet er goed uit, maar de staafgrafiek wordt niet getoond.
Het vreemde is wel, als ik met de muit over de grafiek beweeg, zie ik wel dikke stippen met een label.
In het ladel lees ik ook wel de waarde die de staafgrafiek daar zou moeten hebben. Dus i.p.v. een staafgrafiek heb ik een verborgen stippen grafiek.
Wie weet wat er mis is?
Dit is de code voor de grafiek.
Alvast bedankt.
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
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
$(document).ready(function () {
$.jqplot._noToImageButton = true;
$.jqplot.config.enablePlugins = true;
var staafdebet = <?php echo json_encode($journaalposten_debet_arr, JSON_NUMERIC_CHECK); ?>;
var staafcredit = <?php echo json_encode($journaalposten_credit_arr, JSON_NUMERIC_CHECK); ?>;
plot2 = $.jqplot('chart2', [staafdebet, staafcredit], {
// Turns off animatino for all series in this plot.
animate: false,
highlighter: {
show: true,
sizeAdjust: 1,
tooltipOffset: 9
},
grid: {
background: 'rgba(57,57,57,0.0)',
drawBorder: false,
shadow: false,
gridLineColor: '#755E28',
gridLineWidth: 1
},
legend: {
show: true,
placement: 'outside'
},
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
showHighlight: true,
rendererOptions: {
fillToZero: true,
smooth: false
},
showMarker: false,
barWidth: null
},
series: [
{
renderer: $.jqplot.BarRenderer,
fill: false,
label: 'debet',
color: '#1AA017'
},
{
renderer: $.jqplot.BarRenderer,
label: 'credit',
color: '#FD3400'
}
],
axesDefaults: {
rendererOptions: {
drawBaseline: false
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
formatString: "%b %e",
angle: -30,
textColor: '#755E28'
},
min: "<?php echo $datum1; ?>",
max: "<?php echo $datum2; ?>",
tickInterval: "1 days",
drawMajorGridlines: false
},
yaxis: {
renderer: $.jqplot.LogAxisRenderer,
rendererOptions: {
minorTicks: 0
},
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
autoscale: true,
tickOptions: {
formatString: " %.2f",
showMark: false,
textColor: '#755E28'
}
}
}
});
$('.jqplot-highlighter-tooltip').addClass('ui-corner-all')
});
$.jqplot._noToImageButton = true;
$.jqplot.config.enablePlugins = true;
var staafdebet = <?php echo json_encode($journaalposten_debet_arr, JSON_NUMERIC_CHECK); ?>;
var staafcredit = <?php echo json_encode($journaalposten_credit_arr, JSON_NUMERIC_CHECK); ?>;
plot2 = $.jqplot('chart2', [staafdebet, staafcredit], {
// Turns off animatino for all series in this plot.
animate: false,
highlighter: {
show: true,
sizeAdjust: 1,
tooltipOffset: 9
},
grid: {
background: 'rgba(57,57,57,0.0)',
drawBorder: false,
shadow: false,
gridLineColor: '#755E28',
gridLineWidth: 1
},
legend: {
show: true,
placement: 'outside'
},
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
showHighlight: true,
rendererOptions: {
fillToZero: true,
smooth: false
},
showMarker: false,
barWidth: null
},
series: [
{
renderer: $.jqplot.BarRenderer,
fill: false,
label: 'debet',
color: '#1AA017'
},
{
renderer: $.jqplot.BarRenderer,
label: 'credit',
color: '#FD3400'
}
],
axesDefaults: {
rendererOptions: {
drawBaseline: false
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
formatString: "%b %e",
angle: -30,
textColor: '#755E28'
},
min: "<?php echo $datum1; ?>",
max: "<?php echo $datum2; ?>",
tickInterval: "1 days",
drawMajorGridlines: false
},
yaxis: {
renderer: $.jqplot.LogAxisRenderer,
rendererOptions: {
minorTicks: 0
},
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
autoscale: true,
tickOptions: {
formatString: " %.2f",
showMark: false,
textColor: '#755E28'
}
}
}
});
$('.jqplot-highlighter-tooltip').addClass('ui-corner-all')
});
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
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
$(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 },
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,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickOptions: {
formatString: '%e %b %Y',
angle: -90,
textColor: '#755E28'
}
},
yaxis: {
autoscale: true,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
label: 'inkomsten en uitgaven',
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
formatString: " %.2f",
showMark: false,
textColor: '#755E28'
}
}
},
series: [
{
pointLabels: { show: true },
renderer: $.jqplot.BarRenderer,
fill: false,
label: 'inkomsten',
color: '#1AA017'
},
{
renderer: $.jqplot.BarRenderer,
label: 'uitgaven',
color: '#FD3400'
},
{
lineWidth:4,
markerOptions:{ style:'square' }
}
],
// wijzig kleur bij mouseover
highlighter: {
show: true,
tooltipAxes: 'y',
yvalues: 1,
formatString:'<table class="jqplot-highlighter"><tr><td>bedrag:</td><td>%s</td></tr></table>'
},
// legenda
legend: {
show: true,
placement: 'outside'
},
// layout
grid: {
background: 'rgba(57,57,57,0.0)',
drawBorder: false,
shadow: false,
gridLineColor: '#755E28',
gridLineWidth: 1
}
});
$('#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 },
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,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickOptions: {
formatString: '%e %b %Y',
angle: -90,
textColor: '#755E28'
}
},
yaxis: {
autoscale: true,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
label: 'inkomsten en uitgaven',
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
formatString: " %.2f",
showMark: false,
textColor: '#755E28'
}
}
},
series: [
{
pointLabels: { show: true },
renderer: $.jqplot.BarRenderer,
fill: false,
label: 'inkomsten',
color: '#1AA017'
},
{
renderer: $.jqplot.BarRenderer,
label: 'uitgaven',
color: '#FD3400'
},
{
lineWidth:4,
markerOptions:{ style:'square' }
}
],
// wijzig kleur bij mouseover
highlighter: {
show: true,
tooltipAxes: 'y',
yvalues: 1,
formatString:'<table class="jqplot-highlighter"><tr><td>bedrag:</td><td>%s</td></tr></table>'
},
// legenda
legend: {
show: true,
placement: 'outside'
},
// layout
grid: {
background: 'rgba(57,57,57,0.0)',
drawBorder: false,
shadow: false,
gridLineColor: '#755E28',
gridLineWidth: 1
}
});
$('#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 14/11/2018 22:14:58 door Frits van Leeuwen