Question

i`m having troubles with the function each, i want to load a highcharts in different divs with the same name, with an ajax function so it reloads.

I was reading an old post where the chart was loaded this way:

$('.portlet_content_18').each(function(){
var chart = new Highcharts.Chart({
    chart: {
        renderTo: this,
        height: 400
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }]
});
}));

Thing that work for me but not when i change to the ajax call.

My code working with the ajax call, only loading in the first div with the name “graphcontainer” is the next:

function graph() {
    $(function () {

        $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
            // Create the chart
            window.chart = new Highcharts.StockChart({
                chart: {
                    renderTo: 'graphcontainer'
                },
                rangeSelector: {
                    selected: 1
                },

                title: {
                    text: 'AAPL Stock Price'
                },

                series: [{
                    name: 'AAPL',
                    data: data,
                    tooltip: {
                        valueDecimals: 2
                    }
                }]
            });
        });
    });
}

I tried to add the each function so it loads in the other divs with no results.
Hope you can help me.

Answer 1

According to HighChart API and HighStock API:

renderTo: String|Object
The HTML element where the chart will be rendered. 
If it is a string, the element by that id is used. 
The HTML element can also be passed by direct reference. Defaults to null.

First, Highchart requires passing "id" of div element. So, I doubt how passing class name works with first example you have mentioned.

Can you please share from where did you get the former HighChart example ?

Second, Do you have a div containing id="graphcontainer" and included Highstock like

<script src="http://code.highcharts.com/stock/highstock.js"></script>