Charting Select Area data with Appending/Overwriting

[MT_MANC]

On a web form my users choose different variables to "shock" (ie change relative to a starting base)
over different periods:
eg user "shocks" US interest rates 0.50% points above base during 201202-201304 (ie 2012 Quarter2-2013 Quarter4)
User may then add another "shock" to same variable:
US interest rates .75 % points above base during 201301-201404 (ie 2013 Quarter1-2014 Quarter4)
User may then add "shock" to different variable:
JAPAN interest rates (RSH_j) 1.00 % points above base during 201201-201404 (ie 2012 Quarter1-2014 Quarter4)

I have generated a Select area (ShockVarPlot) that concatenates the required component data from DD boxes for charting:

RSH_u,201202-201304,+0.50
RSH_u,201301-201404,+0.75
RSH_j,201301-201404,+1.00

(NB each line of the above Select box is formed after the "Add Shock" button is clicked, so this is the obvious
event to trigger the Chart Plot too)

For EACH particular variable being shocked (eg RSH_u, RSH_j) I would like to instantly plot the entire profile of each
shock. Subsequent shocks to the SAME variable may simply
append to earlier shocks or may (partially) overwrite depending if the time period chosen overlaps.
But once a NEW shock variable is chosen (eg RSH_j) , the previous plot (of RSH_u) simple gets overwritten in the common plot area.
The x-axis scale width can be hard-coded; say 201004-202104.

Charting Requirement (for common plot area) ----
"Add Shock" button=> First Plot - Plot RSH_u +0.50 above base over 201202-201304.......
"Add Shock" button=> ....then (partially) overwrite/append with +0.75 over 201301-201404
"Add Shock" button=> Second Plot - Delete above plot & Plot RSH_j +1.00 above base over 201301-201404

Chartplot needs to display the variable legend being charted eg "RSH_u"or "RSH_j"

Logic Requirement ----
If new shock => plot this magnitude over selected period within 201001-202104
If new shock (same variable) => plot this as above but this shock overwrites previous if any time-period overlap
If new shock (new variable) => delete first plot & plot this magnitude over selected period within 201001-202104

Question --------------
Is there a simple Javascript method to achieve this real-time plotting/appending on clicking "Add Shock" ?
I have seen things like FLOT charting but not sure how to read/chart my Listbox output in ShockVarPlot above

Any thoughts ?

[MT_MANC]

Made some progress using FLOT but cannot get x-axis to plot correctly

Browser - IE8
FLOT - Javascript plotting library for jQuery, v. 0.6.

I need to plot a "shock" to a variable (peturbation from a base) generated from user-selected DD boxes: "ShockVarTitle", "ShockSizeDescMin", "ShockStart", "ShockEnd"
eg user may choose to shock variable "RSH_u" by +0.50 over 201201-201404
from a maximum possible 201101-202104 span (quarterly data)
On clicking "Add Shock" button the code below invokes ShockVarPlotChartThis(); which display "RSH_u" legend & the +0.50 "shock" shows on y-axis with a min y-axis value of 0.
But x-axis will only plot the "ShockStart" in the centre of the x-axis - I need a line plot of +0.50 over 201201-201401 with all other plot values of zero over 201101-202104 (ie hard-Coded x-axis Plot parameters: XaxisPlotMin: 201101 & XaxisPlotMax: 202104)

How can I ensure this sub-plot (201201-201404) displays within a total displayed x-axis width of 201101-202104 ?

THEN --------
The user may then add another shock for the SAME variable (eg RSH_u) which may append or overlap the first shock (eg RSH_u,+0.75,201304-202104); the latest shock should always take precedent in plotting ie overwrite the former shock where time period overlaps.
OR ----------
User may specify shock for a NEW variable (eg RSH_j) over a sub-period or full period. So old shock should remain on plot and RSH_j shcok(s) appear as a different colour lineplot.

Any thoughts on completing the function below to achieve the above?

CURRENT FLOT CODE (PARTIALLY WORKING) ------------------------

Code: Select all

<script type="text/javascript">

// Data to plot from user selected DD boxes elsewhere on Form; here hard-coded as vars
var document.form1TOP.ShockVarTitle.value = RSH_u ;
var document.form1TOP.ShockStart.value = 201201 ;
var document.form1TOP.ShockEnd.value = 201404 ;
var document.form1TOP.ShockSizeDescMin.value = +0.50 ;


function ShockVarPlotChartThis(){
var xVal = document.form1TOP.ShockStart.value;
var yVal1 = document.form1TOP.ShockSizeDescMin.value ;
var series1 = { color: "#6600CC", label: document.form1TOP.ShockVarTitle.value, data: [] };
var data = [ series1 ];
var options = { legend: { show: true, position: "se" }, grid: { color: "#6600CC", borderColor: "#6600CC" },
             xaxis: {tickDecimals: "2"}, yaxis: {tickDecimals: "2", min: 0}
            };
var plot = $.plot($("#ShockVarPlotChart"), data, options);
               var datum1 = [xVal, yVal1];
               var xVal = document.form1TOP.ShockEnd.value;
               data[0].data.push(datum1);
               if(data[0].data.length>50){
                  // only allow 50 points
                  data[0].data = data[0].data.splice(1);
               }
               xVal++;
               plot.setData(data); plot.setupGrid(); plot.draw();
            }
      </script>