source: appstream-generator/contrib/setup/js_tmp/Flot/examples/series-errorbars/index.html @ 4841

Last change on this file since 4841 was 4841, checked in by Juanma, 2 years ago

Initial release

File size: 3.5 KB
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5        <title>Flot Examples: Error Bars</title>
6        <link href="../examples.css" rel="stylesheet" type="text/css">
7        <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
8        <script language="javascript" type="text/javascript" src="../../jquery.js"></script>
9        <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
10        <script language="javascript" type="text/javascript" src="../../jquery.flot.errorbars.js"></script>
11        <script language="javascript" type="text/javascript" src="../../jquery.flot.navigate.js"></script>
12        <script type="text/javascript">
13
14        $(function() {
15
16                function drawArrow(ctx, x, y, radius){
17                        ctx.beginPath();
18                        ctx.moveTo(x + radius, y + radius);
19                        ctx.lineTo(x, y);
20                        ctx.lineTo(x - radius, y + radius);
21                        ctx.stroke();
22                }
23
24                function drawSemiCircle(ctx, x, y, radius){
25                        ctx.beginPath();
26                        ctx.arc(x, y, radius, 0, Math.PI, false);
27                        ctx.moveTo(x - radius, y);
28                        ctx.lineTo(x + radius, y);
29                        ctx.stroke();
30                }
31
32                var data1 = [
33                        [1,1,.5,.1,.3],
34                        [2,2,.3,.5,.2],
35                        [3,3,.9,.5,.2],
36                        [1.5,-.05,.5,.1,.3],
37                        [3.15,1.,.5,.1,.3],
38                        [2.5,-1.,.5,.1,.3]
39                ];
40
41                var data1_points = {
42                        show: true,
43                        radius: 5,
44                        fillColor: "blue", 
45                        errorbars: "xy", 
46                        xerr: {show: true, asymmetric: true, upperCap: "-", lowerCap: "-"}, 
47                        yerr: {show: true, color: "red", upperCap: "-"}
48                };
49
50                var data2 = [
51                        [.7,3,.2,.4],
52                        [1.5,2.2,.3,.4],
53                        [2.3,1,.5,.2]
54                ];
55
56                var data2_points = {
57                        show: true,
58                        radius: 5,
59                        errorbars: "y", 
60                        yerr: {show:true, asymmetric:true, upperCap: drawArrow, lowerCap: drawSemiCircle}
61                };
62
63                var data3 = [
64                        [1,2,.4],
65                        [2,0.5,.3],
66                        [2.7,2,.5]
67                ];
68
69                var data3_points = {
70                        //do not show points
71                        radius: 0,
72                        errorbars: "y", 
73                        yerr: {show:true, upperCap: "-", lowerCap: "-", radius: 5}
74                };
75
76                var data4 = [
77                        [1.3, 1],
78                        [1.75, 2.5],
79                        [2.5, 0.5]
80                ];
81
82                var data4_errors = [0.1, 0.4, 0.2];
83                for (var i = 0; i < data4.length; i++) {
84                        data4_errors[i] = data4[i].concat(data4_errors[i])
85                }
86
87                var data = [
88                        {color: "blue", points: data1_points, data: data1, label: "data1"}, 
89                        {color: "red",  points: data2_points, data: data2, label: "data2"},
90                        {color: "green", lines: {show: true}, points: data3_points, data: data3, label: "data3"},
91                        // bars with errors
92                        {color: "orange", bars: {show: true, align: "center", barWidth: 0.25}, data: data4, label: "data4"},
93                        {color: "orange", points: data3_points, data: data4_errors}
94                ];
95
96                $.plot($("#placeholder"), data , {
97                        legend: {
98                                position: "sw",
99                                show: true
100                        },
101                        series: {
102                                lines: {
103                                        show: false
104                                }
105                        },
106                        xaxis: {
107                                min: 0.6,
108                                max: 3.1
109                        },
110                        yaxis: {
111                                min: 0,
112                                max: 3.5
113                        },
114                        zoom: {
115                                interactive: true
116                        },
117                        pan: {
118                                interactive: true
119                        }
120                });
121
122                // Add the Flot version string to the footer
123
124                $("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
125        });
126
127        </script>
128</head>
129<body>
130
131        <div id="header">
132                <h2>Error Bars</h2>
133        </div>
134
135        <div id="content">
136
137                <div class="demo-container">
138                        <div id="placeholder" class="demo-placeholder"></div>
139                </div>
140
141                <p>With the errorbars plugin you can plot error bars to show standard deviation and other useful statistical properties.</p>
142
143        </div>
144
145        <div id="footer">
146                Copyright &copy; 2007 - 2014 IOLA and Ole Laursen
147        </div>
148
149</body>
150</html>
Note: See TracBrowser for help on using the repository browser.