Estoy tratando de crear un gráfico Flot de jQuery con series multiplesmúltiples 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
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 CodigoCódigo por lo que se necesita obtener por medio del query el total de entradas para cada diadía agrupados por codigocódigo. AsiAsí al fainalfinal 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 graficarrlograficarlo 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 diadía.
La pregunta seria, como estraerextraer de la base de datos esa informacioninformación usando mysql y php para luego agregarlo a las variables del javascript del Flot chart de manera dinamicadinámica???
Este es el codigocódigo que tengo para el Flot Chart, el cual funciona bien para 1 serie.
<script type="text/javascript">
$(document).ready(function () {
$(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;
}
});
});
</script>
});