Рендеринг Flot Barchart с выпадающими

Question

Рендеринг Flot Barchart с выпадающими

0

Я собираю график гистограммы на моем веб-сайте. Мое требование похоже на то, что у меня есть раскрывающийся список зоны и выпадающий список другой зависимой страны по зоне. В области выбора зоны и страны для этой конкретной страны диаграммы должны быть построены. Индивидуально каждая страница рендеринга, как и ожидалось. Но когда я включаю эти страницы в одну страницу 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>
<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);
?>

Harsha 23 янв. 2014, в 14:27

Источник

1

Убедитесь, что вы загружаете все необходимые файлы JavaScript в правильном порядке и только один раз. (например, jquery.flot.axislabels.js ).
Raidri 23 янв. 2014, в 15:04
0

Если это не поможет, попробуйте построить скрипку, которая воспроизводит ошибку. Это проще, чем просматривать вашу wall of code .
Raidri 23 янв. 2014, в 15:07
1

Ошибка означает, что вы вызываете метод $.plot перед загрузкой jquery.flot.js . Если я следую вашему коду, вы также загружаете jquery и перемещаетесь несколько раз, это не очень хорошая идея.
Mark 23 янв. 2014, в 15:23
0

не могли бы вы уточнить @Mark
Harsha 24 янв. 2014, в 06:21
0

Смотрите мой ответ для уточнения.
Raidri 24 янв. 2014, в 10:44

Показать ещё 3 комментария

Теги:

php

jquery

flot

1 ответ

Ещё вопросы

Убедитесь, что вы загружаете все необходимые файлы JavaScript в правильном порядке и только один раз. (например, jquery.flot.axislabels.js ).
Если это не поможет, попробуйте построить скрипку, которая воспроизводит ошибку. Это проще, чем просматривать вашу wall of code .
Ошибка означает, что вы вызываете метод $.plot перед загрузкой jquery.flot.js . Если я следую вашему коду, вы также загружаете jquery и перемещаетесь несколько раз, это не очень хорошая идея.
Смотрите мой ответ для уточнения.

Raidri · Answer 1 · 2014-01-24T09-27-00.000Z

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

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