jQuery UI Widgets Forums Chart Line Charts with 3 datafields

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 8 years, 8 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Line Charts with 3 datafields #74838

    wingardium
    Participant

    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
    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);
    ?>

    Line Charts with 3 datafields #74868

    Dimitar
    Participant

    Hello wingardium,

    You need to add an object to the series array for each line you would like to be plotted. Please take a look at the demo Line Series which shows two line series simultaneously.

    If you wish, you can provide us with some sample JSON data retrieved from your service and we can help you set the chart up. We cannot assist you with your server-side code (jchart1.php), though.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.