Rendering Flot barchart с выпадающими списками

Я собираю график гистограммы на моем сайте. Мое требование, как у меня есть раскрывающийся список зоны и выпадающий список другой зависимой страны по зоне. На выбор зоны и страны для этой конкретной страны нужны гистограммы чтобы быть построены. Индивидуально каждая страница рендеринга, как ожидалось. Но когда я включаю эти страницы на одной странице php, я получаю сообщение об ошибке «Без метода», где я ошибаюсь. Мой код для интегрированной странице:Rendering Flot barchart с выпадающими списками

<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>

Код для отдельных страниц ниже. 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); 
?>

источник

2014-01-23 Harsha

Убедитесь, что вы загрузите все необходимые файлы javascript в правильном порядке и только один раз. (например, 'jquery.flot.axislabels.js'). – Raidri

Если это не помогает, попробуйте создать скрипт (http://jsfiddle.net), который воспроизводит ошибку. Это проще посмотреть на вашу «стену кода». – Raidri

Ошибка означает, что вы вызываете метод '$ .plot' * перед * загрузкой' jquery.flot.js'. Если я следую вашему коду, вы также загружаете jquery и флот несколько раз, это не очень хорошая идея. – Mark

В вашей интегрированной странице вы загрузите все файлы JavaScript один раз в начале интегрированной страницы и еще раз на начало maindashoverall1.php. Удалите блок в файле maindashoverall1.php.

У вас также есть две линии (на блок), где вы загружаете jquery.flot.axislabels.js. Удалите один из них тоже.

источник

2014-01-24 10:43:27 Raidri

Rendering Flot barchart с выпадающими списками

ответ

Смежные вопросы