创建一个从数据库获取数据的多系列折线图答案

【问题标题】：Create a multi-series line flot chart getting data from database创建一个从数据库获取数据的多系列折线图
【发布时间】：2016-11-17 16:53:47
【问题描述】：

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

这是我的桌子：

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

所以，我需要在图表中显示每个“代码”的出现总数。在上表中，代码“A”出现了 2 次，代码“B”出现了 2 次，代码“C”出现了 1 次。

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

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

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

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

<script type="text/javascript">

$(document).ready(function () {

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;
    }
    });
});

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

【问题讨论】：

标签： javascript php mysql charts flot

【解决方案1】：

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

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

【讨论】：