jQWidgets Forums

jQuery UI Widgets › Forums › Chart › Char from datebase

Tagged: , , , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 9 years, 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Char from datebase Posts
  • February 3, 2016 at 10:55 am Char from datebase #81068

    neerajkmr
    Participant

    Dear Sir,
    Wanted to make a bar –diagram complaint chart. Input will be from and to date. Output should be bar diagram of different types of problem ( x-axis) and number in y –axis.

    I tried this code as given below..

    index.php

    <html lang=”en”>
    <head>
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”../../scripts/jquery-1.10.2.min.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxchart.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxdraw.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘complain_date’, type: ‘date’},
    { name: ‘total_complain’},
    { name: ‘typeofproblem’}
    ],
    url: ‘electricaldata.php’
    };

    var dataAdapter = new $.jqx.dataAdapter(source,
    {
    autoBind: true,
    async: false,
    downloadComplete: function () { },
    loadComplete: function () { },
    loadError: function () { }
    });

    // prepare jqxChart settings
    var settings = {
    title: “Electrical Complain Register Chart”,
    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,
    valuesOnTicks: false,
    dataField: ‘complain_date’,
    //dataField: ‘typeofproblem’,
    type: ‘date’,
    baseUnit: ‘month’,
    formatFunction: function (value) {
    return $.jqx.dataFormat.formatdate(value, ‘dd/MM/yyyy’);
    },
    showTickMarks: true
    },

    colorScheme: ‘scheme05’,
    seriesGroups:
    [
    {
    type: ‘line’,
    columnsGapPercent: 25,
    seriesGapPercent: 10,
    columnsMaxWidth: 50,
    valueAxis:
    {
    displayValueAxis: true,
    description: ‘Total_complain’,
    axisSize: ‘auto’,
    tickMarksColor: ‘#888888’,
    unitInterval: 9,
    minValue: 0,
    maxValue: 50
    },
    series: [
    { dataField: ‘total_complain’, displayText: ‘ Total_Complain’ },
    { dataField: ‘typeofproblem’, displayText: ‘ typeofproblem’ },
    { dataField: ‘complain_date’, displayText: ‘ complain_date’ }
    ]
    }
    ]
    };
    // setup the chart
    $(‘#jqxChart’).jqxChart(settings);
    });
    </script>

    <!– for tab or menubar css–>
    <style type=”text/css”>
    #tabContainer {
    padding: 3px 15px 0 15px;
    background: #67A897;
    width: 50%;
    }

    ul#topTab {
    list-style-type: none;

    position: relative;
    height: 27px;
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    padding: 11px 0 0 0;
    }

    ul#topTab li {
    display: block;
    float: left;
    margin: 0 0 0 4px;
    height: 27px;

    }

    ul#topTab li.left {
    margin: 0;
    }

    ul#topTab li a {
    display: block;
    float: left;
    color: #fff;
    background: #4A6867;
    line-height: 27px;
    text-decoration: none;
    padding: 0 17px 0 18px;
    height: 27px;
    }

    ul#topTab li a.right {
    padding-right: 19px;
    }

    ul#topTab li a:hover {
    background: #2E4560;
    }

    ul#topTab li a.current {
    color: #2E4560;
    background: #fff;
    }

    ul#topTab li a.current:hover {
    color: #2E4560;
    background: #fff;
    }
    </style>
    <!– end tab css –>

    </head>
    <center>
    <body>

    <div id=”tabContainer”>
    <ul id=”topTab”>

    </div>

    </body>

    <body class=’default’>
    <form action=”electricaldata.php” method=”post” Onclick=”return check(this.form);”>
    <input type=”text” name=”fromdate”>
    <input type=”text” name=”enddate”>
    <input type=”submit” Onclick=”return check(this.form);”>
    </form>
    <div style=”width:970px; height:500px” id=”jqxChart”></div>

    </body>
    </center>
    </html>

    data.php

    <?php
    // Include the connect.php file
    include (‘connect1.php’);
    //$fromdate = $_POST[‘fromdate’]; //textbox name
    //$enddate=$_POST[‘enddate’];
    // Connect to the database
    // connection String
    $mysqli = new mysqli($hostname, $username, $password, $database);
    /* check connection */
    if (mysqli_connect_errno())
    {
    printf(“Connect failed: %s\n”, mysqli_connect_error());
    exit();
    }
    // get data and store in a json array
    $from = 0;
    $to = 100;
    //$query = “SELECT complain_date, typeofproblem, total_complain FROM complain_register2 where complain_date BETWEEN ‘$fromdate’ AND ‘$enddate’ and typeofproblem=’electrical’ group by complain_date LIMIT ?, ?”;
    $query = “SELECT complain_date, typeofproblem, total_complain FROM complain_register2 where complain_date BETWEEN ‘2015-06-01’ AND ‘2016-01-20′ and typeofproblem=’electrical’ group by complain_date LIMIT ?, ?”;

    $result = $mysqli->prepare($query);
    $result->bind_param(‘ii’, $from, $to);
    $result->execute();
    /* bind result variables */
    $result->bind_result($complain_date, $typeofproblem, $total_complain);
    /* fetch values */
    while ($result->fetch())
    {
    $orders[] = array(
    ‘complain_date’ => $complain_date,
    ‘typeofproblem’ => $typeofproblem,
    ‘total_complain’ => $total_complain
    );
    }
    echo json_encode($orders);
    /* close statement */
    $result->close();
    /* close connection */
    $mysqli->close();
    ?>
    so plz help me,

    Thanks & Regard,
    Neeraj kumar
    8100056902

    February 3, 2016 at 2:25 pm Char from datebase #81081

    Hristo
    Participant

    Hello Neeraj kumar,

    Initialization of the Chart looks ok.
    Please provide us json file of data that expect to receive from the server.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.