FlotCharts / PHP / MySQL - Goin crazy with multiple axes and realtime - php

Question

I'm trying to do a realtime Bar Chart. On left (Y axis) i have clients Name
and on bottom (X axis) i have a number (a count from mysql).
Simply i cant understand why wont go the redraw. I've been trying solving the problem alone and searching on google and here last 2 days without any success.
Here is the code:
`
<script>
var rawData = [<?php echo getDataLog(); ?>];
var dataSet = [{ label: "Numero di Allarmi", data: rawData, color: "#E8E800" }];
var ticks = [<?php echo getDataLogName(); ?>];
var options = {
series: {
bars: {
show: true
}
},
bars: {
align: "center",
barWidth: 0.5,
horizontal: true,
fillColor: { colors: [{ opacity: 0.5 }, { opacity: 1}] },
lineWidth: 1
},
xaxis: {
axisLabel: "Allarmi",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10,
max: 2000,
tickColor: "#5E5E5E",
color: "black"
},
yaxis: {
axisLabel: "Clienti",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3,
tickColor: "#5E5E5E",
ticks: ticks,
color: "black"
},
legend: {
noColumns: 0,
labelBoxBorderColor: "#858585",
position: "ne"
},
grid: {
hoverable: true,
borderWidth: 2,
backgroundColor: { colors: ["#171717", "#4F4F4F"] }
}
};
function updateGraph(){
var rawData = [<?php echo getDataLog(); ?>];
var dataSet = [{ label: "Numero di Allarmi", data: rawData, color: "#E8E800" }];
var ticks = [<?php echo getDataLogName(); ?>];
$.plot($("#flot-placeholder"), dataSet, options);
$("#flot-placeholder").UseTooltip();
}
var previousPoint = null, previousLabel = null;
$.fn.UseTooltip = function () {
$(this).bind("plothover", function (event, pos, item) {
if (item) {
if ((previousLabel != item.series.label) ||
(previousPoint != item.dataIndex)) {
previousPoint = item.dataIndex;
previousLabel = item.series.label;
$("#tooltip").remove();
var x = item.datapoint[0];
var y = item.datapoint[1];
var color = item.series.color;
//alert(color)
//console.log(item.series.xaxis.ticks[x].label);
showTooltip(item.pageX,
item.pageY,
color,
"<strong>" + item.series.label + "</strong><br>" + item.series.yaxis.ticks[y].label +
" : <strong>" +x+ "</strong> Allarmi");
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
};
function showTooltip(x, y, color, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y - 10,
left: x + 10,
border: '2px solid ' + color,
padding: '3px',
'font-size': '9px',
'border-radius': '5px',
'background-color': '#fff',
'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
opacity: 0.9
}).appendTo("body").fadeIn(200);
}
setInterval(function(){
updateGraph();
console.log("a");
},1000)
</script>`
I really give up on try to understand why wont refresh the graph