Question

I’m trying to add more than one bar chart in one page, but when they are displayed just the last one is correctly displyed. In the others previous charts, the bar is not graphed

---

I have this 2 variables (GraphOptionsX and GraphSeriesX) for each chart.

var GraphOptions0 = {
    chart:{renderTo: null,type: 'bar',height: 200,width: 300},
    title:{text:null},
    subtitle:{text:null},
    xAxis:{
        categories:null
    },
    yAxis:{min:0,title:{text: null},labels:{overflow: 'justify'}},
    tooltip:{formatter:function(){return '' + this.x + ' = ' + this.y;}},
    plotOptions:{bar:{dataLabels:{enabled: true}}},
    legend:{enabled: false},
    credits:{enabled: false},
    exporting:{enabled: false},
    series:[]
};
var GraphSeries0 = {
        name:"",
        data:[],
        point:{events:{click: null}}
};

an after I’m generating the charts so (x = 0, 1,…):

var graphSeries = eval("GraphSeries" + x);

        graphSeries.name = "GraphSeries" + x;
        graphSeries.data.push({ y: parseInt(107),   color: 'red' });
        graphSeries.data.push({ y: parseInt(31),    color: 'blue' });
        graphSeries.data.push({ y: parseInt(635),   color: 'green' });
        graphSeries.data.push({ y: parseInt(203),   color: 'yellow' });
        graphSeries.data.push({ y: parseInt(2),     color: 'orange' });
        graphSeries.point.events.click = function() {
            alert ('Category: '+ this.category +', value: '+ this.y);
        }

        var graphOptions = eval("GraphOptions" + x);
        graphOptions.xAxis.categories = ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5'];
        graphOptions.chart.renderTo = 'containerChart'+x;
        graphOptions.series.push(graphSeries);

        new Highcharts.Chart(graphOptions);

Answer 1

Couldn’t understand what was your problem but a demo which creates three chart according your data: In for each loop you just need to clear the data arrays and series arrays.

for(x = 0; x < 3; x++)
    {
    var graphSeries = eval("GraphSeries");
        graphSeries.data = [];

    graphSeries.name = "GraphSeries" + x;
    graphSeries.data.push({ y: parseInt(107 + x),   color: 'red' });
    graphSeries.data.push({ y: parseInt(31),    color: 'blue' });
    graphSeries.data.push({ y: parseInt(635),   color: 'green' });
    graphSeries.data.push({ y: parseInt(203),   color: 'yellow' });
    graphSeries.data.push({ y: parseInt(2),     color: 'orange' });
    graphSeries.point.events.click = function() {
        alert ('Category: '+ this.category +', value: '+ this.y);
    }

    var graphOptions = eval("GraphOptions");
        graphOptions.series = [];
    graphOptions.xAxis.categories = ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5'];
    graphOptions.chart.renderTo = 'containerChart'+x;
    graphOptions.series.push(graphSeries);

    new Highcharts.Chart(graphOptions);
    }

Here is a demo: http://jsfiddle.net/De8MB/1/