Highcharts two charts on page

Question

This is probably an easy fix, but I've been fighting with it so long that I just don't "see" it anymore.

Trying to display two charts on one page. One is a column chart containing two comparison groups, and another one is a longitudinal one that displays a timeseries. They are both generated dynamically (that part is working fine), but for the life of me, I can't get them to both display. If I delete one, the other one displays, but not both at the same time.

I would appreciate any help!

Here is the jsfiddle which is giving an error of //]]>, which I really have no idea what it means.

<script>
$(function () {
var data = [

{"unit":"Apples", "status":"John", "val":3.0000},

{"unit":"Apples", "status":"Julia", "val":4.0000},

{"unit":"Apples", "status":"Liz", "val":3.2308},

{"unit":"Apples", "status":"Bob", "val":3.3574},

{"unit":"Apples", "status":"Chuck", "val":3.0847},

{"unit":"Apples", "status":"BillyBob", "val":3.5385},

{"unit":"Apples", "status":"Cindy", "val":3.4444},

{"unit":"Apples", "status":"Blanche", "val":3.1992},

{"unit":"Oranges", "status":"John", "val":3.6000},

{"unit":"Oranges", "status":"Liz", "val":3.5000},

{"unit":"Oranges", "status":"Bob", "val":3.5344},

{"unit":"Oranges", "status":"Chuck", "val":3.4828},

{"unit":"Oranges", "status":"BillyBob", "val":3.7143},

{"unit":"Oranges", "status":"Cindy", "val":3.7500},

{"unit":"Oranges", "status":"Blanche", "val":3.4526},

{"unit":"Unclassified", "status":"John", "val":0.0000},

{"unit":"Unclassified", "status":"Liz", "val":0.0000},

{"unit":"Unclassified", "status":"Bob", "val":1.1429},

{"unit":"Unclassified", "status":"Chuck", "val":1.0625},

{"unit":"Unclassified", "status":"BillyBob", "val":0.7500},

{"unit":"Unclassified", "status":"Cindy", "val":1.0000},

{"unit":"Unclassified", "status":"Blanche", "val":1.2500},

];

var datalong = [


{"longunit":"2004", "longstatus":"Apples", "longval":3.2},

{"longunit":"2006", "longstatus":"Apples", "longval":3.2},

{"longunit":"2009", "longstatus":"Apples", "longval":3.3},

{"longunit":"2011", "longstatus":"Apples", "longval":3.4},

{"longunit":"2004", "longstatus":"Oranges", "longval":3.4},

{"longunit":"2006", "longstatus":"Oranges", "longval":3.5},

{"longunit":"2009", "longstatus":"Oranges", "longval":3.5},

{"longunit":"2011", "longstatus":"Oranges", "longval":3.6},

];


var seriesData = [];
var xCategories = [];

var i, cat;
for(i = 0; i < data.length; i++){
cat = data[i].unit;
if(xCategories.indexOf(cat) === -1){
xCategories[xCategories.length] = cat;
}
}

for(i = 0; i < data.length; i++){
if(seriesData){
var currSeries = seriesData.filter(function(seriesObject){ return seriesObject.name == data[i].status;});
if(currSeries.length === 0){
seriesData[seriesData.length] = currSeries = {name: data[i].status, data: []};
} else {
currSeries = currSeries[0];
}
var index = currSeries.data.length;
currSeries.data[index] = data[i].val;
} else {
seriesData[0] = {name: data[i].status, data: [data[i].val]}
}
}


var longseriesData = [];
var longxCategories = [];

var longcat;
for(i = 0; i < data2.length; i++){
longcat = data2[i].unit;
if(longxCategories.indexOf(cat) === -1){
longxCategories[longxCategories.length] = longcat;
}
}


for(i = 0; i < data2.length; i++){
if(longseriesData){
var longcurrSeries = seriesData.filter(function(seriesObject){ return seriesObject.name == data2[i].status;});

if(longcurrSeries.length === 0){
longseriesData[longseriesData.length] = longcurrSeries = {name: data2[i].status, data: []};
} else {
longcurrSeries = longcurrSeries[0];
}
var longindex = longcurrSeries.data2.length;
longcurrSeries.data2[index] = data2[i].val;
} else {
longseriesData[0] = {name: data2[i].status, data: [data2[i].val]}
}
}


var happycontainer;
$(document).ready(function() {
happycontainer= new Highcharts.Chart({
chart: {
renderTo: 'container-happycontainer',
type: 'column'
},
title: {
text: 'column chart'
},
xAxis: {
categories: xCategories
},
yAxis: {
min: 0,
title: {
    text: 'Testing Question 1'
},
stackLabels: {
    enabled: true,
    style: {
        fontWeight: 'bold',
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
    }
}
},

series: seriesData
});
});

});


var long-happycontainer;
$(document).ready(function() {
long-happycontainer= new Highcharts.Chart({
chart: {
renderTo: 'long-container-happycontainer',
type: 'line'
},

colors: ['#0D26E7', '#B20000'],

title: {
text: 'Testing Question 2'
},
xAxis: {
categories: xCategories
},

yAxis: {
min: 0,
title: {
    text: 'Means of Responses'
},
},

plotOptions: {
series: {
lineWidth: 3
}
},
series:  seriesData 

});
});

});
</script>

http://jsfiddle.net/bCU2E/155/

Answer 1

You need to clean up your js syntax a lot. But, the main issue is where you are setting index lengths and variable declarations are outside of scope. In jsFiddle you need to remove the script tags from your js code block as well. Now, run jsHint - good gravy look at all those red dots. Not bad though, just fix what it tells you to.

Now, the main issue is this part:

var longindex = longcurrSeries.data2.length;
longcurrSeries.data2[index] = data2[i].val;

This is undefined longcurrSeries.data2.length becuase it has no elment of data2 . You need to do this:

var longindex = longcurrSeries.data.length;
longcurrSeries.data[index] = data2[i].val;

Fix you other syntax errors (I left the function declared in a loop alone for now) and I would definitely change your variable name for long-happycontainer to something more standardized (try not to have operators in var names) and you get this jsFiddle .