Passing an PHP Array as variable into Flot Bar Chart

Question

I am trying to implode my php array variable into my flot Bar chart. Any idea please ?

What is the correct format for flot data which expects an array of arrays ?

somePlot = null;
$(function () {

    var data = $.map( <? php echo '['.implode(", ", $studentsage).']' ?> , function (val, idx) {
        return [[idx, val]];
    });

    var dataset = [{
        label: "Exams By Student Age",
        data: data,
        color: "#5482FF"
    }];
    var ticks = [
        [0, "0-2"]
    ]; // expand this for each idx in data

    var options = {
        series: {
            bars: {
                show: true
            }
        },
        bars: {
            align: "center",
            barWidth: 0.6,
            vertical: true,
            show: true
        },
        xaxis: {
            axisLabel: "Exams By Student Ages",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 10,
            tickLength: 0,

            ticks: ticks

        },
        yaxis: {
            axisLabel: "Number of Exams",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 3,

            max: 20,
            tickSize: 1,
            tickFormatter: function (v, axis) {
                return v;
            }
        },
        legend: {
            noColumns: 0,
            labelBoxBorderColor: "#000000",
            position: "nw"
        },
        grid: {
            clickable: true,
            borderWidth: 1,

            backgroundColor: {
                colors: ["#ffffff", "#EDF5FF"]
            }
        }
    };

    $(document).ready(function () {
        $.plot($("#flot-placeholder"), dataset, options);
        $("#flot-placeholder").UseTooltip();
    });

    function gd(year, month, day) {
        return new Date(year, month, day).getTime();
    }
    var previousPoint = null,
        previousLabel = null;

    $.fn.UseTooltip = function () {
        $(this).bind("plotclick", function (event, pos, item) {
            var links = ['../../Chart/StudentTests/result.php'];
            if (item) {
                //alert("clicked");
                //  window.location = (links[item.dataIndex]); 
                window.open(links[item.dataIndex], '_blank');
                console.log(item);
            } else {
                $("#tooltip").remove();
                previousPoint = null;
            }
        });
    };

    function showTooltip(x, y, color, contents) {
        $('<div id="tooltip">' + contents + '</div>').css({
            position: 'absolute',
            display: 'none',
            top: y - 40,
            left: x - 120,
            border: '2px solid ' + color,
            padding: '3px',
            'font-size': '9px',
            'border-radius': '5px',
            'background-color': '#fff',
            'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
            opacity: 10
        }).appendTo("body").fadeIn(200);
    }
});

I would like to get something like that :

While I am getting this result :

Any idea please I would appreciate it.

Answer 1

You set the maximum for the y axis to 20.

Remove that setting and flot will choose the maximum automatically. Or set it to a number which is greater than your maximum value.

You will probably also want to remove the tick size setting or atleast increase it.