chart is not rendering properly, canvasjs

Question

I'm trying to render two dynamic charts using canvasJS, Chart one is rendering properly, in fact second chart is populating properly, please see the inspect element image, but it's not displaying on the page.

This is interface, just one chart is displaying

and here is inspect elem.

#adverts is rendering, but not displayed here.

.chartContainer{
    height: 400px;
    width: 100%; 
}

PS I tried to commented out first chart rendering code, but not working at all, still displaying the first one only.

EDIT

Here is console log about what I'm getting back to render chart

here is snippet

function drawChart(obj, placeholder, From, To){
var legendFrom;
var legendTo;
if(From != 'undefined'){
    legendFrom = From;
}
if(To != 'undefined'){
    legendTo = To;
}
var dataPoints = [];
var from = [];
var to = [];
var advertFrom = [];
var advertTo = [];
for (var i = 0; i <= obj.length - 1; i++) {
    if(obj[i].typeOf != 'undefined' || obj[i].typeOf != ''){
        if(obj[i].typeOf == 'from'){
            from.push({label:obj[i].year+"-"+obj[i].month+"-"+obj[i].day,y:Math.round(obj[i].avgPrice * 1000) / 1000});
            advertFrom.push({label:obj[i].year+"-"+obj[i].month+"-"+obj[i].day,y:obj[i].adverts});
        }else{
            to.push({label:obj[i].year+"-"+obj[i].month+"-"+obj[i].day,y:Math.round(obj[i].avgPrice * 1000) / 1000});
            advertTo.push({label:obj[i].year+"-"+obj[i].month+"-"+obj[i].day,y:obj[i].adverts});
        }
    }
    else
        from.push({label:obj[i].year+"-"+obj[i].month+"-"+obj[i].day,y:Math.round(obj[i].avgPrice * 1000) / 1000});
}
var chart = new CanvasJS.Chart("chartContainer",
{
    animationEnabled: true,
    //theme: "theme1",
    zoomEnabled: true,
    title:{
        text: placeholder
    },
    data: [
        {
            type: "spline",  //change type to bar, line, area, pie, etc
            showInLegend: true,
            legendText: "From "+legendFrom, 
            dataPoints: from
        },
        {
            type: "spline",  
            showInLegend: true,
            legendText: "From "+legendTo, 
            dataPoints: to
        }
    ],
    legend: {
        cursor: "pointer",
        itemclick: function (e) {
            if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                e.dataSeries.visible = false;
            } else {
                e.dataSeries.visible = true;
        }
        chart.render();
        }
    }
});

chart.render();
var adverts = new CanvasJS.Chart("adverts",
{
    animationEnabled: true,
    zoomEnabled: true,
    title:{
        text: placeholder
    },
    data: [
        {
            type: "column",  //change type to bar, line, area, pie, etc
            showInLegend: true,
            legendText: "From "+legendFrom, 
            dataPoints: advertFrom
        },
        {
            type: "column",  
            showInLegend: true,
            legendText: "From "+legendTo, 
            dataPoints: advertTo
        }
    ]
});
adverts.render();
}

Answer 1

I just replicated a canvasJS enviroment in JSFiddle http://jsfiddle.net/fLbngdv9/1/

Make sure you are are using a new VAR for each chart.

var chart = new CanvasJS.Chart("chartContainer", {..});
chart.render();
var chart2 = new CanvasJS.Chart("chartContainer2", {..});
chart2.render();

Seems to work fine. If you can provide me with some code examples then perhaps I can help you find an answer.

Probably just a copy paste mistake but you have a syntax error at the very bottom.

...
adverts.render();
}

This should be

...
adverts.render();

Just remove the extra bracket. I updated the JS Fiddle to be more like your example... [here]

Edit:

I was able to replicate in my latest JSFiddle and I know this sounds crazy but when I changed the ID of your second div from adverts to chartContainer2 it worked fine.

Still investigating as to why this is but I would try renaming the ID on the div and also the reference for the graphs creation.

SEE HERE

Edit 2:

This appears to be a Chrome specific bug with the ID adverts. To replicate all you need to do is check out this link http://www.briangebel.com/test.html

(As you can see the div Adverts is hidden in Chrome but visible on FF,Opera,IE)

So what is happening..

1. Chrome's ADBlocker extension sees this ID and automatically adds an in page stylesheet.
2. This style sheet has the following Style

3. This only affects Chrome as it is caused by a specific extension. (I am attempting to contact the developer to see if he can resolve this but until then follow the below solution)

Solution

Simple don't use that ID. (You could simply disable AdBlocker but this extension is so widely used I would still recommend changing the ID)