CODEWITHSUNDEEP
javascriptjqueryhighchartsrendering
nielsv
nielsv

Reputation: 6800

chart.renderTo doesn't work

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?

Upvotes: 4

Views: 20098

Answers (4)

Taua Negri
Taua Negri

Reputation: 71

You may be facing the same problem that i was. Try to put your highchart script right after your div's declaration just like in the example bellow so it can recognize your div's id:

<head>
    <title>HighCharts :D</title>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 400px; margin: 0 auto">
</div>
<script type="text/javascript">
    var myChart = Highcharts.chart('container', {
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
    myChart.renderTo('container');

</script>
</body>

Upvotes: 1

NLF
NLF

Reputation: 101

In case someone stumbles on this while Googling, when you specific the element in renderTo, you shouldn't include the # if that element is an ID.

If you have this element <div id="graph-container"></div>

This fails: renderTo: '#graph-container'

This works: renderTo: 'graph-container'

Reference to the Highcharts docs

Upvotes: 6

jlbriggs
jlbriggs

Reputation: 17791

If your goal is to keep this dynamic, by being able to build multiple charts with multiple renderTo's but using the same options, you can do it like this:

change 

function createChart(questiontitle, answers){
    chart = new Highcharts.Chart(options); 
    chart.renderTo(container);

to:

function createChart(questiontitle, answers){
    chart = $('#container').highcharts(options);

or, if not using jQuery, 

function createChart(questiontitle, answers){
    options.chart.renderTo = 'container';
    chart = new Highcharts.Chart(options);

Upvotes: 7

Paweł Fus
Paweł Fus

Reputation: 45079

Something like this: chart.renderTo(container); doesn't exists in Highcharts.

To set renderTo use options:

var options = {
    chart: {
        type: 'bar',
        renderTo: 'container'
    },

Upvotes: 4

Related Questions