JavaScript jqplot how to make bar graph clickable that links to another page ggplot make graph bigger,ggplot make line graph,make bar

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

I was wondering what the difference is between ColdFusion's built-in AJAX functionality and using a JS framework like JQuery? It seems that ColdFusion ships with tags that can do fancy Javascript ...

I was wondering what the difference is between ColdFusion's built-in AJAX functionality and using a JS framework like JQuery? It seems that ColdFusion ships with tags that can do fancy Javascript ...

Please help me to adjust an existing script to replace COMMA with DOT. I use a script which limit the inserting character into Text fields. Only 1,2,3,4,5,6,7,8,9,0 and "." and "," are accepted to be ...

Please help me to adjust an existing script to replace COMMA with DOT. I use a script which limit the inserting character into Text fields. Only 1,2,3,4,5,6,7,8,9,0 and "." and "," are accepted to be ...

I'm starter. I have an idea. I want to implement an event like this. Is it possible? <html> <head> <title>First visit event</title> <script> function do_something() { ...

I'm starter. I have an idea. I want to implement an event like this. Is it possible? <html> <head> <title>First visit event</title> <script> function do_something() { ...

Facebook React can use a unidirectional data flow pattern called Flux to give structure to applications by using Views, Actions, Stores and a Dispatcher. I have found the following Flux libraries for ...

Facebook React can use a unidirectional data flow pattern called Flux to give structure to applications by using Views, Actions, Stores and a Dispatcher. I have found the following Flux libraries for ...