d3.js nvd3 issue: different charts on the same HTML page look the same (even though they have different IDs)

I've been working with "multi Bar Horizontal Charts" with different values, on separate HTML pages they look different. On the same page, they look the same even though they have different IDs

What could be the problem?

These are the charts: http://codepen.io/neonpulp/pen/xOPmrN

Below is the HTML and js code.

<div id="chart-avapro" style="height: 500px;" class="with-3d-shadow with-transitions">
    <svg></svg>
</div>

<div id="chart-bocdar" style="height: 500px;" class="with-3d-shadow with-transitions">
    <svg></svg>
</div>

var long_short_data = [
    {
        key: '1er trimestre',
        color: "#438da7",
        values: [
            {
                "label" : "CONTROL, VIGILANCIA Y SEGUIMIENTO AMBIENTAL" ,
                "value" : 13
            } ,
            {
                "label" : "FORTALECIMIENTO INSTITUCIONAL" ,
                "value" : 0
            } ,
            {
                "label" : "COMUNICACIÓN, EDUCACIÓN E INVESTIGACIÓN AMBIENTAL" ,
                "value" : 37
            } ,
            {
                "label" : "MITIGACIÓN Y GESTIÓN DEL RIESGO AMBIENTAL" ,
                "value" : 0
            } , 
            {
                "label" : "EXPEDIENTE FORESTAL URBANO" ,
                "value" : 0
            } ,
            {
                "label" : "SISTEMA DE MONITOREO DE LA CALIDAD DEL AIRE" ,
                "value" : 13
            } ,                     
            {
                "label" : "SISTEMA DE MONITOREO DE LA CALIDAD DE RECURSOS HÍDRICOS" ,
                "value" : 6
            } ,
            {
                "label" : "OPERACIÓN Y MANTENIMIENTO DE LA BOCANA Y DÁRSENA" ,
                "value" : 0
            } , 
            {
                "label" : "PARQUE DISTRITAL CIÉNAGA DE LA VIRGEN" ,
                "value" : 18
            }                                                                               
        ]
    },
    {
        key: '2do trimestre',
        color: "#d86d18",
        values: [
            {
                "label" : "CONTROL, VIGILANCIA Y SEGUIMIENTO AMBIENTAL" ,
                "value" : 87
            } ,
            {
                "label" : "FORTALECIMIENTO INSTITUCIONAL" ,
                "value" : 66
            } ,
            {
                "label" : "COMUNICACIÓN, EDUCACIÓN E INVESTIGACIÓN AMBIENTAL" ,
                "value" : 63
            } ,
            {
                "label" : "MITIGACIÓN Y GESTIÓN DEL RIESGO AMBIENTAL" ,
                "value" : 5
            } ,
            {
                "label" : "EXPEDIENTE FORESTAL URBANO" ,
                "value" : 75
            } ,
            {
                "label" : "SISTEMA DE MONITOREO DE LA CALIDAD DEL AIRE" ,
                "value" : 33
            } , 
            {
                "label" : "SISTEMA DE MONITOREO DE LA CALIDAD DE RECURSOS HÍDRICOS" ,
                "value" : 32
            } ,
            {
                "label" : "OPERACIÓN Y MANTENIMIENTO DE LA BOCANA Y DÁRSENA" ,
                "value" : 27
            } , 
            {
                "label" : "PARQUE DISTRITAL CIÉNAGA DE LA VIRGEN" ,
                "value" : 17
            }                                                                                                                   
        ]
        
    }
];


var chart;
nv.addGraph(function() {
    chart = nv.models.multiBarHorizontalChart()
        .x(function(d) { return d.label })
        .y(function(d) { return d.value })
        .duration(250)
        .margin({left: 345})
        .stacked(true);
         
    chart.yAxis.tickFormat(d3.format(',.2f'));
    
    chart.yAxis.tickFormat(function(d) { return d3.format(',f')(d)+ '%' });

    chart.yAxis.axisLabel('');
    chart.xAxis.axisLabel('').axisLabelDistance(20);
    

    d3.select('#chart-avapro svg')
        .datum(long_short_data)
        .call(chart);

    nv.utils.windowResize(chart.update);

    chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
    chart.state.dispatch.on('change', function(state){
        nv.log('state', JSON.stringify(state));
    });
    return chart;
});

var long_short_data = [
    {
        key: '1er trimestre',
        color: "#438da7",
        values: [
            {
                "label" : "Manual de Operación del Sistema Bocana y Darsena" ,
                "value" : 0
            } ,
            {
                "label" : "Acción Ejecutada / Acción Programada" ,
                "value" : 0
            } ,
            {
                "label" : "Relimpia Realizada / Relimpia Programada" ,
                "value" : 0
            } ,
            {
                "label" : "Batimetría Realizada / Batimetría Programada" ,
                "value" : 0
            }                                                                           
        ]
    },
    {
        key: '2do trimestre',
        color: "#d86d18",
        values: [
            {
                "label" : "Manual de Operación del Sistema Bocana y Darsena" ,
                "value" : 100
            } ,
            {
                "label" : "Acción Ejecutada / Acción Programada" ,
                "value" : 10
            } ,
            {
                "label" : "Relimpia Realizada / Relimpia Programada" ,
                "value" : 0
            } ,
            {
                "label" : "Batimetría Realizada / Batimetría Programada" ,
                "value" : 0
            }                                                                                                               
        ]
        
    }
];


var chart;
nv.addGraph(function() {
    chart = nv.models.multiBarHorizontalChart()
        .x(function(d) { return d.label })
        .y(function(d) { return d.value })
        .duration(250)
        .margin({left: 345})
        .stacked(true);
         
    chart.yAxis.tickFormat(d3.format(',.2f'));
    
    chart.yAxis.tickFormat(function(d) { return d3.format(',f')(d)+ '%' });

    chart.yAxis.axisLabel('');
    chart.xAxis.axisLabel('').axisLabelDistance(20);
    

    d3.select('#chart-bocdar svg')
        .datum(long_short_data)
        .call(chart);

    nv.utils.windowResize(chart.update);

    chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
    chart.state.dispatch.on('change', function(state){
        nv.log('state', JSON.stringify(state));
    });
    return chart;
});

You are expecting that the first chart will have data bound to it and drawn before you redefine the JSON data long_short_data. What is happening is that the charts are drawn using the second definition of long_short_data. For this simple example declare the second dataset using a different name.