Subversion-Projekte lars-tiefland.cienc

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
9 lars 1 
<!DOCTYPE html>
2 
 
3 
<html>
4 
<head>
5 
 
6 
    <title>Bezier Curve Plots</title>
7 
 
8 
    <link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" />
9 
    <link rel="stylesheet" type="text/css" href="examples.min.css" />
10 
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" />
11 
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" />
12 
 
13 
    <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
14 
    <script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
15 
 
16 
 
17 
</head>
18 
<body>
19 
    <div id="header">
20 
        <div class="nav">
21 
            <a class="nav" href="../../../index.php"><span>&gt;</span>Home</a>
22 
            <a class="nav"  href="../../../docs/"><span>&gt;</span>Docs</a>
23 
            <a class="nav"  href="../../download/"><span>&gt;</span>Download</a>
24 
            <a class="nav" href="../../../info.php"><span>&gt;</span>Info</a>
25 
            <a class="nav"  href="../../../donate.php"><span>&gt;</span>Donate</a>
26 
        </div>
27 
    </div>
28 
    <div class="colmask leftmenu">
29 
      <div class="colleft">
30 
        <div class="col1" id="example-content">
31 
 
32 
 
33 
<!-- Example scripts go here -->
34 
 
35 
 <p>The Bezier curve renderer can distinguish between two different input data formats.  This first example has the data passed in as 2 data points, the second one defining the Bezier curve to the end point.  With this format, non-default axes renderers will require specifying the minimum and maximum on the axes.</p>
36 
<pre>
37 
    [[xstart, ystart], [cp1x, cp1y, cp2x, cp2y, xend, yend]];
38 
</pre>
39 
<div id="chart1" class='plot' style="margin-top:20px; margin-left:20px; width:400px; height:300px;"></div>
40 
<p>This second example has the data broken out into 4 points, which will be assembled to define the Bezier Curve.  With this format, any axes renderer can be used without explicitly specifying the minimum and maximum.</p>
41 
<pre>
42 
    [[xstart, ystart], [cp1x, cp1y], [cp2x, cp2y], [xend, yend]];
43 
</pre>
44 
<div id="chart2" class='plot' style="margin-top:20px; margin-left:20px; width:400px; height:300px;"></div>
45 
<p> Here is an example using a date axis renderer with Bezier curves.  The data looks like:</p>
46 
<pre>
47 
    [['01/01/2010', 6], ['02/01/2010', 9], ['03/01/2010', 8], ['04/01/2010', 3]]
48 
</pre>
49 
 
50 
<div id="chart3" class='plot' style="margin-top:20px; margin-left:20px; width:400px; height:300px;"></div>
51 
 
52 
<script class="code" type="text/javascript">
53 
$(document).ready(function(){
54 
 
55 
    var line1 = [[0, 1], [2, 2, 4, .5, 6, 0]];
56 
    var line2 = [[0, 5], [2, 6, 5, 1, 6, .5]];
57 
    var line3 = [[0, 6], [3, 9, 4, 8, 6, 3]];
58 
    var line4 = [[0, 7], [2, 9, 4, 8, 6, 6]];
59 
    var line5 = [[0, 8], [3, 9, 4, 8, 6, 8]];
60 
 
61 
    plot1 = $.jqplot("chart1", [line1,line2, line3, line4, line5], {
62 
           seriesDefaults: {renderer:$.jqplot.BezierCurveRenderer},
63 
           legend:{show:true}
64 
    });
65 
});
66 
</script>
67 
 
68 
<script class="code" type="text/javascript">
69 
$(document).ready(function(){
70 
 
71 
    var s1 = [[0, 1], [2, 2], [4, .5], [6, 0]];
72 
    var s2 = [[0, 5], [2, 6], [5, 1], [6, .5]];
73 
    var s3 = [[0, 6], [3, 9], [4, 8], [6, 3]];
74 
    var s4 = [[0, 7], [2, 9], [4, 8], [6, 6]];
75 
    var s5 = [[0, 8], [3, 9], [4, 8], [6, 8]];
76 
 
77 
    plot2 = $.jqplot("chart2", [s1,s2, s3, s4, s5], {
78 
           seriesDefaults: {renderer:$.jqplot.BezierCurveRenderer},
79 
           legend:{show:true}
80 
    });
81 
});
82 
</script>
83 
 
