Export to GitHub

flot - issue #764

Invalid Bar Alignment


Posted on Jul 8, 2013 by Helpful Bear

$.plot is converting bars: align: center from "center" to "div#center". This causes failure of switch statement in processData function.

   $.each(graphData, function () {
        var graphName = this.Name;
        var graphMin = this.Min;
        var graphMax = this.Max;
        var graphMean = this.Average;
        var graphStdDev = this.StdDev;
        var graphSelector = this.Selector;

        var dataPoints = [];
        var ticks = [];
        var tick = graphMin;
        $.each(this.Data, function () {
            ticks.push(tick++);
            point = [];
            point.push(this.value, this.stdDev, this.label);
            dataPoints.push(point);
        });

        var plot = $.plot($(graphSelector + '>.daqChart'), [{ data: dataPoints, label: graphName }], {
            bars: {
                show: true,
                align: center,  <-- THIS LINE IS FAILING
                barWidth: 0.7,
                label: {
                    show: true,
                    formatter: function (label, series) {
                        log('label: ' + label);
                        return '<div style="font-size:11px; text-align:center; padding:2px; color:black;">' + label;
                    },
                    align: 'center'
                },
            },
            xaxis: {
                min: graphMin,
                max: graphMax,
                ticks: ticks,
                ticksize: 1,
                tickDecimals: 0,
                minTickSize: 1
            },
            yaxis: {
                position: 'right',
                tickFormatter: function (val, axis) {
                    return yAxisFormatter(val);
                }
            },
            clickable: true,
            hoverable: true,
            legend: {
                show: false,
                position: 'ne',
                noColumns: graphMax,
                labelFormatter: function (label, series) {
                    return '<b>' + label + '</b>';
                }
            },
            grid: {
                hoverable: true,
                clickable: true
            },
        });

Status: New

Labels:
Type-Defect Priority-Medium