UNPKG

flot.curvedlines

Version:

CurvedLines is a plugin for flot, which displays lines in a smooth curved way

82 lines (76 loc) 2.15 kB
<hmtl> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>CurvedLines Plugin for flot</title> <script language="javascript" type="text/javascript" src="../flot/jquery.min.js"></script> <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../flot/excanvas.min.js"></script><![endif]--> <script language="javascript" type="text/javascript" src="../flot/jquery.flot.min.js"></script> <script language="JavaScript" type="text/javascript" src="../curvedLines.js"></script> <script language="JavaScript" type="text/javascript" src="_TestSetup.js"></script> <link rel="stylesheet" type="text/css" href="_TestSetup.css"></link> </head> <body> <div id="placeholder" style="width: 800;height: 400;"></div> <div id="parameters" style="width: 800"></div> <script id="source" language="javascript" type="text/javascript"> $(function() { //data var d1 = [[20, 20], [42, 60], [54, 20], [80, 80]]; var d2 = [[20, 700], [80, 300]]; //general plot options var options = { series : { curvedLines : { active : true } }, yaxes : [{ min : 10, max : 90 }, { position : 'right' }] }; //curved line paramters var defaultParameters = { apply : true, legacyOverride : true } //plot function function replot(parameters) { $.plot($("#placeholder"), [{ data : d1, lines : { show : true, fill : true, fillColor : "rgba(195, 195, 195, 0.4)", lineWidth : 3 }, curvedLines : parameters }, { data : d1, points : { show : true } }, { data : d2, lines : { show : true, lineWidth : 3 }, curvedLines : parameters, yaxis : 2 }, { data : d2, points : { show : true }, yaxis : 2 }], options); }; //combine everything TestSetup($("#parameters"), defaultParameters, [replot]); }); </script> </body> </hmtl>