doujianguang5506 2016-11-17 16:53
浏览 75
已采纳

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

I am trying to create a Line Flot Chart with multiple series getting the data from the database.

This is the table I have:

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

So, I need to show in the chart the total number of occurrences for each "Code". In the above table, I have 2 occurrences for code "A", 2 occurrences of code "B" and 1 occurrence of code "C".

I don't have problems creating the flot chat but I am not able to get the proper data into the variables for the time series in the flot chart.

So, how to extract the data form the database using MySQL and PHP ???

Below is the code of the Flot chart that I have for one line series and I need to add all series available in the database, so it could be 10 or it could 100.

I have var d1 and need to add 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;
    }
    });
});

I will appreciate your help... thanks a lot!

  • 写回答

1条回答 默认 最新

  • dongyi8795 2016-11-17 18:22
    关注

    You will need to use a post or get method to pull data from the database, this will usually get you a json array which you will then need to turn into an object or assign to a series of variables that can be created as needed to hold the recieved data.

    I would suggest looking at http://www.w3schools.com/tags/ref_httpmethods.asp and http://www.w3schools.com/php/php_mysql_intro.asp for some basics on interacting with a mysql database via PHP. Hope that helps!

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面