This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 9 years, 5 months ago.
-
I am was trying to import jqwidgets in my line charts. I just want to show the no. of users completed, inprocess and notstarted the course during the last 4 weeks. Could jqwidgets help me with the technically with the code below and the output line chart given. Could appreciate your help. Thanks in advance.
line chart
jchart.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>jqxChart Line Series Example</title>
<link rel=”stylesheet” href=”widget/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”widget/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”widget/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”widget/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”widget/jqwidgets/jqxchart.core.js”></script>
<script type=”text/javascript” src=”widget/jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript”>
$(document).ready(function ()
{
// prepare the data
var theme = ‘classic’;var source =
{
datatype: “json”,
datafields: [
{ name: ‘dat’, type: ‘date’},
{ name: ‘userid’},
{ name: ‘course’},
{ name: ‘completed’},
{ name: ‘inprogress’},
{ name: ‘inprogress’},
{ name: ‘notstarted’}],
url: ‘jchart1.php’
};var dataAdapter = new $.jqx.dataAdapter(source,
{
autoBind: true,
async: false,
downloadComplete: function () { },
loadComplete: function () { },
loadError: function () { }
});// prepare jqxChart settings
var settings = {
title: “No. of students”,
showLegend: true,
padding: { left: 5, top: 5, right: 50, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
xAxis:
{
text: ‘Category Axis’,
textRotationAngle: 0,
dataField: ‘userid’,
type: ‘date’,
baseUnit: ‘month’,
formatFunction: function (value) {
return $.jqx.dataFormat.formatdate(value, ‘dd/MM/yyyy’);
},
showTickMarks: true
},
colorScheme: ‘scheme05’,
seriesGroups:
[
{
type: ‘line’,
valueAxis:
{
displayValueAxis: true,
description: ‘No. of students’,
axisSize: ‘auto’,
tickMarksColor: ‘#888888’,
unitInterval: 20,
minValue: 0,
maxValue: 100
},
series: [
{ dataField: ‘dat’, displayText: ‘Weeks’ }
]
}
]
};// setup the chart
$(‘#jqxChart’).jqxChart(settings);
});
</script>
</head>
<body class=’default’>
<div style=”width:690px; height:400px” id=”jqxChart”></div>
</body>
</html>jchart1.php
<?php
#Include the connect.php file
include(‘connect.php’);
#Connect to the database
//connection String
$connect = mysql_connect($hostname, $username, $password)
or die(‘Could not connect: ‘ . mysql_error());
//Select The database
$bool = mysql_select_db($database, $connect);
if ($bool === False){
print “can’t find $database”;
}/* Note: for security purposes we recommend you to use stored procedures.
* The plain SQL code here is provided for simplicity.
*/
$query = “SELECT cms.course, cc.userid, COUNT(distinct cms.id), COUNT(distinctcc.id), DATE_FORMAT(FROM_UNIXTIME(cc.timemodified),’%d-%m-%Y’) AS
‘dat’,
(CASE WHEN COUNT(distinct cc.id) = COUNT(distinct cms.id) THEN 1 ELSE 0 END) AS ‘completed’,
(CASE WHEN COUNT(distinct cc.id) > 0 AND COUNT(distinct cc.id) != COUNT(distinct cms.id) THEN 2 ELSE 0 END) AS ‘inprogress’,
(CASE WHEN COUNT(distinct cc.id) = 0 THEN 3 ELSE 0 END) AS ‘notstarted’
FROM course_completions AS cc
INNER JOIN course_modules AS cm ON cc.coursemodid = cm.id
INNER JOIN course_mod_settings AS cms cm.course = cms.course
WHERE cc.state = 1
GROUP BY cm.course, cc.userid”;$result = mysql_query($query) or die(“SQL Error 1: ” . mysql_error());
// get data and store in a json array
while ($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
$orders[] = array(
‘course’ => $row[‘course’],
‘userid’ => $row[‘userid’],
‘completed’ => $row[‘completed’],
‘inprogress’ => $row[‘inprogress’],
‘notstarted’ => $row[‘notstarted’],
‘dat’ => $row[‘date’] );
}echo json_encode($orders);
?>
You must be logged in to reply to this topic.