Hola,
tengo un js que crea gráficos de estadísticas cuyo código es:
Código Javascript
:
Ver originalazure.chart = function ()
{
var pub = {};
var self = {};
pub.draw = function ()
{
self.drawChart ();
self.tooltip ();
return false;
}
self.drawChart = function ()
{
var visitor = [];
visitor.push([1, 3500]);
visitor.push([2, 3000]);
visitor.push([3, 5000]);
visitor.push([4, 8200]);
visitor.push([5, 6700]);
visitor.push([6, 7100]);
visitor.push([7, 7800]);
visitor.push([8, 5700]);
visitor.push([9, 7000]);
visitor.push([10, 6200]);
visitor.push([11, 7000]);
visitor.push([12, 9100]);
var plot = $.plot($("#placeholder"), [{
data: visitor,
label: "Visitors"
}], {
series: {
lines: {
show: true
},
points: {
show: true
}
},
grid: {
hoverable: true,
clickable: true
},
yaxis: {
min: 500,
max: 12000
},
legend: {
show: false
},
xaxis: {
mode: null,
ticks: [
[1, "Jan"],
[2, "Feb"],
[3, "Mar"],
[4, "Apr"],
[5, "May"],
[6, "Jun"],
[7, "Jul"],
[8, "Aug"],
[9, "Sep"],
[10, "Oct"],
[11, "Nov"],
[12, "Dec"]
]
},
lines: {
show: true,
fill: 0.5
}
});
return false;
}
self.tooltip = function ()
{
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y - 30,
left: x - 50,
border: '1px solid #999',
padding: '2px',
'background-color': '#EEE',
opacity: 0.80
}).appendTo("body").fadeIn(200)
}
var previousPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX, item.pageY, "• " + y + " " + item.series.label + " •")
}
} else {
$("#tooltip").remove();
previousPoint = null
}
});
}
return pub;
}();
function drawChart ()
{
}
y lo llamo desde mi header asi:
Código html:
Ver original<script type="text/javascript" src="<?php echo $config->get('viewsFolder');?>js/azure.js">
</script> <script type="text/javascript" src="<?php echo $config->get('viewsFolder');?>js/azure.chart.js">
</script> <script type="text/javascript" src="<?php echo $config->get('viewsFolder');?>js/azure.nav.js">
</script> <script type="text/javascript" src="<?php echo $config->get('viewsFolder');?>js/azure.message.js">
</script> <script type="text/javascript" src="<?php echo $config->get('viewsFolder');?>js/azure.portlet.js">
</script> <script type="text/javascript" charset="utf-8"> $(function ()
{
azure.layoutInit ();
azure.nav.init ();
azure.portlet.init ();
azure.message.init ();
azure.chart.draw ();
$('#dataTable').tablesorter ({ headers: { 4: {sorter: false} } });
$('#gallery a').lightBox ();
});
hasta ahí todo de maravilla, el tema es que ahora los datos del arreglo visitor los obtengo con php y nose como puedo asignar mi arreglo php para que lo tome el script.
Espero que alguien me pueda dar un mano, desde ya muchas gracias....