You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

52 lines
1.4 KiB

3 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. ### html ###
  2. <h4>CurvedLines: random stacked data</h4>
  3. <div id="flotContainer" class="chart-style"></div>
  4. <h4>CurvedLines: same data connected with curved lines</h4>
  5. <div id="flotContainer2" class="chart-style"></div>
  6. ### css ###
  7. .chart-style {
  8. width: 600px;
  9. height: 260px;
  10. }
  11. ### javascript ###
  12. //random data
  13. var d1 = [];
  14. for (var i = 0; i <= 10; i += 1) {
  15. d1.push([i, parseInt(Math.random() * 30)]);
  16. }
  17. var d2 = [];
  18. for (var i = 0; i <= 10; i += 1) {
  19. d2.push([i, parseInt(Math.random() * 30)]);
  20. }
  21. var d3 = [];
  22. for (var i = 0; i <= 10; i += 1) {
  23. d3.push([i, parseInt(Math.random() * 30)]);
  24. }
  25. //flot options
  26. var options = {
  27. series: {
  28. curvedLines: {
  29. apply: true,
  30. active: true,
  31. monotonicFit: true
  32. }
  33. }
  34. };
  35. //plotting
  36. $.plot($("#flotContainer"), [
  37. {data: d1, lines: { show: true, fill: true }, stack: true },
  38. {data: d2, lines: { show: true, fill: true }, stack: true },
  39. {data: d3, lines: { show: true, fill: true }, stack: true }
  40. ], {});
  41. $.plot($("#flotContainer2"), [
  42. {data: d1, lines: { show: true, fill: true }, stack: true },
  43. {data: d2, lines: { show: true, fill: true }, stack: true },
  44. {data: d3, lines: { show: true, fill: true }, stack: true }
  45. ], options);