Map Bootstrap Modal + Morris.js

Question

I'm having trouble getting the morris.js chart to display correctly in the bootstragg. Not only is the calibration turned off, but the chart does not draw. I searched around and still can't find a solution that works for me. Can anyone help?

Change Figured out the size of the question, but he still doesn't draw a graph. Thanks!

Modal markup:

<div class="modal fade" id="clusterpulse" tabindex="-1" role="dialog" aria-labelledby="clusterpulse" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModalLabel">Pulse</h4> </div> <div class="modal-body"> <div class="col-lg-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"><i class="fa fa-long-arrow-right"></i>Versions by Environment</h3> </div> <div class="panel-body"> <div id="morris-chart-versions"></div> </div><!-- /.panel-body --> </div><!-- /.panel-primary --> </div><!-- /.col-lg-4 --> </div><!-- /.modal-body --> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div> <!-- /.modal --> 

JS:

 <script> $(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"); }); }); </script> 

Here is what it looks like:

Change I figured out the size question. It was "col-lg-4" in my markup. Left him there from another chart on the main page. Now it looks like this:

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

Answer 1

Here is the js that ended up letting me put the chart in modal and redraw on click.

 <script> $('#clusterpulse').on('shown.bs.modal', function () { //listen for user to open modal $(function () { $( "#morris-chart-versions" ).empty(); //clear chart so it doesn't create multiple if multiple clicks // 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 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"); }); }); }); </script> 

Answer 2

I see your problem. As you shape your data, diagrams cannot understand this.

Here is an example of what I used:

  var data = []; var mult = 200; for(var i = 0; i < 40; i++){ data.push({y: 1300+(i*mult), value: 30*i}); } 

These are my parameters for the chart.

  Morris.Line({ // ID of the element in which to draw the chart. element: 'linechart', // Chart data records -- each entry in this array corresponds to a point on // the chart. data: data, // The name of the data record attribute that contains x-visitss. xkey: 'y', // A list of names of data record attributes that contain y-visitss. ykeys: ['value'], // Labels for the ykeys -- will be displayed when you hover over the // chart. labels: ['y'], // Disables line smoothing smooth: false, parseTime: false, }); 

What I did to redraw the tabs because redrawing didn't work:

  $('ul.nav a').on('shown.bs.tab', function(e){ // this ain't pretty, but you should get the idea if ($(e.target).attr('href') == '#AMD' && $('#line2').html().length == 0) { Morris.Area({ element: 'line2', data: chartdata, xkey: 'd', ykeys: ['visits'], labels: ['USD'], // Disables line smoothing smooth: false, }); $(document).scrollTop( $("#myTab").offset().top ); } if ($(e.target).attr('href') == '#TTWO' && $('#line3').html().length == 0) { Morris.Area({ element: 'line3', data: data, xkey: 'd', ykeys: ['visits'], labels: ['USD'], smooth: false, }); $(document).scrollTop( $("#myTab").offset().top ); } }); 

This is an old version of the code, but you should get this idea. The key part is here:

  $('ul.nav a').on('shown.bs.tab', function(e){ if ($(e.target).attr('href') == 

which, I think, can be applied to modules

Answer 3

You can postpone drawing the graph. The method that gave me the solution.

 setTimeout( function(){ Morris.Area({...}) },1200); 

You can change 1200 according to your schedule and data set.