84 
<script class="code" type="text/javascript">
85 
$(document).ready(function(){
86 
 
87 
    var s1 = [['01/01/2010', 1], ['02/01/2010', 2], ['03/01/2010', .5], ['04/01/2010', 0]];
88 
    var s2 = [['01/01/2010', 5], ['02/01/2010', 6], ['03/01/2010', 1], ['04/01/2010', .5]];
89 
    var s3 = [['01/01/2010', 6], ['02/01/2010', 9], ['03/01/2010', 8], ['04/01/2010', 3]];
90 
    var s4 = [['01/01/2010', 7], ['02/01/2010', 9], ['03/01/2010', 8], ['04/01/2010', 6]];
91 
    var s5 = [['01/01/2010', 8], ['02/01/2010', 9], ['03/01/2010', 8], ['04/01/2010', 8]];
92 
 
93 
    plot3 = $.jqplot("chart3", [s1,s2, s3, s4, s5], {
94 
           seriesDefaults: {renderer:$.jqplot.BezierCurveRenderer},
95 
           axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer, numberTicks:4}},
96 
           legend:{show:true}
97 
    });
98 
});
99 
</script>
100 
 
101 
<!-- End example scripts -->
102 
 
103 
<!-- Don't touch this! -->
104 
 
105 
 
106 
    <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
107 
    <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
108 
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
109 
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
110 
<!-- Additional plugins go here -->
111 
 
112 
  <script class="include" type="text/javascript" src="../plugins/jqplot.BezierCurveRenderer.min.js"></script>
113 
  <script class="include" type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.min.js"></script>
114 
 
115 
<!-- End additional plugins -->
116 
 
117 
        </div>
118 
         <div class="col2">
119 
 
120 
           <div class="example-link"><a class="example-link" href="data-renderers.html">AJAX and JSON Data Loading via Data Renderers</a></div>
121 
           <div class="example-link"><a class="example-link" href="barLineAnimated.html">Animated Charts</a></div>
122 
           <div class="example-link"><a class="example-link" href="dashboardWidget.html">Animated Dashboard Sample - Filled Line with Log Axis</a></div>
123 
           <div class="example-link"><a class="example-link" href="kcp_area.html">Area Chart</a></div>
124 
           <div class="example-link"><a class="example-link" href="kcp_area2.html">Area Chart 2</a></div>
125 
           <div class="example-link"><a class="example-link" href="axisLabelTests.html">Axis Labels</a></div>
126 
           <div class="example-link"><a class="example-link" href="axisLabelsRotatedText.html">Axis Labels and Rotated Text</a></div>
127 
           <div class="example-link"><a class="example-link" href="barTest.html">Bar Charts</a></div>
128 
           <div class="example-link"><a class="example-link" href="multipleBarColors.html">Bar Colors Example</a></div>
129 
           <div class="example-link"><a class="example-link" href="bezierCurve.html">Bezier Curve Plots</a></div>
130 
           <div class="example-link"><a class="example-link" href="blockPlot.html">Block Plots</a></div>
131 
           <div class="example-link"><a class="example-link" href="bubbleChart.html">Bubble Charts</a></div>
132 
           <div class="example-link"><a class="example-link" href="bubble-plots.html">Bubble Plots</a></div>
133 
           <div class="example-link"><a class="example-link" href="candlestick.html">Candlestick and Open Hi Low Close Charts</a></div>
134 
           <div class="example-link"><a class="example-link" href="theming.html">Chart Theming</a></div>
135 
           <div class="example-link"><a class="example-link" href="fillBetweenLines.html">Charts with Fill Between Lines</a></div>
136 
           <div class="example-link"><a class="example-link" href="kcp_cdf.html">Cumulative Density Function Chart</a></div>
137 
           <div class="example-link"><a class="example-link" href="dashedLines.html">Dashed Lines with Smoothing</a></div>
138 
           <div class="example-link"><a class="example-link" href="cursor-highlighter.html">Data Point Highlighting, Tooltips and Cursor Tracking</a></div>
139 
           <div class="example-link"><a class="example-link" href="point-labels.html">Data Point labels</a></div>
140 
           <div class="example-link"><a class="example-link" href="date-axes.html">Date Axes</a></div>
141 
           <div class="example-link"><a class="example-link" href="dateAxisRenderer.html">Date Axes 2</a></div>
