Question

我正在尝试使用多个系列创建一个Line Flot Chart，从数据库中获取数据。

这是我的表格：

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

因此，我需要在图表中显示每个＆＃34; Code＆＃34;的出现次数。在上表中，我出现了2次代码＆＃34; A＆＃34;，2次出现代码＆＃34; B＆＃34;和1次出现的代码＆＃34; C＆＃34;。

我在创建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;
    }
    });
});

我将非常感谢你的帮助......非常感谢！

Answer 1

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

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

创建从系统获取数据的多系列线路图表

1 个答案: