Rendering Flot barchart with dropdowns - php

Question

I am plotting flot bar graph in my website.My requirement is like I have a zone dropdown and another dependent country dropdown on zone .On the selection of zone and country for that particular country the bar graphs needs to be plotted.Individually every page is rendering as expected.But when I am including those pages in single php page I am getting an error as"No method plot".where I am wrong.
My code for Integrated page is:
<script type="text/javascript" src="../assets/plugins/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../assets/plugins/flot/jquery.flot.js"></script>
<script type="text/javascript" src="../assets/plugins/flot/jquery.flot.time.min.js"></script>
<script type="text/javascript" language="javascript" src="../assets/plugins/flot/jquery.flot.axislabels.js"></script>
<script type="text/javascript" language="javascript" src="../assets/plugins/flot/jquery.flot.orderBars.js"></script>
<script type="text/javascript" language="javascript" src="../assets/plugins/flot/jquery.flot.tickrotatotor.min.js"></script>
<script type="text/javascript" language="javascript" src="../assets/plugins/flot/jquery.flot.axislabels.js"></script>
<script type="text/javascript" language="javascript" src="../assets/plugins/flot/jquery.flot.labelangle.min.js"></script>
<script>
function graph()
{
alert("In graph function");
var yourSelect = document.getElementById('zoneddl');
if(yourSelect.options[yourSelect.selectedIndex].value =='overall')
{
alert("overall");
maindashoverall();
}
else if(yourSelect.options[yourSelect.selectedIndex].value =='overall1')
{
alert("overall1");
document.getElementById('overall1').style.display ="block";
document.getElementById('overall').style.display ="none";
maindashoverall1();
}
}
</script>
<select id="zoneddl" onChange="graph()">
<option value="0">select</option>
<option value="overall">OVERALL</option>
<option value="overall1">OVERALL1</option>
</select>
<div id="overall">
<?php include "graphs/maindashoverall.php"; ?>
</div>
<div id="overall1" style="display:none">
<?php include "graphs/maindashoverall1.php"; ?>
</div>
The code for Individual pages is below.
maindashoverall.php:
<?php require_once('dbfile');
mysql_select_db($database_finalkms, $finalkms);
$query_getmaindata = "select `EquipmentMainCatagory`,count(`EquipmentMainCatagory`) from asset a join assetinfo ai on a.assetid=ai.assetid and upper(ai.EquipmentStatus) like upper('%Active%') group by `EquipmentMainCatagory`";
$getmaindata = mysql_query($query_getmaindata, $finalkms) or die(mysql_error());
$row_getmaindata = mysql_fetch_assoc($getmaindata);
$totalRows_getmaindata = mysql_num_rows($getmaindata);
$rows = array();
while($row_getmaindata = mysql_fetch_assoc($getmaindata))
{
$rows[] = array( $row_getmaindata['EquipmentMainCatagory'],(int)$row_getmaindata['count(`EquipmentMainCatagory`)']);
}
// convert data into JSON format
$jsonTable = json_encode($rows);
?>
<div id="placeholder1" style="width:900px;height:750px;"></div>
<script>
$(function maindashoverall() {
var data =<?php echo $jsonTable;?>;
var ticks = [];
for (var i = 0; i < data.length; i++) {
ticks.push([i,data[i][0]]);
data[i][0] = i;
}
var dataset = [{ data: data, color: "#5482FF" }];
var options = {
series: {
lineWidth: 5,
bars: {
show: true,
barWidth: 0.5,
align:"center"
}
},
xaxis: {
axisLabel: "EquipmentMainCatagory",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10,
ticks: ticks,
//rotateTicks:90
labelAngle: 90
},
yaxis: {
axisLabel: "# Assets",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3
},
grid: {
hoverable: true,
borderWidth: 0,
backgroundColor: { colors: ["#ffffff", "#EDF5FF"] },
}
};
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;
//console.log(item.series.xaxis.ticks[x].label);
showTooltip(item.pageX,
item.pageY,
color,
item.series.xaxis.ticks[x].label + " : <strong>" + y + "</strong>");
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
};
function showTooltip(x, y, color, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y ,
left: x,
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);
}
$.plot($("#placeholder1"), dataset, options);
$("#placeholder1").UseTooltip();
});
</script>
<?php
mysql_free_result($getmaindata);
?>
maindashoverall1.php:
<script type="text/javascript" src="../../assets/plugins/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../../assets/plugins/flot/jquery.flot.js"></script>
<script type="text/javascript" src="../../assets/plugins/flot/jquery.flot.time.min.js"></script>
<script type="text/javascript" language="javascript" src="../../assets/plugins/flot/jquery.flot.axislabels.js"></script>
<script type="text/javascript" language="javascript" src="../../assets/plugins/flot/jquery.flot.orderBars.js"></script>
<script type="text/javascript" language="javascript" src="../../assets/plugins/flot/jquery.flot.tickrotatotor.min.js"></script>
<script type="text/javascript" language="javascript" src="../../assets/plugins/flot/jquery.flot.axislabels.js"></script>
<script type="text/javascript" language="javascript" src="../../assets/plugins/flot/jquery.flot.labelangle.min.js"></script>
<?php //require_once('dbfile.php');
mysql_select_db($database_finalkms, $finalkms);
$query_getmaindata = "select `EquipmentMainCatagory`,count(`EquipmentMainCatagory`) from asset a join assetinfo ai on a.assetid=ai.assetid and upper(ai.EquipmentStatus) like upper('%Active%') group by `EquipmentMainCatagory` order by count(`EquipmentMainCatagory`) desc";
$getmaindata = mysql_query($query_getmaindata, $finalkms) or die(mysql_error());
$row_getmaindata = mysql_fetch_assoc($getmaindata);
$totalRows_getmaindata = mysql_num_rows($getmaindata);
$rows = array();
while($row_getmaindata = mysql_fetch_assoc($getmaindata))
{
$rows[] = array( $row_getmaindata['EquipmentMainCatagory'],(int)$row_getmaindata['count(`EquipmentMainCatagory`)']);
}
// convert data into JSON format
$jsonTable = json_encode($rows);
?>
<div id="placeholder2" style="width:900px;height:750px;"></div>
<script>
$(function maindashoverall1() {
var data =<?php echo $jsonTable;?>;
var ticks = [];
for (var i = 0; i < data.length; i++) {
ticks.push([i,data[i][0]]);
data[i][0] = i;
}
var dataset = [{ data: data, color: "#5482FF" }];
var options = {
series: {
lineWidth: 5,
bars: {
show: true,
barWidth: 0.5,
align:"center"
}
},
xaxis: {
axisLabel: "EquipmentMainCatagory",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10,
ticks: ticks,
labelAngle: 90
},
yaxis: {
axisLabel: "# Assets",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3
},
grid: {
hoverable: true,
borderWidth: 0,
backgroundColor: { colors: ["#ffffff", "#EDF5FF"] },
}
};
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;
//console.log(item.series.xaxis.ticks[x].label);
showTooltip(item.pageX,
item.pageY,
color,
// "<strong>" + y + "</strong>");
item.series.xaxis.ticks[x].label + " : <strong>" + y + "</strong>");
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
};
function showTooltip(x, y, color, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y ,
left: x,
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);
}
var $overall1 = $.plot($("#placeholder2"), dataset, options);
$("#placeholder2").UseTooltip();
});
</script>
<?php
mysql_free_result($getmaindata);
?>

Answer 1

In your integrated page, you load all javascript files once at the beginning of the integrated page and once again at the beginning of maindashoverall1.php. Remove the block in the maindashoverall1.php file.
You also have two lines (per block) where you load jquery.flot.axislabels.js. Remove one of those too.