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

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个回答



你需要使用post或get方法从数据库中提取数据,这通常会得到一个json数组,你将会 然后需要变成一个对象或分配一系列变量,这些变量可以根据需要创建以保存收到的数据。</ p>

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

展开原文

原文

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!

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