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>Dashed Lines with Smoothing</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 
  <style type="text/css">
36 
    .jqplot-target {
37 
        margin-bottom: 2em;
38 
    }
39 
 
40 
    p {
41 
        margin: 2em 0;
42 
    }
43 
  </style>
44 
 
45 
 
46 
    <div id="chart1" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>
47 
 
48 
    <div id="chart1b" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>
49 
 
50 
    <div id="chart2" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>
51 
 
52 
    <div id="chart3" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>
53 
 
54 
    <div id="chart4" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>
55 
 
56 
    <div id="chart4b" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>
57 
 
58 
    <div id="chart5" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>
59 
 
60 
  <script class="code" type="text/javascript">
61 
 
62 
    $(document).ready(function () {
63 
      s1 = [[0, 2], [1, 6], [2, 7], [3, 10]];
64 
 
65 
      // Lines can be drawn as solid, dashed or dotted with the "linePattern" option.
66 
      // The default is "solid".  Other basic options are "dashed" and "dotted".
67 
 
68 
      plot1 = $.jqplot("chart1", [s1], {
69 
        seriesDefaults:{
70 
            linePattern: 'dashed',
71 
            showMarker: false,
72 
            shadow: false
73 
        }
74 
      });
75 
    });
76 
</script>
77 
 
78 
  <script class="code" type="text/javascript">
79 
 
80 
    $(document).ready(function () {
81 
 
82 
      s1 = [[0, 2], [1, 6], [2, 7], [3, 10]];
83 
 
84 
      // Size of the dashes is proportional to the width of the line.
85 
 
86 
      plot1b = $.jqplot("chart1b", [s1], {
87 
        seriesDefaults:{
88 
            linePattern: 'dashed',
89 
            lineWidth: 7,
90 
            showMarker: false,
91 
            shadow: false
92 
        }
93 
      });
94 
    });
95 
</script>
96 
 
97 
 
98 
  <script class="code" type="text/javascript">
99 
    $(document).ready(function () {
100 
      s2 = [[0, 6.29], [0.1, 8.21], [0.2, 8.92], [0.3, 7.33], [0.4, 7.91], [0.5, 3.6], [0.6, 6.88],
101 
      [0.7, 1.5], [0.8, 0.08], [0.9, 6.36], [1, 0.5], [1.1, 9.14], [1.2, 6.23], [1.3, 2.66],
102 
      [1.4, 9.9], [1.5, 7.44], [1.6, 7.82], [1.7, 8.57], [1.8, 3.99], [1.9, 3.83], [2, 6.78],
103 
      [2.1, 7.63], [2.2, 6.94], [2.3, 1.24], [2.4, 2.25], [2.5, 0.67], [2.6, 6.73], [2.7, 2.25],
104 
      [2.8, 7.72], [2.9, 9.36], [3, 8.49]];
105 
 
106 
      // Here is the default dotted line.
107 
 
108 
      plot2 = $.jqplot("chart2", [s2], {
109 
        seriesDefaults:{
110 
            linePattern: 'dotted',
111 
            showMarker: false,
112 
            shadow: false
113 
        }
114 
      });
115 
    });
116 
</script>
117 
 
118 
 
119 
  <script class="code" type="text/javascript">
120 
    $(document).ready(function () {
121 
 
122 
      // Dashes and dots work with smoothed lines as well.
123 
 
124 
      plot3 = $.jqplot("chart3", [s2], {
125 
        seriesDefaults:{
126 
            linePattern: 'dashed',
127 
            showMarker: false,
128 
            shadow: false,
129 
            rendererOptions: {
130 
              smooth: true
131 
            }
132 
        }
133 
      });
134 
    });
135 
</script>
136 
 
137 
 
138 
  <script class="code" type="text/javascript">
139 
    $(document).ready(function () {
140 
 
141 
      // A user defined linePattern can be specified as well.  The format
142 
      // of a linePattern definition is an array like [dash length, gap length, ...].
143 
      // The line looks best when the line pattern array has an even number
144 
      // of elements, so it begins with a dash and ends with a gap.
145 
      // The dash and gap lengths are scaled to the line thickness.
146 
 
147 
      plot4 = $.jqplot("chart4", [s2], {
148 
        seriesDefaults:{
149 
            linePattern: [4, 3, 1, 3, 1, 3],
150 
            showMarker: false,
151 
            shadow: false,
152 
            rendererOptions: {
153 
              smooth: true
154 
            }
155 
        }
156 
      });
157 
    });
