0
我想創建一個具有多個系列從數據庫中獲取數據的線路圖表圖表。創建一個獲取數據庫數據的多系列線路圖表
這是我的表：
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聊天的問題，但我無法獲得正確的數據到時間序列的變量中。
那麼，如何從MySQL和PHP中提取數據形式的數據庫？
下面是海軍報圖，我有一個線系列的代碼，我需要添加可用的所有系列在數據庫中，所以它可能是10或者它可能100
我有VAR d1和需要補充D2，D3，D4 .....
<script type="text/javascript">
$（文件）。就緒（函數（）{
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;
}
});
});
我會感謝您的幫助...非常感謝！