jqplot how to make bar graph clickable that links to another page

Question

I've tried playing around with jqplot to create bar chart that can be clicked and then will redirect user to another page together with label value as url parameters but so for no luck to make a link. This what I have done.

  $(document).ready(function() {
      $.jqplot.config.enablePlugins = true;

         var ticks = [ 'SCAN', 'SGON', 'TERM', 'TRAN'];
         var arrBranchId = ['08270K08001', '08298K08003', '12026K12003','14123K14003'];
         var plot1 = $.jqplot('chart1',[[0,0,0,1],[2,4,2,5],[0,0,0,1],[0,5,0,1]], {           
         seriesDefaults: {
                 renderer: $.jqplot.BarRenderer,
                 rendererOptions: { fillToZero: true },
                 pointLabels: { show: true }
             },

             series: [{label:'08270K08001'},{label:'08298K08003'},{label:'12026K12003'},{label:'14123K14003'}],

             legend: {
                 show: true,
                 placement: 'ne'
             },
             highlighter: {
             show: false,

             },
              cursor: {
                show: true
              },
             axes: {

                 xaxis: {
                     renderer: $.jqplot.CategoryAxisRenderer,
                     ticks: ticks
                 },

                 yaxis: {
                     renderer: $.jqplot.CategoryAxisRenderer,
                     pad: 1.05,
                     tickOptions: { formatString: '%d' }
                 }
             }
         });
     });

• How should I make a link to the bar for example localhost/webCharts/branch.aspx?branchId=08270K08001

Also tried this How to catch the click event from the axis ticks jqplot, highcharts,flot , changed the function to become

$('.jqplot-xaxis-tick').each(function(){
            var label = $(this),
                value = label.text();
            if(categoryLinks[value]) {
                label.click(function(){

                    alert('could link to another page: ' + categoryLinks[value]);
                });
            }
        });

but nothings happen when user click. Am i missing something here? Thanks in advance

Answer 1

I figured a way to make the bar clickable and link to another page by using window.location as follows

$('#chart1').bind('jqplotDataClick',function(ev, seriesIndex, pointIndex, data){
                window.location = 'branchDetails.aspx?appId='+ticks[**pointIndex**]+"&branchId="+arrBranchId[**seriesIndex**];          
        });

Noted : the array ticks[ ] and arrBranchId[ ] is already defined at $(document).ready(function() { ..... }. So I just passed the arrays with pointIndex and seriesIndex . Thank you very much everyone

Answer 2

I'm not sure if you are still looking for a solution but I found your question while researching the same problem. I just figured out how to make it work. Based on your code you should add a function something like this:

$('#Chart1').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) {
    window.parent.location.href = 'YOURURL.aspx?id=' + arrBranchId[pointIndex];
});

Hopefully this will help you or someone else.

Answer 3

Remove your each loop and use jqplot binding method, jqplotDataClick:

// replace chart1 with your div ID
$('#chart1').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
    // data contains the data point value, play with it
    // NOTE it may contain an array and not a string
    alert(data);
});

In the example above I'm using alert(data) you can use the data value to do anything else, ie redirect the user to a URL containing with the value passed as a parameter

Demo http://jsfiddle.net/fordlover49/JWhmQ/

Answer 4

You can use this code snippet to get the click event !

// Bind a listener to the "jqplotDataClick" event.  Here, simply change
  // the text of the info3 element to show what series and ponit were
  // clicked along with the data for that point.
  $('#chart3').bind('jqplotDataClick',
    function (ev, seriesIndex, pointIndex, data) {alert('clicked')
      $('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
    }
  );

Check out this demo JSFIDDLE

Answer 5

I found an easier method.. Keep it simple like this:

   $('#chart3').bind('jqplotDataClick', 
            function (ev, seriesIndex, pointIndex, data) {
                /* To open in a NEW window use: */
                /* window.open(data[2]); */
                /* To open in the same window use: */
                window.location.href='ErrorView3.php';
            }
  );