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.

48 lines
1.1 KiB

1 year ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. ### html ###
  2. <h4>CurvedLines with multi axis and fill</h4>
  3. <div id="flotContainer" class="chart-style"></div>
  4. ### css ###
  5. .chart-style {
  6. width: 500px;
  7. height: 300px;
  8. }
  9. ### javascript ###
  10. //data
  11. var d1 = [[20,20], [42,60], [54, 20], [80,80]];
  12. var d2 = [[20,700], [80,300]];
  13. //flot options
  14. var options = {
  15. series: {
  16. curvedLines: {active: true}
  17. },
  18. yaxes: [{ min:10, max: 90}, {position: 'right'}]
  19. };
  20. //plotting
  21. $.plot($("#flotContainer"),[
  22. {
  23. data: d1,
  24. lines: { show: true, fill: true, fillColor: "#C3C3C3", lineWidth: 3},
  25. //curve the line (old pre 1.0.0 plotting function)
  26. curvedLines: {
  27. apply: true,
  28. legacyOverride: true // <- use legacy plotting function
  29. }
  30. }, {
  31. data: d1,
  32. points: { show: true }
  33. }, {
  34. data: d2,
  35. yaxis: 2,
  36. lines: { show: true, lineWidth: 3},
  37. }, {
  38. data: d2,
  39. yaxis: 2,
  40. points: { show: true }
  41. }
  42. ], options);