1

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 :

enter image description here

While I am getting this result :

enter image description here

Any idea please I would appreciate it.

0

1 Answer 1

2

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.