Skip to content

C
CurvedLines
Switch branch/tag
Find file
Normal viewHistoryPermalink
exampleStackedData.html 1.98 KB
Newer Older
Ken Irwin's avatar
added example html files
d60f9303
 
Ken Irwin committed
1 2 3 4 5 6 7 8 9 
<html>
<head>
<title>Stacked Data Example | CurvedLines</title>
<style>
.chart-style {
    width: 600px;
    height: 260px;
}
</style>
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
10
Ken Irwin's avatar
added example html files
d60f9303
 
Ken Irwin committed
11 
<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 14 
<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/flot/flot/v0.8.3/jquery.flot.stack.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
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 

<script type="text/javascript">
$(function() {
//random data
var 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 options
var 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);
});
</script>

<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>
<a href="index.html">Return to CurvedLines Examples list</a>

</body>
</html>