[PIE CHART] with PHP/MySQL -- Problem display chart - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: [PIE CHART] with PHP/MySQL -- Problem display, Angular chart, chart, datafield, jquery chart, jqxChart, php, pie, Pie chart, series

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

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

Author

[PIE CHART] with PHP/MySQL — Problem display chart Posts
December 29, 2015 at 5:19 pm [PIE CHART] with PHP/MySQL — Problem display chart #79879

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

December 30, 2015 at 8:36 am [PIE CHART] with PHP/MySQL — Problem display chart #79917

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/

December 30, 2015 at 7:34 pm [PIE CHART] with PHP/MySQL — Problem display chart #79950

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

January 4, 2016 at 6:52 am [PIE CHART] with PHP/MySQL — Problem display chart #80001

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/

January 4, 2016 at 8:36 am [PIE CHART] with PHP/MySQL — Problem display chart #80008

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

January 6, 2016 at 7:10 am [PIE CHART] with PHP/MySQL — Problem display chart #80081
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/
Author

Posts

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

You must be logged in to reply to this topic.