jQuery UI Widgets Forums Chart [PIE CHART] with PHP/MySQL — Problem display chart

This topic contains 5 replies, has 2 voices, and was last updated by  Dimitar 8 years, 4 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • coco
    Participant

    Hello,
    I work on the code below but I’am blocked.
    I work with a Database “MySQL” and my Website is in PHP language.
    I try to create a Chart with your code.
    And follow my code.

    I have a script : graph_table.php
    #Connection DataBase
    include(‘/database/bdd.php’);
    #Get date Start and Stop
    $date_start = $_GET[‘date_start’];
    $date_stop = $_GET[‘date_stop’];

    //Changement date –> FRANCE to ENGLISH
    $date_start_EN = date_format(date_create_from_format(‘d/m/Y’, $date_start), ‘Y-m-d’);
    $date_stop_EN = date_format(date_create_from_format(‘d/m/Y’, $date_stop), ‘Y-m-d’);

    //SQL request which is count the request status between Start date and Stop date
    $sql = “SELECT stat,COUNT(stat) AS nbStat FROM <table> WHERE date BETWEEN ‘$date_start_EN’ AND ‘$date_stop_EN’ GROUP BY stat”;
    $result_nbStat = mysql_query($sql) or die(“SQL Error 1: ” . mysql_error());;

    ?>
    <script type=”text/javascript”>
    // prepare chart data as an array
    <?php
    echo(“var source = [];”);
    while ($row = mysql_fetch_array($result_nbStatutRequest))
    {
    $stat = $row[‘stat’];
    $nbStat = $row[‘nbStat’];

    echo(“source.push(\”$stat, $nbStat; \”);\n”);
    }
    ?>

    var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } });

    // prepare jqxChart settings
    var settings =
    {
    title: “”,
    description: “”,
    enableAnimations: true,
    showLegend: true,
    showBorderLine: true,
    legendPosition: { left: 520, top: 140, width: 200, height: 100 },
    // legendLayout : { right: 50, top: 40, width:100, height: 100, flow: ‘vertical’ },
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
    source: dataAdapter,
    colorScheme: ‘scheme01’,
    seriesGroups:
    [
    {
    type: ‘pie’,
    showLabels: true,
    series:
    [
    {
    enableAnimations: true,
    //dataField: ‘Value’,
    //displayText: ‘Status’,
    labelRadius: 120,
    initialAngle: 15,
    radius: 70,
    centerOffset: 0,

    }
    ]
    }
    ]
    };

    </script>

    And my WebSite page :

    include (“graph_test.php”);

    var myChart = $(‘#chartContainer’).jqxChart(settings);
    // add a new color scheme named ‘myScheme’
    myChart.jqxChart(‘addColorScheme’, ‘myScheme’, [‘#459AFE’, ‘#DC5551’, ‘#C0C0C0’]);
    // apply the new scheme by setting the chart’s colorScheme property
    myChart.jqxChart(‘colorScheme’, ‘myScheme’);
    // refresh the chart
    myChart.jqxChart(‘refresh’);

    On the Browser, I have a Legend with this information :

    ” Clos, 107; Mal, 1; Re, 9; Wai, 1; Waiut, 4; ”

    But not the PIE Chart and I don’t found the error on the code.

    I see the page for PHP MySQL :
    http://www.jqwidgets.com/jquery-widgets-demo/demos/php/index.htm?%28arctic%29#demos/php/chart.htm

    But same error.

    Is it possible to check if you seen an error on my code.

    Thanks In advance for your feedback.
    Regards.
    Coco


    Dimitar
    Participant

    Hello Coco,

    You need to set the dataField of your series (it is commented in your code). If this does not help solve the issue, please share some sample data so that we may test your code locally.

    Best Regards,
    Dimitar

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


    coco
    Participant

    Hello,

    Thanks for your feedback.
    Yes, Datafield is commented but if I de-commented the “DataField” parameters, I have the same result on my browser. I think the problem does not provided

    Thanks in advance.
    Regards
    Coco


    Dimitar
    Participant

    Hi Coco,

    Please share some sample data so that we may test your code locally and determine what causes the issue.

    Best Regards,
    Dimitar

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


    coco
    Participant

    Hello,

    This is more complicated to give you a Data because my data source is extracted by the SQL request.
    But an overview about the data :
    Clos 107
    Malf 1
    Reject 9
    Waiting 1
    Waiting Input 4

    Thanks in advance.
    Regards and Happy New year.
    Coco


    Dimitar
    Participant

    Hi Coco,

    Here is a working example with your data and chart settings:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var data = [{ "Status": "Clos", "Value": 107 }, { "Status": "Malf", "Value": 1 }, { "Status": "Reject", "Value": 9 }, { "Status": "Waiting", "Value": 1 }, { "Waiting Input": 4}];
    
                // prepare chart data as an array
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'Status' },
                        { name: 'Value' }
                    ],
                    localdata: data
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
    
                // prepare jqxChart settings
                var settings = {
                    title: "",
                    description: "",
                    enableAnimations: true,
                    showLegend: true,
                    showBorderLine: true,
                    legendPosition: {
                        left: 520,
                        top: 140,
                        width: 200,
                        height: 100
                    },
                    // legendLayout : { right: 50, top: 40, width:100, height: 100, flow: 'vertical' },
                    padding: {
                        left: 5,
                        top: 5,
                        right: 5,
                        bottom: 5
                    },
                    titlePadding: {
                        left: 0,
                        top: 0,
                        right: 0,
                        bottom: 10
                    },
                    source: dataAdapter,
                    colorScheme: 'scheme01',
                    seriesGroups: [{
                        type: 'pie',
                        showLabels: true,
                        series: [{
                            enableAnimations: true,
                            dataField: 'Value',
                            displayText: 'Status',
                            labelRadius: 120,
                            initialAngle: 15,
                            radius: 70,
                            centerOffset: 0
                        }]
                    }]
                };
    
                // setup the chart
                $('#chartContainer').jqxChart(settings);
            });
        </script>
    </head>
    <body class='default'>
        <div id='chartContainer' style="width: 850px; height: 500px;">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.