jqplot highlighter x en y
Ik ben een tijdje aan het rondzoeken geweest, maar ik kom er niet uit.
Ik heb een staafgrafiek, en bij elke balk wil ik de datum zien en ik wil een bedrag zien.
Nu krijg ik het nummer van de x te zien met het bedrag dat bij y staat. Dus bij voorbeeld "2, € 100.00" maar er zou moeten staan "19 okt 2018, € 100.00"
En iets dat ik iets minder belangrijk vind, is dat ik de legenda die bij die balk hoort er boven zet. Maar dat is wel een wens van mij.
De grafiek wordt opgebouwd door 3 array's die even lang zijn, maar met 1 waarde er in. Dus 1 met debet bedragen en 1 met credit bedragen. Voor de x as heb ik een array met dagen.
Ik heb een jqplot grafiek die de volgende code bevat:
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
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
$.jqplot.config.enablePlugins = true;
$(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], {
useNegativeColors: false, // false = negative same color as positive
seriesColors:['#00C800', '#DC0000'],
negativeSeriesColors: ['#40C870', '#DC4070'],
seriesDefaults: { // The "seriesDefaults" option is an options object that will be applied to all series in the chart.
renderer:$.jqplot.BarRenderer,
rendererOptions: {
fillToZero: true,
showDataLabels: true
},
pointLabels: { show: true }
},
series: [
{
label: 'inkomsten',
},
{
label: 'uitgaven',
},
{
lineWidth:4,
markerOptions:{ style:'square' }
}
],
axes: {
xaxis: { // Use a category axis on the x axis and use our custom ticks.
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
ticks: ticks,
tickOptions: {angle: -90}
},
yaxis: { // Pad the y axis just a little so bars can get close to, but not touch, the grid boundaries. 1.2 is the default padding.
autoscale: true,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
label: 'inkomsten en uitgaven',
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {formatString: " %.2f"}
}
},
// mouseover
highlighter: {
show: true,
fadeTooltip : false,
tooltipAxes: 'xy',
useXTickMarks: true,
useYTickMarks: true
},
cursor: {show: false},
// legenda
legend: {
show: true,
placement: 'outside'
},
// layout
grid: {
background: 'rgba(57,57,57,0.0)',
drawBorder: false,
shadow: false,
gridLineColor: '#755E28',
gridLineWidth: 1
}, // Turns on animatino for all series in this plot.
animate: false,
textColor: "#755E28"
});
$('#chart2').bind('jqplotDataHighlight',
function (ev, seriesIndex, pointIndex, data) {
$('#info2').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
$('#chart2').bind('jqplotDataUnhighlight',
function (ev) {
$('#info2').html('Nothing');
}
);
});
$(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], {
useNegativeColors: false, // false = negative same color as positive
seriesColors:['#00C800', '#DC0000'],
negativeSeriesColors: ['#40C870', '#DC4070'],
seriesDefaults: { // The "seriesDefaults" option is an options object that will be applied to all series in the chart.
renderer:$.jqplot.BarRenderer,
rendererOptions: {
fillToZero: true,
showDataLabels: true
},
pointLabels: { show: true }
},
series: [
{
label: 'inkomsten',
},
{
label: 'uitgaven',
},
{
lineWidth:4,
markerOptions:{ style:'square' }
}
],
axes: {
xaxis: { // Use a category axis on the x axis and use our custom ticks.
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
ticks: ticks,
tickOptions: {angle: -90}
},
yaxis: { // Pad the y axis just a little so bars can get close to, but not touch, the grid boundaries. 1.2 is the default padding.
autoscale: true,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
label: 'inkomsten en uitgaven',
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {formatString: " %.2f"}
}
},
// mouseover
highlighter: {
show: true,
fadeTooltip : false,
tooltipAxes: 'xy',
useXTickMarks: true,
useYTickMarks: true
},
cursor: {show: false},
// legenda
legend: {
show: true,
placement: 'outside'
},
// layout
grid: {
background: 'rgba(57,57,57,0.0)',
drawBorder: false,
shadow: false,
gridLineColor: '#755E28',
gridLineWidth: 1
}, // Turns on animatino for all series in this plot.
animate: false,
textColor: "#755E28"
});
$('#chart2').bind('jqplotDataHighlight',
function (ev, seriesIndex, pointIndex, data) {
$('#info2').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
$('#chart2').bind('jqplotDataUnhighlight',
function (ev) {
$('#info2').html('Nothing');
}
);
});
Ik hoop diat iemand een oplossing voor mij heeft. Alvast bedankt,
Frits van Leeuwen
output regel 5 is: [0,40,-10,76,60,0,0]
output regel 6 is: ["18 okt. 2018","19 okt. 2018","20 okt. 2018","21 okt. 2018","22 okt. 2018","23 okt. 2018","24 okt. 2018"]
Gewijzigd op 21/11/2018 21:54:38 door Frits van Leeuwen