Take the 2-minute tour ×

I have an issue that only seems to affect internet explorer 8.

I have used the highcharts.js script from http://www.highcharts.com/ to display data on my site however I have tried to display this data within a lightbox and have used the lightbox_me.js script from http://buckwilson.me/lightboxme/

I will try to show the code I have used:

<script type="text/javascript">

var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'analysis',
defaultSeriesType: 'bar',
backgroundColor: 'rgba(0,0,0,0)'
title: {
text: ''
subtitle: {
text: ''

xAxis: {
categories: ['First Impressions', 'Politeness/Courtesy', 'Helpfulness', 'Speed and Efficiency', 'Reliability', 'Trustworthiness', 'Value for Money', 'Quality of service', 'After Sales', 'Overall Satisfaction'],
title: {
text: null
yAxis: {
min: 0,
title: {
text: 'Overall Score (%)',
align: 'middle'
tooltip: {
formatter: function() {
return ''+
this.y +' %';
plotOptions: {

bar: {
dataLabels: {
enabled: false

legend: {
enabled: false,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: false
credits: {
enabled: false
series: [{
name: 'Year 2012',
data: [<?php echo "$first_impression".","."$politeness".","."$knowledge".","."$speed".","."$reliability".","."$honesty".","."$value".","."$quality".","."$after_sales".","."$satisfaction"; ?>]



As you can see, I have used php to insert the stats.

I then have the lightbox script:

$('#scores_button').click(function(e) {
centered: true, 
onLoad: function() { 

This is the html:

<div id='scores_container'>

<h1 class='lightbox_header'>Areas of Performance</h1>

<div id='analysis'>


<p class='lightbox_paragraph'>We asked all repondents to score the business on it's performance in the areas above. This chart shows the average scores in each area.</p>

<a id='close_x' class='close sprited' href='#'>close</a>


And finally my CSS

#scores_container {
padding:30px 40px 40px 40px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #536376;
-webkit-box-shadow: rgba(0,0,0,.6) 0px 2px 12px;
-moz-box-shadow:  rgba(0,0,0,.6) 0px 2px 12px;

border-bottom:1px solid #cdd0d9;


p.lightbox_paragraph, p.lightbox_paragraph_first{
border-top:1px solid #cdd0d9;

This code works in all browsers I have tested but internet explorer. Internet explorer 8 is the browser that I have been using whilst trying to find a solution.

Please see this screenshot of how it appears in ie8:

Internet Explorer 8

And how it appears in Google Chrome:

Google Chrome

My thoughts are that maybe it is my css causing the problem but no matter what I try I can't seem to get the chart to display. The chart container is also not centered vertically within the browser window but this is something I can work on once I get the chart to render. Any help would be much appreciated.

I know it's not a particularly well built site as I am only learning but please see the following link to the site itself, if it will help: http://www.bbg.im/development

The error is occurring on the profile pages when the chart icon is clicked.

I also am experiencing the same/similar issue with pie charts and google maps in the same lightbox script.

Many thanks.

share|improve this question
where is click than show lightbox ... –  Rohit Azad Mar 20 '13 at 10:58
@Rohit Azad Hello. Sorry but I'm not sure what you are asking me. I have a div with the id #scores_button which, when clicked initiates the lightbox_me script. –  Richard Bell Mar 20 '13 at 11:12
I can see that you have errors in IE, could you use this lib and copy error from IE ? –  Paweł Fus Mar 20 '13 at 11:17
@PawełFus I will try that now. Do I just replace my highcharts library with the one you have provided? –  Richard Bell Mar 20 '13 at 11:37
Yes, it is the same library just a full source code - it is easier to debug. However, if you have extra comma in your code - it won't work. –  Paweł Fus Mar 20 '13 at 11:38
show 1 more comment

1 Answer

up vote 1 down vote accepted

Just viewed the source of the HTML file and surprised to see the extra comma in the array.

series: [{ name: 'Year 2012', data: [95,100,95,95,95,100,80,90,93,] }]

Could you please remove the trailing comma at the end of the data array. i.e. the data array should render like this.

series: [{ name: 'Year 2012', data: [95,100,95,95,95,100,80,90,93] }]

share|improve this answer
Good spot! I will try to figure out where that comma is coming from now. It should not be there. –  Richard Bell Mar 20 '13 at 11:38
Got it! Thank you so much. It turned out to be a misnamed variable in my php that was not completing the series of data. This meant there was a comma appearing at the end as the last piece of data. –  Richard Bell Mar 20 '13 at 11:57
add comment

Your Answer


