69
rated 0 times
[
73]
[
4]
/ answers: 1 / hits: 18843
/ 11 Years ago, wed, september 11, 2013, 12:00:00
I'm trying to dynamically create highcharts on the same page in a bootstrap carousel.
I have a function createChart like this:
createChart(questiontitle, answers);
function createChart(questiontitle, answers){
chart = new Highcharts.Chart(options); // Create new chart with general options
chart.renderTo(container);
for (var i = 0; i < answers.length; i++) {
categories.push(answers[i].Text);
}
console.log(categories);
chart.xAxis[0].setCategories(categories);
chart.setTitle({ text: 'eerzera' });
// redraw chart
chart.redraw();
}
I have a div like this:
<div id=container style=min-width: 310px; height: 400px; margin: 0 auto></div>
As you can see I have chart.renderTo but I always get the same error:
Highcharts Error #13
Rendering div not found
This error occurs if the chart.renderTo option is misconfugured so
that Highcharts is unable to find the HTML element to render the chart
in.
My variable options is like this:
var options = {
chart: {
type: 'bar'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}]
}
How is this possible?
More From » jquery
