[Demo] Click Functionality for a jQuery Chart

[Demo] Click Functionality for a jQuery Chart

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://www.jqueryscript.net/demo/Simple-Bar-Chart-Plugin-with-jQuery-Bootstrap-jchart/main.css">
<h2>Click on the Bars to Popup its Value</h2>

<div class="BodyGC">
    <div id="Div1" data-sort="true" data-width="300" class="jChart chart-sm" name="">
        <div class="define-chart-row" data-clicker="http://google.com" data-color="#009182" title="1">13</div>
        <div class="define-chart-row" data-clicker="http://facebook.com" data-color="#009182" title="2">24</div>
        <div class="define-chart-row" data-color="#AFCD14" title="3">17</div>
        <div class="define-chart-row" data-color="#AFCD14" title="4">10</div>
        <div class="define-chart-row" data-color="#AFCD14" title="5">12</div>
        <div class="define-chart-row" data-color="#009182" title="6">8</div>
        <div class="define-chart-footer">10</div>
        <div class="define-chart-footer">20</div>
        <div class="define-chart-footer">30</div>
    </div>

JavaScript

$(document).ready(function () {
    /* replace this code in the jChart.js */
    $.fn.jChart = function (options) {
        var selector = $(this);
        var default_color = "#6b9bd6";
        var bar_height = 19;

        var settings = $.extend({
            width: 750,
            clicker: "http://wditot.in",
            name: null,
            type: "bar",
            headers: null,
            values: null,
            footers: Array(),
            sort: false,
            sort_colors: false,
            colors: Array(),
            x_label: null
        }, options);

        //Initialize some settings that can be set via HTML
        if (settings.name == null) {
            settings.name = $(this).attr("name");
        }
        if ($(this).data("sort") == true) {
            settings.sort = true;
        }
        if ($(this).data("width") != null) {
            settings.width = parseInt($(this).data("width"));
        }
        if ($(this).data("x_label") != null) {
            settings.x_label = $(this).data("x_label");
        }
        if ($(this).data("clicker") != null) {
            settings.clicker = $(this).data("clicker");
        }
        var chart_width = settings.width;
        if ($(this).hasClass("chart-sm")) {
            bar_height = 17;
        } else if ($(this).hasClass("chart-lg")) {
            bar_height = 25;
        } else if (settings.width != null) {
            chart_width = parseInt(settings.width);
        }

        checkForHTMLSettings();

        //Clear the data in the jChart div
        $(this).html("");

        //Create the html containers for the chart
        var chart_title = $("<div>", {
            class: "chart-title",
            html: settings.name
        });
        var legend_left = $("<div>", {
            class: "legend legend-left"
        });
        var x_label = $("<span>", {
            class: "chart-x-label",
            html: settings.x_label
        });

        //Calculate what the chart width...