Skip to content

C
CurvedLines
Switch branch/tag
Find file
Normal viewHistoryPermalink
exampleHelperPoints.html 1.99 KB
Newer Older
Ken Irwin's avatar
added example html files
d60f9303
 
Ken Irwin committed
1 2 3 4 5 6 7 8 9 10 11 
<html>
<head>
<title>Demonstration of how CurvedLines creates additional 'Helper Points' to plot line | CurvedLines</title>
<style>
.chart-style {
    width: 600px;
    height: 260px;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Michael Zinsmaier's avatar
changed the examples to depend on online scripts. Before it was a mixture of offline and online.
2fb652f8
 
Michael Zinsmaier committed
12 13 
<script type="text/javascript" src="https://cdn.rawgit.com/flot/flot/v0.8.3/jquery.flot.js"></script>
<script type="text/javascript" src="https://rawgit.com/MichaelZinsmaier/CurvedLines/master/curvedLines.js"></script>
Ken Irwin's avatar
added example html files
d60f9303
 
Ken Irwin committed
14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 

<script type="text/javascript">
$(function() {
//random data
var d1 = []; var last = 0;
for (var i = 0; i <= 40; i += (2 + parseInt(Math.random() * 5))) {
    last = last + ((Math.random() * 3) - 1.5)
    d1.push([i, parseInt(last)]);
}

//flot options
var options = {
                 series: {
                     curvedLines: {
                                   active: true,
                                   nrSplinePoints: 20 // <- control nr of helper points
                     }                                // between two poins
                 }
              };
//plotting
$.plot($("#flotContainer"),[
    { //curved line
        data: d1,
        lines: {show: true, lineWidth: 3},
        curvedLines: {apply: true } // <- curve line
    }, { //original data points
        data: d1,
        points: {show: true}
    }      
], options);

$.plot($("#flotContainer2"),[
    { // <- helper points that are used to curve the lines
        data: d1,
        color: '#CC0000',
        points: {show: true},
        curvedLines: {apply: true}  //<- "curve" points
     }        
], options);
});
</script>


</head>

<h3>Demonstration of how CurvedLines creates additional 'Helper Points' to plot line</h3>
<body>

<h4>CurvedLines: random data points </h4>
<div id="flotContainer" class="chart-style"></div>

<h4>CurvedLines: internally created helper points</h4>
<div id="flotContainer2" class="chart-style"></div>
<a href="index.html">Return to CurvedLines Examples list</a>

</body>
</html>