158 
</script>
159 
 
160 
 
161 
<script class="code" type="text/javascript">
162 
    $(document).ready(function () {
163 
 
164 
      // The linePattern option also accepts a shorthand string
165 
      // notation of dash (-) and dot (.) characters to create
166 
      // a customized pattern.
167 
 
168 
      plot4b = $.jqplot("chart4b", [s2], {
169 
        seriesDefaults:{
170 
            linePattern: '-.',
171 
            showMarker: false,
172 
            shadow: false,
173 
            rendererOptions: {
174 
              smooth: true
175 
            }
176 
        }
177 
      });
178 
    });
179 
</script>
180 
 
181 
  <script class="code" type="text/javascript">
182 
    $(document).ready(function () {
183 
 
184 
      // The default dash length and gap length can be controlled
185 
      // with the dashLength and gapLength config parameters.
186 
 
187 
      $.jqplot.config.dashLength = 5;
188 
      $.jqplot.config.gapLength = 2;
189 
 
190 
      plot5 = $.jqplot("chart5", [s2], {
191 
        seriesDefaults:{
192 
            linePattern: 'dashed',
193 
            showMarker: false,
194 
            shadow: false,
195 
            rendererOptions: {
196 
              smooth: true
197 
            }
198 
        }
199 
      });
200 
    });
201 
</script>
202 
 
203 
 
204 
<!-- End example scripts -->
205 
 
206 
<!-- Don't touch this! -->
207 
 
208 
 
209 
    <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
210 
    <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
211 
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
212 
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
213 
<!-- End Don't touch this! -->
214 
 
215 
<!-- Additional plugins go here -->
216 
 
217 
<!-- End additional plugins -->
218 
 
219 
        </div>
220 
         <div class="col2">
221 
 
222 
           <div class="example-link"><a class="example-link" href="data-renderers.html">AJAX and JSON Data Loading via Data Renderers</a></div>
223 
           <div class="example-link"><a class="example-link" href="barLineAnimated.html">Animated Charts</a></div>
224 
           <div class="example-link"><a class="example-link" href="dashboardWidget.html">Animated Dashboard Sample - Filled Line with Log Axis</a></div>
225 
           <div class="example-link"><a class="example-link" href="kcp_area.html">Area Chart</a></div>
226 
           <div class="example-link"><a class="example-link" href="kcp_area2.html">Area Chart 2</a></div>
227 
           <div class="example-link"><a class="example-link" href="axisLabelTests.html">Axis Labels</a></div>
228 
           <div class="example-link"><a class="example-link" href="axisLabelsRotatedText.html">Axis Labels and Rotated Text</a></div>
229 
           <div class="example-link"><a class="example-link" href="barTest.html">Bar Charts</a></div>
230 
           <div class="example-link"><a class="example-link" href="multipleBarColors.html">Bar Colors Example</a></div>
231 
           <div class="example-link"><a class="example-link" href="bezierCurve.html">Bezier Curve Plots</a></div>
232 
           <div class="example-link"><a class="example-link" href="blockPlot.html">Block Plots</a></div>
233 
           <div class="example-link"><a class="example-link" href="bubbleChart.html">Bubble Charts</a></div>
234 
           <div class="example-link"><a class="example-link" href="bubble-plots.html">Bubble Plots</a></div>
235 
           <div class="example-link"><a class="example-link" href="candlestick.html">Candlestick and Open Hi Low Close Charts</a></div>
236 
           <div class="example-link"><a class="example-link" href="theming.html">Chart Theming</a></div>
237 
           <div class="example-link"><a class="example-link" href="fillBetweenLines.html">Charts with Fill Between Lines</a></div>
238 
           <div class="example-link"><a class="example-link" href="kcp_cdf.html">Cumulative Density Function Chart</a></div>
239 
           <div class="example-link"><a class="example-link" href="dashedLines.html">Dashed Lines with Smoothing</a></div>
240 
           <div class="example-link"><a class="example-link" href="cursor-highlighter.html">Data Point Highlighting, Tooltips and Cursor Tracking</a></div>
241 
           <div class="example-link"><a class="example-link" href="point-labels.html">Data Point labels</a></div>
242 
           <div class="example-link"><a class="example-link" href="date-axes.html">Date Axes</a></div>
243 
           <div class="example-link"><a class="example-link" href="dateAxisRenderer.html">Date Axes 2</a></div>
