|
|
### 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 datavar 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 optionsvar 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);
|