Click here to Skip to main content
15,672,129 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Here is a link of a bar chart plugin :

jchart JQuery plugin demos[^].

But the problem is that i want to make all the bars link and if user click on that it will redirect the user on given link in that particular bar . but i am not able to do it 'please help me thanks in advance

here is the code
<div class="BodyGC">

    <div id="Div1" data-sort="true" data-width="300" class="jChart chart-sm" name="">
    <div class="define-chart-row"  data-color="#009182" title="1">13</div>
    <div class="define-chart-row" 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>

    $(document).ready(function () {

[Edit member="Tadit"]
Link text added to reflect the Article/QA title.
Corrected formatting and grammatical issues.
Added pre tags.

1 solution

Yes, after some research and tries, I was able to add the click functionality.


You need to attach the click event for all the bars inside that main container div. The code for that is...
$('#Div1 .bar').click(function () {
    // Do whatever you want to do. Write your Redirect code here.


[Demo] Click Functionality for a jQuery Chart[^]
Share this answer
ashwnai kumar pandey 8-Jul-14 4:46am    
what if i want to redirect on another page in new tab .
$('#Div1 .bar').click(function () {
alert($(this).attr('data-original-title')); // Do whatever you want to do. Write your Redirect code here.
window.location.href = "";

like in code above i can redirect user on link
but i want to give diffrent url for each bar
like you are showing data-title ,i want something like data-url
Yeah. Then just add that "data-url" attribute and get that attribute inside the click function and redirect.
ashwnai kumar pandey 10-Jul-14 6:36am    
i have given data-url as
<div class="define-chart-row " data-url="" data-color="#dfdfdf" title="1">13</div>

and then
$('#bar_of_pies .bar').click(function () {

window.location.href = attr(data-url);
but not redirecting .

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900