244 
           <div class="example-link"><a class="example-link" href="rotatedTickLabelsZoom.html">Date Axes, Rotated Labels and Zooming</a></div>
245 
           <div class="example-link"><a class="example-link" href="canvas-overlay.html">Draw Lines on Plots - Canvas Overlay</a></div>
246 
           <div class="example-link"><a class="example-link" href="draw-rectangles.html">Draw Rectangles on Plots</a></div>
247 
           <div class="example-link"><a class="example-link" href="kcp_engel.html">Engel Curves</a></div>
248 
           <div class="example-link"><a class="example-link" href="bandedLine.html">Error Bands and Confidence Intervals</a></div>
249 
           <div class="example-link"><a class="example-link" href="area.html">Filled (Area) Charts</a></div>
250 
           <div class="example-link"><a class="example-link" href="axisScalingForceTickAt.html">Force Plot to Have Tick at 0 or 100</a></div>
251 
           <div class="example-link"><a class="example-link" href="hiddenPlotsInTabs.html">Hidden Plots</a></div>
252 
           <div class="example-link"><a class="example-link" href="customHighlighterCursorTrendline.html">Highlighting, Dragging Points, Cursor and Trend Lines</a></div>
253 
           <div class="example-link"><a class="example-link" href="line-charts.html">Line Charts and Options</a></div>
254 
           <div class="example-link"><a class="example-link" href="kcp_lorenz.html">Lorenz Curves</a></div>
255 
           <div class="example-link"><a class="example-link" href="mekkoCharts.html">Mekko Charts</a></div>
256 
           <div class="example-link"><a class="example-link" href="meterGauge.html">Meter Gauge</a></div>
257 
           <div class="example-link"><a class="example-link" href="candlestick-charts.html">Open Hi Low Close and Candlestick Charts</a></div>
258 
           <div class="example-link"><a class="example-link" href="pieTest.html">Pie Charts and Options</a></div>
259 
           <div class="example-link"><a class="example-link" href="pieTest4.html">Pie Charts and Options 2</a></div>
260 
           <div class="example-link"><a class="example-link" href="pie-donut-charts.html">Pie and Donut Charts</a></div>
261 
           <div class="example-link"><a class="example-link" href="selectorSyntax.html">Plot Creation with jQuery Selectors</a></div>
262 
           <div class="example-link"><a class="example-link" href="zooming.html">Plot Zooming and Cursor Control</a></div>
263 
           <div class="example-link"><a class="example-link" href="kcp_pdf.html">Probability Density Function Chart</a></div>
264 
           <div class="example-link"><a class="example-link" href="kcp_pyramid_by_age.html">Pyramid Chart By Age</a></div>
265 
           <div class="example-link"><a class="example-link" href="kcp_pyramid.html">Pyramid Charts</a></div>
266 
           <div class="example-link"><a class="example-link" href="kcp_pyramid2.html">Pyramid Charts 2</a></div>
267 
           <div class="example-link"><a class="example-link" href="kcp_quintiles.html">Quintile Pyramid Charts</a></div>
268 
           <div class="example-link"><a class="example-link" href="resizablePlot.html">Resizable Plots</a></div>
269 
           <div class="example-link"><a class="example-link" href="rotated-tick-labels.html">Rotated Labels and Font Styling</a></div>
270 
           <div class="example-link"><a class="example-link" href="smoothedLine.html">Smoothed Lines</a></div>
271 
           <div class="example-link"><a class="example-link" href="bar-charts.html">Vertical and Horizontal Bar Charts</a></div>
272 
           <div class="example-link"><a class="example-link" href="waterfall.html">Waterfall Charts</a></div>
273 
           <div class="example-link"><a class="example-link" href="waterfall2.html">Waterfall Charts 2</a></div>
274 
           <div class="example-link"><a class="example-link" href="zoomOptions.html">Zoom Options</a></div>
275 
           <div class="example-link"><a class="example-link" href="zoomProxy.html">Zoom Proxy - Control one plot from another</a></div>
276 
           <div class="example-link"><a class="example-link" href="zoom1.html">Zooming</a></div>
277 
           <div class="example-link"><a class="example-link" href="dateAxisLogAxisZooming.html">Zooming with Date and Log Axes</a></div>
278 
 
279 
         </div>
280 
               </div>
281 
    </div>
282 
    <script type="text/javascript" src="example.min.js"></script>
283 
 
284 
</body>
285 
 
286 
 
287 
</html>