Html5 Bar Chart, X-Axis Names Not Showing

[boywithk9]

I have a 2D bar chart that works fine in flash, but the html5 fallback version is cutting off almost all of the labels.

 

http://deheer.com/cjdeheercom/stats/coldwell-banker_marketshare.html

[Guest Basundhara Ghosal]

Hi,

 

Could you please send us the sample code that you are using?

 

Awaiting your reply.

[boywithk9]

Here's the code:

 

<chart showvalues="1" numberprefix="$" setAdaptiveYMin='0' yAxisMaxValue='320000000' labelDisplay='ROTATE' showYAxisValues='0' labelStep='1' placeValuesInside="1" formatNumberScale="0" showBorder="0" bgColor="FFFFFF" showAlternateHGridColor="0" chartLeftMargin="0" chartRightMargin="0" showPlotBorder="0" plotGradientColor="" plotFillRatio='100,0' canvasBorderColor="FFFFFF" adjustDiv="0" plotSpacePercent="40" baseFont='Verdana' baseFontSize ='11px' baseFontColor ='333' decimals='0' numDivLines='0' xAxisNameWidth="125">

 

<set label="Coldwell Banker" value="315457347" color='E56B00' />

<set label="David Lyng & Associates" value="247531271" color='32759D' />

<set label="Bailey Properties" value="246406005" color='32759D' />

<set label="Century 21" value="124559811" color='32759D' />

<set label="American Dream Realty" value="119646294" color='32759D' />

[boywithk9]

Just FYI, I just upgraded to v 3.2.1, and this problem is still happening. Also, the plot values are now also being pushed outside of view.

[Guest Basundhara Ghosal]

Hi,

 

Could you please send us the screen-shot of the error that you are receiving as we are not able to replicate the issue from the link that you have sent us in this thread.

 

Awaiting your reply.

[DannyR]

Here's a solution for the bar labeling. Place this code before you call render():

 

if (!!chart._overrideJSChartConfiguration) {
chart._overrideJSChartConfiguration({
	plotOptions: {
		series: {
			dataLabels: {
				enabled: true,
				style: {
					fontSize: "7pt"
				},
				color: "#FFFFFF",
				align: "right",
				x: -10,
				y: -2
			}
		}
	}
});
}

 

Still working on the Y-Axis labels. I'll let you know.

[boywithk9]

When you say "before you call render()", so you mean like this? If so, it's not working.

 

<div id=chart1 align=center>The chart will appear within this DIV. This text will be replaced by the chart.</div>

<script type=text/javascript>

var myChart = new FusionCharts("../chartswf/Bar2D.swf?registerWithJS=1", "myChartId", "560", "175", "0", "1");

myChart.setDataURL("coldwell-banker_marketshare.xml");

if (!!chart._overrideJSChartConfiguration) {

chart._overrideJSChartConfiguration({

plotOptions: {

series: {

dataLabels: {

enabled: true,

style: {

fontSize: "7pt"

},

color: "#FFFFFF",

align: "right",

x: -10,

y: -2

}

}

}

});

}

myChart.render("chart1");

</script>

Edited October 18, 2010 by boywithk9

[DannyR]

You need to call it on YOUR instance of chart. So if you're using myChart instead of chart, then its myChart._overrideJSChartConfiguration...

[boywithk9]

That worked, thanks. Looking forward to your solution for the y-axis labels.

[DannyR]

You're welcome.

 

This should get you to where you need to be - note that I've hard-coded a space of 200 pixels for your labels. IDEALLY, you would writesome kind of function to adjust that number based on your longest label. Of course, if you're using hard-coded data this isn't an issue:

 

if (!!chart._overrideJSChartConfiguration) {
chart._overrideJSChartConfiguration({
	chart: {
		marginLeft: 200
	},
	xAxis: {
		labels: {
			align: "right",
			rotation: 0,
			x: 0,
			y: 5
		}
	},
	yAxis: [{
		alternateGridColor: null,
		gridLineWidth: 0
	}],
	plotOptions: {
		series: {
			dataLabels: {
				enabled: true,
				style: {
					fontSize: "7pt"
				},
				color: "#FFFFFF",
				align: "right",
				x: -10,
				y: -2
			}
		}
	}
});
}

 

- marginLeft is the space we're allowing for the labels

- we're un-rotating the X Axis, and offsetting the labels by 5 pixels (in this chart type, axes are reversed)

- I also added styling on the Y Axis to remove the yellow background striped and grid marks (to match the flash version)

 

Interesting challenge! Enjoy...

[DannyR]

Actually, I might change xAxis.labels.x from 0 to -5 to bring the labels away from the axis a bit. I mean, as long as we've come this far.... ;]

[boywithk9]

Perfect, thanks!

 

Is a similar workaround available for column charts that would only display every nth label? My charts on www.cjdeheer.com/market-statistics-single-family-homes.php aren't very pretty on the iPad 'cause the labels are crunched together.

[DannyR]

Again, you're welcome.

 

You could try putting a formatter on your axis. For example, if you wanted to skip every other label in your first example, you could modify the X Axis like this:

 

xAxis: {
labels: {
	align: "right",
	rotation: 0,
	x: -5,
	y: 5,
	formatter: function() {
		if (this.index % 2 == 0) {
			return this.value;
		} else { 
			return "";
		}
	}
}
}

 

So, change the 2 to 3 for every third, etc. I've never really used this, so let me know how you make out.

[boywithk9]

That worked great. I had to change the rotation and the x value for a column chart, but that did the trick. You can see the results in the market statistics section of cjdeheer.com (assuming you have an iPad).

 

Thanks very much!

[DannyR]

Cool! Always glad to help. =]