将ZingCharts连接到MySQL（建立折线图）

Question

谢谢。 现在，我可以看到第二张图，但是我拥有的第二张图中没有任何数据，因此它只是一个空白图表。 这是我的PHP代码。 我究竟做错了什么？ 我的代码：

    <?php 
    /* Open connection to "zing_db" MySQL database. */
    $mysqli = new mysqli("localhost", "root", "database123", "productno");

    /* Check the connection. */
    if (mysqli_connect_errno()) {
        printf("Connect failed: %s\n", mysqli_connect_error());
        exit();
    }
?> 



    <script>
/* First line chart */

var myData=[<?php 
$data=mysqli_query($mysqli,"SELECT * FROM records");
while($info=mysqli_fetch_array($data))
    echo '["'.$info['Date'].'",'.$info['Alibaba'].'],'; /* Data is formatted here, using the . concatenation operator */
    echo '[]'; /* We'll end up with a trailing comma, so we add an empty element here to pop off later*/
?>];

//--------- Second Line Chart ---------------

var myData1=[<?php 
$data1=mysqli_query($mysqli,"SELECT * FROM records");
while($info1=mysqli_fetch_array($data1))
    echo '["'.$info1['Date'].'",'.$info1['Lelong'].'],'; /* Data is formatted here, using the . concatenation operator */
    echo '[]'; /* We'll end up with a trailing comma, so we add an empty element here to pop off later*/
?>];

<?php
/* Close the connection */
$mysqli->close();
?>
myData.pop(); /* Pop off the final, empty element from the myData array */

//Display first line chart

    window.onload=function(){
    zingchart.render({
        id:"AlibabaChart",
        width:"100%",
        height:300,
        data:{
        "type":"line",
        "title":{
            "text":"Alibaba"
        },
        "series":[
            {
                "values":myData
            }
    ]
    }
    });

//Display second line chart

zingchart.render({
        id:"LelongChart",
        width:"100%",
        height:300,
        data:{
        "type":"line",
        "title":{
            "text":"Lelong"
        },
        "series":[
            {
                "values":myData1
            }
    ]
    }
    });

    };

</script>

仅供参考，数据来自同一表，x值和数据库，但来自不同的列（y值）。 谢谢！

Answer 1

我在ZingChart的团队中工作，很乐意为您提供帮助。

我已经使用您指定的结构复制了MySQL数据库设置，以便更好地为您提供帮助，并在其中填充了一些如下所示的伪数据：

Date,Alibaba
1/13/11,70
2/13/11,42
3/13/11,33
4/13/11,3
5/13/11,28
...

首先，我们需要打开与数据库的连接：

<?php 
/* Open connection to database */
$mysqli = new mysqli("localhost", "root", "pass", "productno");
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}
?>

成功建立连接后，下一步就是将数据格式化为ZingChart可读的格式。 假设您想沿x轴使用日期值，也许最好将数据格式化为如下所示的有序对：

"values":[ 
    [Date(string),value(int)],
    [Date2(string),value2(int)],
    [Date3(string),value3(int)]
    ... 
    ]

在下一步中，我们将查询数据库，并使用串联将每个日期前后的引号引起来，并在方括号中将每个Date，Alibaba有序对包裹起来。

<script>
/* Create myData variable in js that will be filled with db data */
var myData=[<?php 
$data=mysqli_query($mysqli,"SELECT * FROM records");
while($info=mysqli_fetch_array($data))
    echo '["'.$info['Date'].'",'.$info['Alibaba'].'],'; /* Data is formatted here, using the . concatenation operator */
    echo '[]'; /* We'll end up with a trailing comma, so we add an empty element here to pop off later*/
?>];
<?php
/* Close the connection */
$mysqli->close();
?>
myData.pop(); /* Pop off the final, empty element from the myData array */

此时，如果要查看页面源，变量myData将如下所示：

var myData = [
    ["2011-01-13", 70],
    ["2011-02-13", 42],
    ["2011-03-13", 33],
    ...
];

...这意味着可以将其放入我们的图表中了！

    window.onload = function() {
        zingchart.render({
            id: "myChart",
            width: "50%",
            height: 400,
            data: {
                "type": "line",
                "title": {
                    "text": "Data Pulled from MySQL Database"
                },
                "series": [{
                    "values": myData
                }]
            }
        });
    };
</script>

这是我们的最终结果：

希望对您有所帮助！ 如果您有任何疑问，请告诉我。

编辑10/20/14：

我看到您在同一页面上生成两个折线图时遇到了麻烦。 为了在页面中呈现多个图表，您必须包括多个具有唯一ID的<div>元素，并为要生成的每个图表调用zingchart.render方法。

请看一下这个演示 。

请注意，有两个<div>元素，一个具有id =“ myChartDiv”，另一个具有id =“ myChartDiv2”。 我们还在window.onload函数中包括了两次对zingchart.render方法的调用。 第一个调用告诉ZingChart使用id =“ myChartDiv”在<div>元素的位置呈现图表，第二个调用告诉ZingChart在id =“ myChartDiv2”在<div>元素的位置呈现图表。

可以在页面上的两个图表中使用相同的数据数组，如提供的演示中的myData变量所示。

编辑10/21/14：

嗨，凯尔 我已经在测试环境中使用了您的代码，由于您没有从myData1数组的末尾弹出空元素，因此好像没有加载数据。

只需添加：

myData1.pop();

行后：

myData.pop();

而且您应该很好走！