How to use jqplot charts in a jquery mobile web app
Question
I want to create charts in jQuery mobile web app. I am using jqPlot charts but I am unable to create charts. I am using the following code:
<html>
<head>
<script type="text/javascript" src="@Url.Content("~/Scripts/app/jquery.mobile-1.0b2.min.js")"></script>
<script type="text/javascript"src="@Url.Content("~/Scripts/jquery.jqplot.min.js")"></script>
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/jquery.jqplot.min.css" )"/>
<link rel="stylesheet" href="@Url.Content("~/Content/jquery.mobile-1.0b2.css")" />
<link rel="stylesheet" href="@Url.Content("~/Content/jquery.mobile-1.0b2.min.css")" />
<script type="text/javascript">
$('#index').live('pageinit', function (event) {
alert("jqplotchart");
$.jqplot('container', [[[1, 2], [3, 5.12], [5, 13.1], [7, 33.6], [9, 85.9], [11, 219.9]]]);
});
</script>
</head>
<body>
<div id="index" data-role="page">
<div id="container" style="height: 400px; min-width: 600px">
</div>
</div>
</body>
</html>
To check the jQuery I also added an alert in the function but it is not showing the alert also. Maybe because I am using the pageinit() event in the wrong way? Please suggest me how to use the pageinit() event or do I need to use other events to create the charts?
2 answers
solution1
0 2012-10-17 10:10:01
This probably doesn't need an answer any more, but if I'd seen the question a few days ago I'd have found the answer useful.
There are two problems:
- You need to include 'jquery.mobile-xxxmin.js' before you include the jquery mobile javascript.
- jqPlot doesn't like 'pageinit'. You need to use 'pageshow' instead.
solution2
0 2014-09-10 08:10:26
There is an easier way (worked in my case):
- first: delare your plot container div outside of any page (for example just below body tag):
<body>
<div id="plotContainer"></div>
...
- then: set the plot (Chart) in your $(document).ready(function(){ ... here ... }); and hide it so it will not show between pages:
$("#jqxChart").jqxChart(settings);
$("#jqxChart").hide();
- finaly: just copy the div with the plot inside your page:
<script>
$('#page_ID').bind('pageshow', function(data) {
$("#jqxChart").appendTo("#ID_of_DIV_you_want");
$("#jqxChart").show();
$('#jqxChart').jqxChart('refresh');
});
</script>
Hope this helps!!!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.