I have a weird problem. I have create a bar chart using d3js that works good in a raw html file. Then I embedded the latter into a jquery mobile small app. The problem is that my bar chart goes nuts. First it does not animate no more, and second, all my bars have the same height although the latter is assigned according to the data value bound to the bar.
My code runs perfectly if I put it in a separate html file with nothing but d3js.
here is my code:
CSS
#report{
overflow: hidden;
}
div.d3bar {
display: inline-block;
width: 20px;
height: 75px; /* We'll override this later */
background-color: teal;
margin: 2px;
}
JS
function init(){
document.addEventListener("deviceready", onDeviceReady, false);
$(document).ready(function(){
$("a").click(function (e) {
e.stopImmediatePropagation();
e.preventDefault();
$.mobile.changePage($($(this).attr("href")), { transition: "slide"});
});
});
}
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/XXXX.min.css">
<link rel="stylesheet" href="css/jquery.mobile.structure-1.2.0.min.css">
<link rel="stylesheet" href="css/app.css">
<script type="text/javascript" charset="utf-8" src="js/cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/app.js"></script>
<script type="text/javascript" charset="utf-8" src="js/d3.v2.min.js"></script>
<title>Lotterie Nationale Loterij</title>
</head>
<body onload="init();">
<!-- Start of first page: #one -->
<div data-role="page" id="home" data-theme="a">
<div data-role="header"><h1>XXXXX Header</h1></div>
<div data-role="content" >
<p><a id="btn_dashboard" href="#page_dashboard" data-role="button">Dashboard</a></p>
<p><a id="btn_pos360" href="#page_pos360" data-role="button">POS 360°</a></p>
<p><a id="btn_My_Activities" href="#page_My_Activities" data-role="button">My Activities</a></p>
<p><a id="btn_about" href="#page_about" data-role="button" data-rel="dialog" data-transition="pop">About</a></p>
</div><!-- /content -->
<div data-role="footer" data-theme="a">
<h4>Computer Sciences Corporation</h4>
</div><!-- /footer -->
</div><!-- /page one -->
<div data-role="page" id="page_dashboard" data-theme="a">
<div data-role="header"><a href="#home" data-icon="Home">Home</a> <h1>Your Dashboard</h1></div>
<div data-role="content" id="report">
<script type="text/javascript">
$("#page_dashboard").live("pageshow",
function (event) {
$("#report").empty();
var dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19,
14, 11, 22, 29, 11, 13, 12, 17, 18, 10,
24, 18, 25, 9, 3 ];
d3.select("#report").selectAll("p")
.data(dataset)
.enter()
.append("div")
.transition()
.ease("linear")
.attr("class", "d3bar")
.duration(400)
.style("height", function(d){
return 10*d;
})
.text(function(d){return d;});;
$("#report").trigger("create");
}
);
</script>
Some statistics here and there
</div><!-- /content -->
</div>
<div data-role="page" id="page_pos360" data-theme="a">
<div data-role="header"><a href="#home" data-icon="Home">Home</a> <h1>Point Of Sales 360°</h1></div>
<div data-role="content" >
Some pos charts here and there
</div><!-- /content -->
</div>
<div data-role="page" id="page_My_Activities" data-theme="a">
<div data-role="header"><a href="#home" data-icon="Home">Home</a> <h1>My Activities</h1></div>
<div data-role="content" >
Some activities
</div><!-- /content -->
</div>
<div data-role="page" id="page_about" data-theme="a">
<div data-role="header"><a href="#home" data-icon="Home">Home</a> <h1>About XXXX Prototype</h1></div>
<div data-role="content" >
Prototype for XXXXX --
Computer Sciences Corporation
</div><!-- /content -->
<!--<div data-role="footer" data-theme="a">
<h4>The End</h4>
</div> /footer -->
</div><!-- /page one -->
</body>
</html>
Anybody sees the problem?
Solved as follow: