创建从数据库获取数据的多系列折线图

Question

我正在尝试创建一个包含多个系列的折线图，从数据库中获取数据。

这是 table 我有：

Code | Date/Time

-----------------------

A    | 9-10-2016 09:25

B    | 10-11-2016 10:11

C    | 11-10-2016 14:23

A    | 9-10-2016 10:10

B    | 10-11-2016 11:00

因此，我需要在图表中显示每个 "Code" 的总出现次数。在上面的 table 中，代码 "A" 出现了 2 次，代码 "B" 出现了 2 次，代码 "C".

出现了 1 次

我在创建浮动聊天时没有遇到问题，但我无法将正确的数据输入到浮动图表中时间序列的变量中。

那么，如何使用 MySQL 和 PHP 从数据库中提取数据？？？

下面是一个线系列的 Flot 图表的代码，我需要添加数据库中所有可用的系列，所以它可能是 10 也可能是 100。

我有 var d1，需要添加 d2、d3、d4.....

<script type="text/javascript">

$(文档).ready(函数(){

var d1 = [<?php print_r($js_array1); ?>];

var data = [{label: "<?php echo $error_code; ?>" , data: d1, lines: { show: true, fill: false }, points: { show: true }, color: "#478514" }
];

var p = $.plot($("#placeholder"), data, {
        xaxis: {
  ticks: 8,
  mode: 'time'
},
yaxis: {
  ticks: 6,
  min: 0
},
grid: {
  backgroundColor: { colors: ['#fff', '#eee'] },
  hoverable: true
},
legend: {
  labelFormatter: function(label, series) {
    return '<a href="$chart_label_link">' + label + '</a>';
  }
        }
});

$.each(p.getData()[0].data, function(i, el){
    var o = p.pointOffset({x: el[0], y: el[1]});
    $('<div class="data-point-label">' + el[1] + '</div>').css( {
        position: 'absolute',
        left: o.left -10,
        top: o.top -20,
        display: 'none',
        'font-size': '13px'
    }).appendTo(p.getPlaceholder()).fadeIn('slow');
});

function showTooltip(x, y, contents, z) {
    $('<div id="flot-tooltip">' + contents + '</div>').css( {
        position: 'absolute',
        display: 'none',
        top: y - 30,
        left: x + 30,
        border: '2px solid',
        padding: '2px',
        'background-color': '#FFF',
        opacity: 0.80,
        'font-size': '10px',
        'border-color': z,
        '-moz-border-radius': '5px',
        '-webkit-border-radius': '5px',
        '-khtml-border-radius': '5px',
        'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
        'border-radius': '5px'
    }).appendTo("body").fadeIn(200);
}  

function getMonthName(numericMonth) {
    var monthArray = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    var alphaMonth = monthArray[numericMonth];

    return alphaMonth;
}

function convertToDate(timestamp) {
    var newDate = new Date(timestamp);
    var dateString = newDate.getMonth();
    var monthName = getMonthName(dateString);

    return monthName;
}

var previousPoint = null;
var previousPointLabel = null;

$("#placeholder").bind("plothover", function (event, pos, item) {
    if (item) {
        if ((previousPoint != item.dataIndex) || (previousLabel != item.series.label)) {
            previousPoint = item.dataIndex;
            previousLabel = item.series.label;

            $("#flot-tooltip").remove();

            var x = convertToDate(item.datapoint[0]);
            y = item.datapoint[1];
            z = item.series.color;

            showTooltip(item.pageX, item.pageY,
                    "<b>" + item.series.label + "</b><br />" + y + " transactions impacted.",
                    z);
        }
    } else {
        $("#flot-tooltip").remove();
        previousPoint = null;
    }
    });
});

非常感谢您的帮助...非常感谢！

Answer 1

您需要使用 post 或 get 方法从数据库中提取数据，这通常会为您提供一个 json 数组，然后您需要将其转换为对象或赋值到可以根据需要创建的一系列变量来保存接收到的数据。

我建议查看 http://www.w3schools.com/tags/ref_httpmethods.asp and http://www.w3schools.com/php/php_mysql_intro.asp 以了解有关通过 PHP 与 mysql 数据库交互的一些基础知识。希望对您有所帮助！

创建从数据库获取数据的多系列折线图

Create a multi-series line flot chart getting data from database

javascript

php

mysql

charts

flot