Get id and index of a tab under which a selected chart is.

by Boro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.pieRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css" rel="stylesheet" />

<button id="whereIsMyPlot">Where is my plot?</button>
<select id="chartSelection">
  <option>chart1</option>
  <option selected>chart2</option>
</select>
<input id="output" type="text" style="width:200px" />

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
  </ul>
  <div id="tabs-1">
    Tabs 2 and 3 have plots. Since tabs 2 and 3 are initially inactive, their contents (and the plots) are initially hidden.
  </div>

  <div id="tabs-2">
    <p>This plot was in an initially hidden container. It's hieght and width are set by the "data-height" and "data-width" properties of the plot container.</p>
    <div id="chart1" data-height="260px" data-width="480px" style="margin-top:20px; margin-left:20px;"></div>
  </div>

  <div id="tabs-3">
    <p>This plot is in an initially hidden container. It's height and width are set by the 'height' and 'width' properties of the options object passed into the plot constructor.</p>
    <div id="chart2" style="margin-top:20px; margin-left:20px;"></div>
  </div>

</div>

CSS

//jquery.jqplot.css

/*rules for the plot target div.  These will be cascaded down to all plot elements according to css rules*/

.jqplot-target {
  position: relative;
  color: #666666;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 1em;
  /*    height: 300px;
    width: 400px;*/
}


/*rules applied to all axes*/

.jqplot-axis {
  font-size: 0.75em;
}

.jqplot-xaxis {
  margin-top: 10px;
}

.jqplot-x2axis {
  margin-bottom: 10px;
}

.jqplot-yaxis {
  margin-right: 10px;
}

.jqplot-y2axis,
.jqplot-y3axis,
.jqplot-y4axis,
.jqplot-y5axis,
.jqplot-y6axis,
.jqplot-y7axis,
.jqplot-y8axis,
.jqplot-y9axis,
.jqplot-yMidAxis {
  margin-left: 10px;
  margin-right: 10px;
}


/*rules applied to all axis tick divs*/

.jqplot-axis-tick,
.jqplot-xaxis-tick,
.jqplot-yaxis-tick,
.jqplot-x2axis-tick,
.jqplot-y2axis-tick,
.jqplot-y3axis-tick,
.jqplot-y4axis-tick,
.jqplot-y5axis-tick,
.jqplot-y6axis-tick,
.jqplot-y7axis-tick,
.jqplot-y8axis-tick,
.jqplot-y9axis-tick,
.jqplot-yMidAxis-tick {
  position: absolute;
  white-space: pre;
}

.jqplot-xaxis-tick {
  top: 0px;
  /* initial position untill tick is drawn in proper place */
  left: 15px;
  /*    padding-top: 10px;*/
  vertical-align: top;
}

.jqplot-x2axis-tick {
  bottom: 0px;
  /* initial position untill tick is drawn in proper place */
  left: 15px;
  /*    padding-bottom: 10px;*/
  vertical-align: bottom;
}

.jqplot-yaxis-tick {
  right: 0px;
  /* initial position untill tick is drawn in proper place */
  top: 15px;
  /*    padding-right: 10px;*/
  text-align: right;
}

.jqplot-yaxis-tick.jqplot-breakTick {
  right: -20px;
  margin-right: 0px;
  padding: 1px 5px 1px 5px;
  /*    background-color: white;*/
  z-index: 2;
  font-size: 1.5em;
}

.jqplot-y2axis-tick,
.jqplot-y3axis-tick,
.jqplot-y4axis-tick,
.jqplot-y5axis-tick,
.jqplot-y6axis-tick,
.jqplot-y7axis-tick,
.jqplot-y8axis-tick,
.jqplot-y9axis-tick {
  left: 0px;
  /* initial position untill tick is drawn in proper place */
  top: 15px;
  /*...

JavaScript

$(document).ready(function() {
  var l1 = [18, 36, 14, 11];
  var l2 = [
    [2, 14],
    [7, 2],
    [8, 5]
  ];
  var l3 = [4, 7, 9, 2, 11, 5, 9, 13, 8, 7];
  var l4 = [
    ['peech', 3],
    ['cabbage', 2],
    ['bean', 4],
    ['orange', 5]
  ];

  $("#tabs").tabs();

  var plot1 = $.jqplot('chart1', [l1, l2, l3], {
    series: [{}, {
      yaxis: 'y2axis'
    }, {
      yaxis: 'y3axis'
    }]
  });

  var plot2 = $.jqplot('chart2', [l4], {
    series: [{
      renderer: $.jqplot.PieRenderer
    }],
    legend: {
      show: true
    }
  });

  $('#tabs').bind('tabsshow', function(event, ui) {
    if (ui.index === 1 && plot1._drawCount === 0) {
      plot1.replot();
    } else if (ui.index === 2 && plot2._drawCount === 0) {
      plot2.replot();
    }
  });


  $("#whereIsMyPlot").click(function() {
    var chartId = $("#chartSelection").val();
    var tabId = $("#" + chartId).parent().attr('id');
    var tabIndex = -1;
    $("#tabs ul li").each(function(index) {
      if ('#' + tabId === $(this).find("a").attr('href')) {
        tabIndex = index;
        return false;
      }
    });
    $("#output").val("Tab id: " + tabId + "; index: " + tabIndex);
  });
});