142 
           <div class="example-link"><a class="example-link" href="rotatedTickLabelsZoom.html">Date Axes, Rotated Labels and Zooming</a></div>
143 
           <div class="example-link"><a class="example-link" href="canvas-overlay.html">Draw Lines on Plots - Canvas Overlay</a></div>
144 
           <div class="example-link"><a class="example-link" href="draw-rectangles.html">Draw Rectangles on Plots</a></div>
145 
           <div class="example-link"><a class="example-link" href="kcp_engel.html">Engel Curves</a></div>
146 
           <div class="example-link"><a class="example-link" href="bandedLine.html">Error Bands and Confidence Intervals</a></div>
147 
           <div class="example-link"><a class="example-link" href="area.html">Filled (Area) Charts</a></div>
148 
           <div class="example-link"><a class="example-link" href="axisScalingForceTickAt.html">Force Plot to Have Tick at 0 or 100</a></div>
149 
           <div class="example-link"><a class="example-link" href="hiddenPlotsInTabs.html">Hidden Plots</a></div>
150 
           <div class="example-link"><a class="example-link" href="customHighlighterCursorTrendline.html">Highlighting, Dragging Points, Cursor and Trend Lines</a></div>
151 
           <div class="example-link"><a class="example-link" href="line-charts.html">Line Charts and Options</a></div>
152 
           <div class="example-link"><a class="example-link" href="kcp_lorenz.html">Lorenz Curves</a></div>
153 
           <div class="example-link"><a class="example-link" href="mekkoCharts.html">Mekko Charts</a></div>
154 
           <div class="example-link"><a class="example-link" href="meterGauge.html">Meter Gauge</a></div>
155 
           <div class="example-link"><a class="example-link" href="candlestick-charts.html">Open Hi Low Close and Candlestick Charts</a></div>
156 
           <div class="example-link"><a class="example-link" href="pieTest.html">Pie Charts and Options</a></div>
157 
           <div class="example-link"><a class="example-link" href="pieTest4.html">Pie Charts and Options 2</a></div>
158 
           <div class="example-link"><a class="example-link" href="pie-donut-charts.html">Pie and Donut Charts</a></div>
159 
           <div class="example-link"><a class="example-link" href="selectorSyntax.html">Plot Creation with jQuery Selectors</a></div>
160 
           <div class="example-link"><a class="example-link" href="zooming.html">Plot Zooming and Cursor Control</a></div>
161 
           <div class="example-link"><a class="example-link" href="kcp_pdf.html">Probability Density Function Chart</a></div>
162 
           <div class="example-link"><a class="example-link" href="kcp_pyramid_by_age.html">Pyramid Chart By Age</a></div>
163 
           <div class="example-link"><a class="example-link" href="kcp_pyramid.html">Pyramid Charts</a></div>
164 
           <div class="example-link"><a class="example-link" href="kcp_pyramid2.html">Pyramid Charts 2</a></div>
165 
           <div class="example-link"><a class="example-link" href="kcp_quintiles.html">Quintile Pyramid Charts</a></div>
166 
           <div class="example-link"><a class="example-link" href="resizablePlot.html">Resizable Plots</a></div>
167 
           <div class="example-link"><a class="example-link" href="rotated-tick-labels.html">Rotated Labels and Font Styling</a></div>
168 
           <div class="example-link"><a class="example-link" href="smoothedLine.html">Smoothed Lines</a></div>
169 
           <div class="example-link"><a class="example-link" href="bar-charts.html">Vertical and Horizontal Bar Charts</a></div>
170 
           <div class="example-link"><a class="example-link" href="waterfall.html">Waterfall Charts</a></div>
171 
           <div class="example-link"><a class="example-link" href="waterfall2.html">Waterfall Charts 2</a></div>
172 
           <div class="example-link"><a class="example-link" href="zoomOptions.html">Zoom Options</a></div>
173 
           <div class="example-link"><a class="example-link" href="zoomProxy.html">Zoom Proxy - Control one plot from another</a></div>
174 
           <div class="example-link"><a class="example-link" href="zoom1.html">Zooming</a></div>
175 
           <div class="example-link"><a class="example-link" href="dateAxisLogAxisZooming.html">Zooming with Date and Log Axes</a></div>
176 
 
177 
         </div>
178 
               </div>
179 
    </div>
180 
    <script type="text/javascript" src="example.min.js"></script>
181 
 
182 
</body>
183 
 
184 
 
185 
</html>