Jqplot staaf-grafiek wordt niet getoond.

Door Frits van Leeuwen op 12-07-2018 23:56

2.450 views

Hallo allemaal,

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.


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

});

Frits van Leeuwen

14-11-2018 22:07 gewijzigd op 14-11-2018 22:14

Ik heb er dit van gemaakt en nu werkt het wel. Ik moest hiervoor wel een meervoudige array omvormen naar een enkelvoudige array.

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

Reageren

Inloggen om te reageren