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

时间:2015-02-10 17:02:37

标签: javascript php arrays graph jqplot

我是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>

1 个答案:

答案 0 :(得分:0)

非常感谢我的一位同事,我终于解决了我的问题! :)

我给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>