浮动条形图可点击的条显示错误信息

Question

I'm trying to make it so that when a bar on my graph is clicked, the x-axis label of that specific bar is printed out/displayed in a span. My ultimate goal is to make it so that when a bar is clicked, another bar graph is created underneath that displays more detailed information about that specific bar, think broad information on the first graph and when a bar is clicked, more detailed information is displayed in another bar graph underneath.

Test table in my db:

x ------------- y
0 ----------- 1000
1 ----------- 2000
2 ----------- 3000
3 ----------- 4000
4 ----------- 5000
5 ----------- 6000
6 ----------- 7000
7 ----------- 8000
8 ----------- 9000

Query:

   $sql = "SELECT * FROM flotTest";
   $result = mysqli_query($dbc3, $sql);

    while($row = mysqli_fetch_assoc($result))
    {
        $dataset1[] = array($row['x'],$row['y']);
    }

flot js:

     // BAR CHART
        var percentagehrs = [];
        for (var i = 0; i <= 8; i += 1){
        percentagehrs.push([i, parseInt(Math.random() * 200)]);
}
        var dataset = [{
            label: "Percentage Hours",
            data: percentagehrs,
            color: "#5482FF" }];

        //x-axis label and index pulled from database (testing purposes)
        //I'm thinking this might be where my issue is

        var ticks =  <?php echo json_encode($dataset1); ?>;

        $(document).ready(function () {
            $.plot($("#group-flot-placeholder"), dataset, {
            series: {
                bars: {
                    show: true,
                    clickable: true
                }
            },
            bars: {
                align: "center",
                barWidth: 0.8
            },
            xaxis: {
                axisLabel: "Job Number",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Verdana, Arial',
                axisLabelPadding: 10,
                ticks: ticks
            },
            yaxis: {
                axisLabel: "Percent",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Verdana, Arial',
                axisLabelPadding: 3,
                tickFormatter: function (v, axis) {
                    return v + "%";
                }
            },
            grid: {
                clickable: true,
                hoverable: true,
                borderWidth: 2,
                backgroundColor: { colors: ["#ffffff", "#EDF5FF"] },
                markings: [ { xaxis: { from: -1, to: 12 }, yaxis: { from: 100, to: 300 }, color: "#FFA5A5" }]
            }
        });
            $("#group-flot-placeholder").UseTooltip();

            $("#group-flot-placeholder").bind("plotclick", function (event, pos, item) {
            if (item) {
                $("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label);
                plot.highlight(item.series, item.datapoint); //Output here is: - click point 0(0 being the position of the first bar) in Percentage Hours
            }
        });

        });

What am I doing wrong and how can I make it so that when a specific bar is clicked, I can pull data from my database to another bar graph underneath for that specific bar?

Answer 1

You don't say what <?php echo json_encode($dataset1); ?> <?php echo json_encode($dataset1); ?> resolves to, but it should be in the form of:

var ticks = [[0,"A"],[1,"B"],[2,"C"],[3,"D"],[4,"E"],[5,"F"],[6,"G"],[7,"H"],[8,"I"]];

So, in your click callback:

$("#group-flot-placeholder").bind("plotclick", function (event, pos, item) {
    if (item) {
        var tickClicked = item.series.xaxis.ticks[item.dataIndex].label;         
        $("#clickdata").text(tickClicked);
    }
});

Here's a fiddle demonstration .