Question

I want to create a stacked bar graph as in url below

_{(source: jpowered.com)}

I want to make hyperlink for each of the red ,violet and blue boxes.The graph is possible with jfree chart but i don’t know how to make each of the individual bars as URL so that a click on it can refresh the page.
Is it possible to do it with jfree chart?

Does Jquery plot help in this case to make each box url enabled ?Please suggest.

Answer 1

I know that you can achieve something like this in jqPlot without much trouble.
The only think you need to remember, after you create your plot, is to bind your function to jqplotDataClick event. In your function you would need to map your clicks to a structure of urls. I have presented this in a sample example, where only the first series’ bars take you to some websites. The sample is on jsfiddle — it could be found here.

Effectively all comes down to this piece of code:

  var urls = ["www.yahoo.com", "www.google.com", "www.java.com", "www.w3schools.com/js/js_obj_date.asp"];
  $('#chart').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) {
      if(seriesIndex === 0){
          var url = urls[pointIndex];
          window.open("http://"+url);
      }
  });

EDIT

I do not know an easy way, i.e. that wouldn’t involve changing the script of jqPlot, of identifying the clicked bar by highlighting its background. Though I figured out a way to get a similar effect by coloring background of point labels which are on bars, the code would also need to be in the jqplotDataClicked, something like:

var prevClicked;
var prevBackgroundColor;
$('#chart').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) {
    var str = ".jqplot-point-label.jqplot-series-"+seriesIndex+".jqplot-point-"+pointIndex;
    $(str).each(function(){
        if(prevClicked)
            $(prevClicked).css('background-color', prevBackgroundColor);
        prevClicked = this;
        prevBackgroundColor = $(prevClicked).css('background-color');
        $(prevClicked).css('background-color', 'red');
    });
});

You just find the clicked point label using jQuery and apply your style, e.g. changing background color, remembering the previous label so you can remove its color to previous state on click on another bar. First I tried using addClass/removeClass functions but it didn’t change a label’s style, thus I had to use the css function instead.