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:
$(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');
}
);
});