JQChart不可见

时间:2015-11-27 14:32:32

标签: php jqwidget

  

我正在使用jquery小部件来显示我的文件的折线图。为此我有3个文件connect.php我只有我的用户名和密码和dbhost名称和其余两个文件在这里   我使用此代码作为我的data.php

<?php
include 'conn.php';

$conn = oci_connect($dbuser, $dbpass, $dbhost) or die('Error connecting to mysql');

$query   = "SELECT  PRODUCT, sum(QUANTITY) as QUANTITY FROM  SALES GROUP  BY PRODUCT";
$resultb = oci_parse($conn, $query);
oci_execute($resultb);

$orders = array();

$i = 0;
while (($row = oci_fetch_array($resultb, OCI_NUM)) != false) {
    $orders[] = array(
        'ProductName' => $row[0],
        'Quantity' => $row[1]
    );
}   

$_SESSION['orders'] = $orders;
echo json_encode($orders);

?>
  

这是我要运行的文件代码

<html lang="en">
<head>
    <title id='Description'>jQuery Chart Column Series Example</title>
    <link rel="stylesheet" href="dw/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="dw/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="dw/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="dw/jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="dw/jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="dw/jqwidgets/jqxdata.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            var source = {
                datatype: "json",
                datafields: [{
                    name: 'Quantity'
                }, {
                    name: 'ProductName'
                }],
                url: 'data.php'
            };

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

            // prepare jqxChart settings
            var settings = {
                title: "Orders by Product",
                showLegend: true,
                padding: {
                    left: 5,
                    top: 5,
                    right: 5,
                    bottom: 5
                },
                titlePadding: {
                    left: 90,
                    top: 0,
                    right: 0,
                    bottom: 10
                },
                source: dataAdapter,
                categoryAxis: {
                    text: 'Category Axis',
                    textRotationAngle: 0,
                    dataField: 'ProductName',
                    showTickMarks: true,
                    tickMarksInterval: Math.round(dataAdapter.records.length / 15),
                    tickMarksColor: '#888888',
                    unitInterval: Math.round(dataAdapter.records.length / 15),
                    showGridLines: true,
                    gridLinesInterval: Math.round(dataAdapter.records.length / 15),
                    gridLinesColor: '#888888',
                    axisSize: 'auto'
                },
                colorScheme: 'scheme05',
                seriesGroups: [{
                    type: 'line',
                    valueAxis: {
                        displayValueAxis: true,
                        description: 'Quantity',
                        //descriptionClass: 'css-class-name',
                        axisSize: 'auto',
                        tickMarksColor: '#888888',
                        unitInterval: 100,
                        minValue: 0,
                        maxValue: 500
                    },
                    series: [{
                        dataField: 'Quantity',
                        displayText: 'Product'
                    }]
                }]
            };

            // setup the chart
            $('#jqxChart').jqxChart(settings);
        });
    </script>

</head>

<body style="background:white;">
    <div id='jqxChart' style="width:400px; height: 300px" />
</body>

</html>
  

它正在显示它

displaying it like this

  

虽然我的data.php工作正常   output of data.php

1 个答案:

答案 0 :(得分:0)

删除&#34; Hello World&#34;从您的data.php文件中,您的图表无法正确读取数组