带有Codeigniter的浮标“工具提示”图

Question

I am using flot bar graph with my codeigniter project.

The way my graph works is I count the number of users joined by month and then I echo count to the view by $data .

Question: When I hover over each bar I would like to be able to have a bootstrap tool tip show with count belonging to that month if that is possible.

Script On welcome_message view

<script type="text/javascript">
    var bar_data = {
        data: [
            ["January", <?php echo $count_jan;?>], 
            ["February", <?php echo $count_feb;?>], 
            ["March", <?php echo $count_mar;?>], 
            ["April", <?php echo $count_apr;?>], 
            ["May", <?php echo $count_may;?>], 
            ["June", <?php echo $count_jun;?>], 
            ["July", <?php echo $count_july;?>],
            ["August", <?php echo $count_aug;?>],
            ["September", <?php echo $count_sept;?>],
            ["October", <?php echo $count_oct;?>],
            ["November", <?php echo $count_nov;?>],
            ["December", <?php echo $count_dec;?>]  
        ],

        color: "#3c8dbc"
    };

    $.plot("#bar-chart", [bar_data], {
        grid: {
            borderWidth: 1,
            borderColor: "#f3f3f3",
            tickColor: "#f3f3f3"
        },
        points: {
            show: true
        },
        series: {
            bars: {
                show: true,
                fill: true,
                barWidth: 0.4,
                align: "center"
            }
        },
        xaxis: {
            mode: "categories",
            tickLength: 0
        }
    });
</script>

Example

public function count_jan() {
    $this->db->where('month_joined_up', 'January');
    $query = $this->db->get('user');

    if ($query->num_rows() > 0) {
        return $query->num_rows();
    } else {
        return 0;
    }
}

Controller

<?php

    defined('BASEPATH') OR exit('No direct script access allowed');

    class Welcome extends CI_Controller {

        public function index()
        {
            $data['count_jan'] = $this->count_jan();    
            $this->load->view('welcome_message', $data);
        }

        public function count_jan() {
            $this->db->where('month_joined_up', 'January');
            $query = $this->db->get('user');

            if ($query->num_rows() > 0) {
                return $query->num_rows();
            } else {
                return 0;
            }
        }
    }

Answer 1

The easiest way to do this is to add the Flot Tooltip Plugin to your page and add this to your options object:

grid: {
    hoverable: true,
    ...
},
tooltip: {
    show: true,
    content: '%y new users in %x',
    cssClass: 'name of the class you want to use for the tooltip' // optional
}

Answer 2

Thanks for @Raidri for giving me a idea on tool tips for my flot bar graph I now got it working with code below

<script type="text/javascript">
$( document ).ready(function() {
$('#bar-chart').bind('plothover', function(event, pos, item) {
$('.tooltip').remove();

if (item) {
$('<div id="tooltip" class="tooltip top in"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + item.datapoint[1].toFixed(2) + '</div></div>').prependTo('body');

$('#tooltip').css({
position: 'absolute',
left: item.pageX - ($('#tooltip').outerWidth() / 2),
top: item.pageY - $('#tooltip').outerHeight(),
pointer: 'cusror'
}).fadeIn('slow');  

$('#bar-chart').css('cursor', 'pointer');       
} else {
$('#bar-chart').css('cursor', 'auto');
}
});
});
</script>