Estoy tratando de crear un gráfico Flot de jQuery con series multiples extrayendo los datos de la base de datos con un query.
Esta es la table que tengo en la base de datos:
Codigo | 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
Como pueden ver existen varias entradas para cada Codigo por lo que se necesita obtener por medio del query el total de entradas para cada dia agrupados por codigo. Asi al fainal se obtendrá: A= 2 para el 9-10-2016, B=2 para el 10-11-2016 y C=1 para el 1-10-2016 y graficarrlo posteriormente.
No tengo problemas creando el Flo Chart para un serie, pero necesito adicionarle por medio de codigo php las series adicionales loas cuales pueden ser varias para cada dia.
La pregunta seria, como estraer de la base de datos esa informacion usando mysql y php para luego agregarlo a las variables del javascript del Flot chart de manera dinamica???
Este es el codigo que tengo para el Flot Chart, el cual funciona bien para 1 serie.
<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;
}
});
});
Muchas gracias por la ayuda!!