### html ### <h4>CurvedLines: random stacked data</h4> <div id="flotContainer" class="chart-style"></div> <h4>CurvedLines: same data connected with curved lines</h4> <div id="flotContainer2" class="chart-style"></div> ### css ### .chart-style { width: 600px; height: 260px; } ### javascript ### //random data var d1 = []; for (var i = 0; i <= 10; i += 1) { d1.push([i, parseInt(Math.random() * 30)]); } var d2 = []; for (var i = 0; i <= 10; i += 1) { d2.push([i, parseInt(Math.random() * 30)]); } var d3 = []; for (var i = 0; i <= 10; i += 1) { d3.push([i, parseInt(Math.random() * 30)]); } //flot options var options = { series: { curvedLines: { apply: true, active: true, monotonicFit: true } } }; //plotting $.plot($("#flotContainer"), [ {data: d1, lines: { show: true, fill: true }, stack: true }, {data: d2, lines: { show: true, fill: true }, stack: true }, {data: d3, lines: { show: true, fill: true }, stack: true } ], {}); $.plot($("#flotContainer2"), [ {data: d1, lines: { show: true, fill: true }, stack: true }, {data: d2, lines: { show: true, fill: true }, stack: true }, {data: d3, lines: { show: true, fill: true }, stack: true } ], options);