bootstrap chart ajax,jquery - Bootstrap Modal + Morris.js Chart - Stack Overflow

I'm having some problems getting a morris.js chart to show up in a bootstrap modal correctly. Not only is the sizing off but the chart doesn't draw. I have searched around and so far can't find a solution that works for me. Can anyone help?

Edit: Figured out the sizing issue, but it's still not drawing the graph. Thanks!

Modal Markup:

×

Pulse

Versions by Environment

JS:

$(function () {

// Create a Bar Chart with Morris

var chart = Morris.Bar({

element: 'morris-chart-versions',

data: [0, 0], // Set initial data (ideally you would provide an array of default data)

xkey: 'd', // Set the key for X-axis

ykeys: ['test1','test2','test3'], // Set the key for Y-axis

labels: ['test1','test2','test3'], // Set the label when bar is rolled over

resize: true

stacked: true

});

// Fire off an AJAX request to load the data

$.ajax({

type: "GET",

dataType: 'json',

url: "../scripts/all_versions.php", // This is the URL to the API

})

.done(function (data) {

// When the response to the AJAX request comes back render the chart with new data

chart.setData(data);

})

.fail(function () {

// If there is no communication between the server, show an error

alert("error occured");

});

});

This is what it ends up looking like:

Edit: I figured out the sizing issue. It was the 'col-lg-4' in my markup. Left it in there from another graph on the main page. Now it looks like this:

Edit2: And when I removed the 'resize: true' from the js.