duangengruan2144 2015-11-20 18:32
浏览 53

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

  • 写回答

0条回答

    报告相同问题?

    悬赏问题

    • ¥15 outlook无法配置成功
    • ¥15 Pwm双极模式H桥驱动控制电机
    • ¥30 这是哪个作者做的宝宝起名网站
    • ¥60 版本过低apk如何修改可以兼容新的安卓系统
    • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
    • ¥50 有数据,怎么建立模型求影响全要素生产率的因素
    • ¥50 有数据,怎么用matlab求全要素生产率
    • ¥15 TI的insta-spin例程
    • ¥15 完成下列问题完成下列问题
    • ¥15 C#算法问题, 不知道怎么处理这个数据的转换