Add 2nd series to a plot after click on the first's data points.

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.dateAxisRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.highlighter.min.js"></script>
<div id="chart">

</div>
<button id="click">Oi switch</button>

CSS

#chart {
  width: 100%;
  height: 100%;
}

//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...

JavaScript

jQuery(document).ready(function() {
  var line1 = [
    [1, 1],
    [2, 5],
    [4, 9]
  ];
  var options = {
    axisDefault: {
      autoscale: true
    },
    highlighter: {
      show: true
    }
  };
  var graph = $.jqplot("chart", [line1, []], options);

  //the method's details https://bitbucket.org/cleonello/jqplot/issue/53/click-event-for-data-points
  function serveDataClick(ev, gridpos, datapos, neighbor, plot) {
    if (neighbor) {
      //act only on clicks of the first series
      if (neighbor.seriesIndex == 0) {
        var x = neighbor.data[0];
        var y = neighbor.data[1];
        console.log("data point clicked x=" + x + "  y =" + y);
        //maybe in this case (to avoid one graph being painted over another) we should use this
        graph.destroy();
        graph = $.jqplot("chart", [line1, [
          [y, 3],
          [4, 6],
          [7, x]
        ]], options);
        //we could use one of the below to remove the effect of one plot being painted over another
        //graph.replot();//redraw() will do as well
        //rebind the event
        $("#chart").bind('jqplotClick', serveDataClick);
      }
    }
  }
  $("#chart").bind('jqplotClick', serveDataClick);
});