I am using Twitter Bootstrap AngularJS to build a web app. In the modal window, I like to show a JQuery Flot real time chart, similar to this: http://people.iola.dk/olau/flot/examples/realtime.html
I copied the code from http://people.iola.dk/olau/flot/examples/realtime.html and put it in a file, called flot2.html, on my server. It works. I specify only the height, and it automatically sets width to be 100%
However, when I put the code into my template (index.html) file, and into a modal window, there are two problems. It gives me this error below unless I specify the width:
Invalid dimensions for plot, width = 0, height = 300
I set width=100%, but it looks like it shows only 100px.
Also, the labels for the Y-axis are over top the left edge/border of the grid, instead of a few pixels to the left of it.
Here is the code:
In index.app.html :
<!DOCTYPE HTML>
<html ng-app="app">
...
<body ng-controller="AppCtrl">
...
<div class="container">
<div ng-view></div>
</div>
...
<script src="/js/jquery.min.js">
In the template (index.html) :
...
<!-- Modal window -->
<div class="modal fade hide" id="chartModal">
...
<style>
display:block!important;
</style>
<script src="/js/jquery.flot.min.js"></script>
<script src="/js/flot/flot.demo.js"></script> <!-- I copied the Javascript code from http://people.iola.dk/olau/flot/examples/realtime.html and put it here -->
<div id="placeholder" style="width:100%; height:300px; display:block"></div>
In bootstrap.css :
...
.hide {
display: none;
}
I noticed that when I remove "hide" from:
<div class="modal fade hide" id="chartModal">
my two problems go away and the chart appears fine. But removing "hide" causes other problems on the site, and so I cannot remove it. Hence, I added this code (as you can see above):
<style>
display:block!important;
</style>
But, it does not do anything. I have tried almost every option for display, such as display:auto, display:inline, display:table, etc., but none of them work.
Can anybody suggest a solution?
You have to specify the width.
As per the flot documentation
You need to set the width and height of this div, otherwise the plot library doesn't know how to scale the graph. You can do it inline like this:
<div id="placeholder" style="width:600px;height:300px"></div>
CSS rules are tricky. Try directly referencing the element in your CSS and make sure your CSS is after the bootstrap include.
so
#chartModal { display:block; }
Should work and if need be put in the !important. I prefer not referencing ids in CSS but sometimes it gets you to the endgame quicker.