Enter 2 series to fill between:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | $(document).ready( function (){ var l0 = [6, 11, 10, 13, 11, 7]; var l1 = [3, 6, 7, 7, 5, 3]; var l2 = [4, 8, 9, 10, 8, 6]; var l3 = [9, 13, 14, 16, 17, 19]; var l4 = [15, 17, 16, 18, 13, 11]; var plot1 = $.jqplot( "chart1" , [l0, l1, l2, l3, l4], { title: "Fill between 2 lines" , axesDefaults: { pad: 1.05 }, ////// // Use the fillBetween option to control fill between two // lines on a plot. ////// fillBetween: { // series1: Required, if missing won't fill. series1: 1, // series2: Required, if missing won't fill. series2: 3, // color: Optional, defaults to fillColor of series1. color: "rgba(227, 167, 111, 0.7)" , // baseSeries: Optional. Put fill on a layer below this series // index. Defaults to 0 (first series). If an index higher than 0 is // used, fill will hide series below it. baseSeries: 0, // fill: Optional, defaults to true. False to turn off fill. fill: true }, seriesDefaults: { rendererOptions: { ////// // Turn on line smoothing. By default, a constrained cubic spline // interpolation algorithm is used which will not overshoot or // undershoot any data points. ////// smooth: true } } }); // bind a function to the change button to update the plot's fillBetween series // and replot(). $( "button[name=changeFill]" ).click( function (e) { plot1.fillBetween.series1 = parseInt($( "input[name=series1]" ).val()); plot1.fillBetween.series2 = parseInt($( "input[name=series2]" ).val()); plot1.replot(); }); }); |
The charts on this page depend on the following files:
< script type = "text/javascript" src = "../jquery.min.js" ></ script > < script type = "text/javascript" src = "../jquery.jqplot.min.js" ></ script > < link rel = "stylesheet" type = "text/css" hrf = "../jquery.jqplot.min.css" /> |