How To generate Dynamic jqplot PLOT CHART using a value from Datatable cell.??

I am writing a code for displaying student Details in JQUERY MOBILE

my code should work like
1st page contains list of students
[ when user selects some students and clicks on a button, which goes to second page]
2nd page contains only selected students listview.
[ when user clicks on a students name from that list view, controle goes to 3rd page with with that value=(studentName)]
3rd page will contains that students marks in several subjects IN datatable.(as bellow)

and bellow it we have to display a plot chart (like given bellow)

Now my problem is iam doing 99% well but i am unable to diplay chart.
actually i written code for plot chart but it is not doing well..

please help me in displaying chart with dynamic values.

(student marks should be given to chart code along with student name.)

here iam pasting my code. please tell me my mistakes and suggest me right code.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link rel="stylesheet" href="stylesheets/jquery.mobile-1.1.1.min.css" />
<link href="stylesheets/jquery.jqplot.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="stylesheets/CssForMobileApp.css" />
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/_assets/css/jqm-docs.css">
<style type="text/css">
.myChart {
width: 300px;
height: 200px;
}
</style>
<script src="http://jquerymobile.com/test/docs/_assets/js/jqm-docs.js"></script>
<style type="text/css" title="currentStyle">
@import "stylesheets/media/css/demo_page.css";
@import "stylesheets/media/css/header.ccss";
@import "stylesheets/media/css/demo_table.css";
img{
box-shadow:2px 2px 5px #ccc;
border:2px solid #fff;
float:left;
}
p{
margin:0px;
padding:5px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:14px;
float:left;
line-height:100px;
padding-left:5px;
}
</style>
<script type="text/javascript" src="libraries/jquery-1.8.2.min.js"> </script>
<script type="text/javascript" src="libraries/jquery.dataTables.min.js"> </script>
<script src="libraries/jquery.mobile-1.2.0.min.js"></script>
<script src="libraries/JavaScriptForMobileApp.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit",function() {
$.mobile.ajaxEnabled = false;
// go to server for chart data
$('#DataTablePage').live('pageshow',function() {
$.get("mygraphdata", function(data){
$.jqplot('plotChart', data,{ title:'myChart',
axesDefaults: { labelRenderer: $.jqplot.CanvasAxisLabelRenderer},
axes:
{
xaxis: { label:"Days", pad: 0 },
yaxis: { label: "Likes", pad: 0 }
}
});
});
return false;
});
});
$(document).on("click", ".show-page-loading-msg", function() {
var $this = $( this ),
theme = $this.jqmData("theme") || $.mobile.loader.prototype.options.theme,
msgText = $this.jqmData("msgtext") || $.mobile.loader.prototype.options.text,
textVisible = $this.jqmData("textvisible") || $.mobile.loader.prototype.options.textVisible,
textonly = !!$this.jqmData("textonly");
html = $this.jqmData("html") || "";
$.mobile.loading( 'show', {
text: msgText,
textVisible: textVisible,
theme: theme,
textonly: textonly,
html: html
});
})
.on("click", ".hide-page-loading-msg", function() {
$.mobile.loading( 'hide' );
});
$(document).bind("mobileinit", function () {
$('#displayStudentDetails').dataTable({
"aoColumns": [
{ "mData": "Name" },
{ "mData": "Marks" }
]
});
$.mobile.ajaxEnabled = false;
});
function showSelectedStudentList()
{
//$.("#IdofSelectedStudentsList").listView.show();
$.ajax({
type: "POST",
url: "ShowSelectedStudentsList.php",
data: $("#StudentListForm").serialize(),
async: true,
beforeSend: function (theForm) {
if(theForm && theForm.overrideMimeType) {
theForm.overrideMimeType("application/json;charset=UTF-8");
}
},
dataType: "json",
success: function (data)
{
//alert(data.length);
var html ='';
$.each(data,function(index, item) { html += '<li title="' + item+ '" onclick="showStudentDetails(this.title)"><a href="#DataTablePage">' + item+ '</a></li>';});
$('#ul_id').append($(html));
$('#ul_id').trigger('create');
$('#ul_id').listview('refresh');
},
error: function (jqXHR, textStatus, errorThrown)
{
alert(jqXHR.textStatus);
alert(jqXHR.responseText);
alert(jqXHR.status);
alert(errorThrown);
}
});
}
function showStudentDetails(SelectedStudent)
{
//alert("control came to function");
//alert(SelectedStudent);
$('#displayStudentDetails').dataTable().fnClearTable();
$.ajax({
type: "POST",
url: "FetchStudentDetails.php",
//data: $("#StudentListForm").serialize(),
data: "SelectedStudent=" + SelectedStudent,
async: true,
beforeSend: function (theForm) {
if(theForm && theForm.overrideMimeType) {
theForm.overrideMimeType("application/json;charset=UTF-8");
}
},
dataType: "json",
success: function (data)
{
//alert("data recieved successfully");
//alert(data);
for (var i=0; i < data.length; i++)
{
$('#displayStudentDetails').dataTable().fnAddData([data[i][0].Name,data[i][0].Marks]);
}
},
error: function (jqXHR, textStatus, errorThrown)
{
alert(jqXHR.textStatus);
alert(jqXHR.responseText);
alert(jqXHR.status);
alert(errorThrown);
}
});
}
</script>
</head>
<body>
<div data-role="page" id="ShowStudentListPage">
<div id="header" data-theme="b" data-role="header">
<h3>
Student Info
</h3>
</div>
<div data-role="content" data-theme="a" data-mini="true">
<?php
include ('MobileAppClasses.php');
$TIMEZONE="Asia/Calcutta";
if(function_exists('date_default_timezone_set')){
date_default_timezone_set($TIMEZONE);
}
$ObjuctForDbConnection = new DbConnection();
$ObjuctForDbConnection -> connectDb('myHost','root','');
// Write out our query.
$query = "SELECT Name FROM Student_master order by Name asc";
// Execute it, or return the error message if there's a problem.
$result = mysql_query($query) or die(mysql_error());
//html code start in php
echo "<legend>Select Student(s):</legend>";
$ObjectForCheckBoxList = new CheckBoxList();
echo $ObjectForCheckBoxList->StudentListSubmit($result);
?>
</div>
<div type="range"></div>
</div>
<div data-role="page" id="SelectedStudentListPage" onload="showSelectedStudentList()">
<div id="header" data-theme="b" data-role="header">
<h3>
Student Info
</h3>
</div>
<div data-role="content" data-theme="f" data-mini="true">
<div class="content-primary">
<form name='form1' method='post'>
<ul data-role="listview" class="ui-listview" id="ul_id"></ul>
</form>
</div>
</div>
</div>
<div data-role="page" id="DataTablePage" onload="showStudentDetails()" data-rockncoder-jspage="managePlotChart">
<div id="header" data-theme="a" data-role="header">
<a href="index.php" data-theme="e" data-direction="reverse" class="ui-btn-left">Home</a>
<h1>
Student Info
</h1>
</div>
<div data-role="content" data-theme="b" data-mini="true">
<div>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="displayStudentDetails">
<thead>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div>
<br>
<br>
<section data-role="content">
<div id="plotChart" class="myChart" style="position: relative;"></div>
</section>
</div>
</div>
<div type="range"></div>
</div>
<script src="libraries/scripts/jquery.jqplot.min.js" type="text/javascript"></script>
<script src="libraries/scripts/jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script>
<script src="libraries/scripts/underscore-min.js" type="text/javascript"></script>
<script src="libraries/scripts/hideAddressBar.js" type="text/javascript"></script>
<script src="libraries/scripts/app.js" type="text/javascript"></script>
</body>
</html>

Actually i copied the chart code from http://therockncoder.blogspot.in/2012/05/jquery-mobile-charts.html

ThnQ in Advance.

- Satyam Gaddamanugu
94-94-522-512

Topic Participants
satyam.gaddamanugu

How To generate Dynamic jqplot PLOT CHART using a value from Datatable cell.??

How To generate Dynamic jqplot PLOT CHART using a value from Datatable cell.??

Topic Participants

satyam.gaddamanugu