FlotCharts / PHP / MySQL - 多轴和实时疯狂

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

doujiepin5547
doujiepin5547 应该工作正常,看到这个小提琴的中间栏。使用您的代码,图表不会更改,因此您可能看不到刷新。
接近 5 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问