使用数据库中的两个变量在jqplot中显示图形

display graph in jqplot using two variables from a database

本文关键字：变量 jqplot 显示 显示图 两个 图形 数据库      更新时间：2023-09-26

我是jqplot的新手，我一直在尝试显示一个包含数据库中日期（x轴）和值（y轴）的图形。我设法将日期和值保存到一个漂亮的字符串中（所有数据都用逗号分隔，顺序很好），但当我调用$.jqplot（'chart1'，[total1]时，它不起作用！：(我什么都试过了，但我的想法和希望都快用完了。任何帮助或建议都将不胜感激。来自一个绝望的新手的问候

    <?php
        $conn = mysql_connect($host, $user, $password);
        mysql_select_db($database);
 $MenuSelection = $_POST['dropDownMenu'];// select field from dropdownmenu   
        $conn = mysql_connect($host, $user, $password);
        mysql_select_db($database);
 $sql = "SELECT date," . $MenuSelection . " FROM errorscounted where date       between '$CurrentDate' and '$FinalDate'";
            $result = mysql_query($sql);
            $data = array();
            while ($row = mysql_fetch_assoc($result)) {
                $data[] = $row;
            }
            mysql_free_result($result);
    mysql_close();
    ?>
<script type="text/javascript" >
 $(document).ready(function () {
var total1 = "";
// create a for loop to get dates and values and save them in a string
<?php for ($x = 0; $x <= 4; $x++) { ?>
var line1 = [['<?php echo $data[$x]['date'] ?>',
<?php echo $data[$x][$myvalue] ?>], ];
// concatenated the string and seperated the dates and values by a comma
total1 = total1.concat(line1) + ",";
    <?php } ?>
//delete the last comma
 total1 = total1.substring(0, total1.length - 1);
// an alert that shows that all the data was saved correctly
 alert(total1); 
 var plot1 = $.jqplot('chart1', [total1], {
animate: !$.jqplot.use_excanvas,
title: 'Number of errors from <?php echo $_POST['dateStart'] ?> to <?php echo $_POST['dateEnd'] ?> for <?php echo $_POST['dropDownMenu'] ?> ',
                            seriesDefaults: {
                                pointLabels: {show: true}
                            },
                            axesDefaults: {
                                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                                tickOptions: {
                                    angle: -30,
                                    fontSize: '10pt'
                                }
                            },
                            axes: {
                                xaxis: {
                                    renderer: $.jqplot.CategoryAxisRenderer,
                                    // renderer: $.jqplot.DateAxisRenderer,
                                    tickOptions: {
                                    }
                                },
                                yaxis: {
                                    tickOptions: {
                                    }
                                }
                            },
                            highlighter: {
                                show: false,
                                sizeAdjust: 7.5
                            },
                        });
                    });
                </script>

多亏了我的一位同事，我终于解决了我的问题！：）

我给jqplot一个字符串，但它需要一个数组！这是我非常简单的解决方案。希望它能帮助到别人！这是我的代码工作100%防弹

            <script type="text/javascript" >
                $(document).ready(function () {
                    var total1 = [];
 // create a for loop to get dates and values and save them in a string
<?php
$j = count($data);
for ($x = 0; $x < $j; $x++) {
    ?>
                        var line1 = ['<?php echo $data[$x]['date'] ?>',<?php echo $data[$x][$myvalue] ?>];
                        total1.push(line1);
<?php } ?>
                    // alert(total1);
                    var plot1 = $.jqplot('chart1', [total1], {
                        animate: !$.jqplot.use_excanvas,
                        title: 'Number of errors from <?php echo $_POST['dateStart'] ?> to <?php echo $_POST['dateEnd'] ?> for <?php echo $_POST['dropDownMenu'] ?> ',
                        seriesDefaults: {
                            pointLabels: {show: true}
                        },
                        axesDefaults: {
                            tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                            tickOptions: {
                                angle: -30,
                                fontSize: '10pt'
                            }
                        },
                        axes: {
                            xaxis: {
                                renderer: $.jqplot.CategoryAxisRenderer,
                                //renderer: $.jqplot.DateAxisRenderer,
                                tickOptions: {
                                }
                            },
                            yaxis: {min: 0,
                            }
                        },
                        highlighter: {
                        },
                    });
                });
            </script>
相关文章：