Commits

Anonymous committed 8cfdfa8

Preliminary dashed line support. Still working on making joints and ends look correct.

Comments (0)

Files changed (3)

examples/dashedLines.html

+<!DOCTYPE html>
+
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <!-- Use Compatibility mode in IE -->
+  <title>Bar Charts</title>
+  <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../src/excanvas.js"></script><![endif]-->
+  
+  <link rel="stylesheet" type="text/css" href="../src/jquery.jqplot.css" />
+  <link rel="stylesheet" type="text/css" href="../examples/examples.css" />
+  
+  <!-- BEGIN: load jquery -->
+  <script language="javascript" type="text/javascript" src="../src/jquery.js"></script>
+  <!-- END: load jquery -->
+  
+  <!-- BEGIN: load jqplot -->
+  <script language="javascript" type="text/javascript" src="../src/jquery.jqplot.js"></script>
+  <!-- END: load jqplot -->
+
+  <style type="text/css">
+    .jqplot-target {
+        margin-bottom: 2em;
+    }
+    
+    pre {
+        background: #D8F4DC;
+        border: 1px solid rgb(200, 200, 200);
+        padding-top: 1em;
+        padding-left: 3em;
+        padding-bottom: 1em;
+        margin-top: 1em;
+        margin-bottom: 4em;
+        
+    }
+    
+    p {
+        margin: 2em 0;
+    }
+    
+    .note {
+        font-size: 0.8em;
+    }
+
+    .jqplot-breakTick {
+        
+    }
+  </style>
+  
+  <script class="code" type="text/javascript">
+
+    $(document).ready(function () {
+      var s1 = [[0, 2], [1, 6], [2, 7], [3, 10]];
+
+      plot1 = $.jqplot("chart1", [s1], {
+        seriesDefaults:{
+            dashedLine: true,
+            showMarker: false,
+            shadow: false
+        }
+      });
+    });
+</script>
+
+  
+  <script class="code" type="text/javascript">
+    $(document).ready(function () {
+
+      var s2 = [[0, 6.285649272699648], [0.1, 8.21368819521145], [0.2, 8.922134920513773], [0.3, 7.334192889379997], [0.4, 7.906516375517576], [0.5, 3.6021095084765786], [0.6, 6.879475110724167], [0.7, 1.5032242836673793], [0.8, 0.08104934022154509], [0.9, 6.360762925374943], [1, 0.5031551258715516], [1.1, 9.138638963226924], [1.2, 6.230839952411845], [1.3, 2.6620318783438215], [1.4, 9.904049056205329], [1.5, 7.439729926653593], [1.6, 7.820158898685975], [1.7, 8.566779512084974], [1.8, 3.9887669112796953], [1.9, 3.832257554743268], [2, 6.782120315701103], [2.1, 7.633957783466761], [2.2, 6.941230512247182], [2.3, 1.244192671144675], [2.4, 2.2495930262584265], [2.5, 0.6698127581945545], [2.6, 6.730093688908464], [2.7, 2.2521661852172525], [2.8, 7.719087789109827], [2.9, 9.36259733771941], [3, 8.493870267425812]];
+
+      plot2 = $.jqplot("chart2", [s2], {
+        seriesDefaults:{
+            dashedLine: true,
+            showMarker: false,
+            shadow: false
+        }
+      });
+    });
+</script>
+
+  
+  <script class="code" type="text/javascript">
+    $(document).ready(function () {
+
+      var s3 = [[0, 3.5237602224416054], [0.030303030303030304, 7.282689933523754], [0.06060606060606061, 3.9343189282267153], [0.09090909090909091, 4.420339998792685], [0.12121212121212122, 2.6681756367160125], [0.15151515151515152, 9.676344812587905], [0.18181818181818182, 8.285454001340607], [0.21212121212121213, 2.1463131182087123], [0.24242424242424243, 3.2424333329196875], [0.2727272727272727, 2.209573487855878], [0.30303030303030304, 3.738023870244419], [0.3333333333333333, 4.94796964711754], [0.36363636363636365, 9.457841099995214], [0.3939393939393939, 6.598122361361663], [0.42424242424242425, 0.9407934085538439], [0.45454545454545453, 5.940787562591309], [0.48484848484848486, 2.746628989685088], [0.5151515151515151, 1.186682703486669], [0.5454545454545454, 8.14687470019338], [0.5757575757575758, 7.634069651628454], [0.6060606060606061, 8.987045508045497], [0.6363636363636364, 2.70612719988532], [0.6666666666666666, 6.122200623374075], [0.696969696969697, 9.888593761312015], [0.7272727272727273, 7.5143528477995725], [0.7575757575757576, 7.449471850788721], [0.7878787878787878, 3.958702096870507], [0.8181818181818182, 8.908129966846838], [0.8484848484848485, 5.392145984623756], [0.8787878787878788, 1.2125713995444232], [0.9090909090909091, 2.9043097799726447], [0.9393939393939394, 1.0688450191749432], [0.9696969696969697, 4.6469384086741705], [1, 6.339698811268097], [1.0303030303030303, 4.706667356841821], [1.0606060606060606, 5.790996246956026], [1.0909090909090908, 7.209970689302003], [1.121212121212121, 8.52079792724053], [1.1515151515151516, 8.164709451601729], [1.1818181818181819, 2.3702159486475702], [1.2121212121212122, 2.1637187478954023], [1.2424242424242424, 5.606337309494299], [1.2727272727272727, 2.592024500484701], [1.303030303030303, 6.711071628764466], [1.3333333333333333, 2.55658428937817], [1.3636363636363635, 5.637339466444738], [1.393939393939394, 9.718182462022106], [1.4242424242424243, 5.243484030231662], [1.4545454545454546, 4.527778464065558], [1.4848484848484849, 1.5322950840238847], [1.5151515151515151, 6.188980980322438], [1.5454545454545454, 4.952966224916919], [1.5757575757575757, 9.775414410655173], [1.606060606060606, 5.429312968851935], [1.6363636363636365, 7.273823962773426], [1.6666666666666667, 0.41855134292845264], [1.696969696969697, 3.5043456972980778], [1.7272727272727273, 6.5510017994231315], [1.7575757575757576, 8.648212565521563], [1.7878787878787878, 1.027653035124586], [1.8181818181818181, 3.9063019890938278], [1.8484848484848484, 2.641213682861765], [1.878787878787879, 7.191597019568393], [1.9090909090909092, 4.125003328550266], [1.9393939393939394, 5.953388871633561], [1.9696969696969697, 6.516925174329954], [2, 3.625599487569331], [2.0303030303030303, 2.7531978121230183], [2.0606060606060606, 1.8270347573076906], [2.090909090909091, 6.085170952249141], [2.121212121212121, 9.514888415612168], [2.1515151515151514, 9.85527177268489], [2.1818181818181817, 2.657980766732273], [2.212121212121212, 8.294082182398531], [2.242424242424242, 8.662744263879253], [2.272727272727273, 4.335120025506813], [2.303030303030303, 1.418931183747999], [2.3333333333333335, 4.918729754767711], [2.3636363636363638, 8.25562935405223], [2.393939393939394, 8.20946266586103], [2.4242424242424243, 4.7899901772661195], [2.4545454545454546, 0.8266049186539637], [2.484848484848485, 8.245834037511127], [2.515151515151515, 8.235452981690623], [2.5454545454545454, 2.6080325339248835], [2.5757575757575757, 3.4242172193110845], [2.606060606060606, 8.408540861633606], [2.6363636363636362, 9.860911135832119], [2.6666666666666665, 7.114667118127237], [2.696969696969697, 5.355425082373948], [2.727272727272727, 1.269411351526284], [2.757575757575758, 6.119559721604788], [2.787878787878788, 0.6334697009606927], [2.8181818181818183, 1.203759805008724], [2.8484848484848486, 5.671068948293686], [2.878787878787879, 9.181526722230032], [2.909090909090909, 9.535679673207799], [2.9393939393939394, 2.9451391277164007], [2.9696969696969697, 0.13161329043815284], [3, 7.669772828880978]];
+
+      plot3 = $.jqplot("chart3", [s3], {
+        seriesDefaults:{
+            dashedLine: true,
+            showMarker: false,
+            shadow: false
+        }
+      });
+    });
+</script>
+
+  
+  <script class="code" type="text/javascript">
+    $(document).ready(function () {
+
+      var s2 = [[0, 6.285649272699648], [0.1, 8.21368819521145], [0.2, 8.922134920513773], [0.3, 7.334192889379997], [0.4, 7.906516375517576], [0.5, 3.6021095084765786], [0.6, 6.879475110724167], [0.7, 1.5032242836673793], [0.8, 0.08104934022154509], [0.9, 6.360762925374943], [1, 0.5031551258715516], [1.1, 9.138638963226924], [1.2, 6.230839952411845], [1.3, 2.6620318783438215], [1.4, 9.904049056205329], [1.5, 7.439729926653593], [1.6, 7.820158898685975], [1.7, 8.566779512084974], [1.8, 3.9887669112796953], [1.9, 3.832257554743268], [2, 6.782120315701103], [2.1, 7.633957783466761], [2.2, 6.941230512247182], [2.3, 1.244192671144675], [2.4, 2.2495930262584265], [2.5, 0.6698127581945545], [2.6, 6.730093688908464], [2.7, 2.2521661852172525], [2.8, 7.719087789109827], [2.9, 9.36259733771941], [3, 8.493870267425812]];
+
+      plot4 = $.jqplot("chart4", [s2], {
+        seriesDefaults:{
+            dashedLine: true,
+            dashPattern: [3, 10],
+            showMarker: false,
+            shadow: false
+        }
+      });
+    });
+</script>
+
+<script type="text/javascript">    
+    $(document).ready(function(){
+        $('script.code').each(function(index) {
+            $('pre.code').eq(index).text($(this).html());
+        });
+        $('script.common').each(function(index) {
+            $('pre.common').eq(index).html($(this).html());
+        });
+        $(document).unload(function() {$('*').unbind(); });
+    });
+</script> 
+    
+  </head>
+  <body>
+<?php include "nav.inc"; ?>
+        
+    <div id="chart1" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>
+
+    <pre class="code"></pre>
+
+    <div id="chart2" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>
+
+    <pre class="code"></pre>
+
+    <div id="chart3" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>
+
+    <pre class="code"></pre>
+
+    <div id="chart4" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>
+
+    <pre class="code"></pre>
+
+
+  </body>
+</html>

src/jqplot.lineRenderer.js

                     var l = gd.length;
                     // get average pixels between points.
                     var fact = parseInt(gd[l-1][0] - gd[0][0]) / l;
-                    if (fact >= 16) {
-                        opts.dashPattern = [8, 8];
+                    var maxfact = 24, minfact = 4;
+                    var maxdash = 10, maxgap = 14;
+                    var mindash = 1, mingap = 3;
+                    var dslope = (maxdash - mindash)/(maxfact - minfact);
+                    var gslope = (maxgap - mingap)/(maxfact - minfact);
+                    var db = maxdash - dslope * maxfact;
+                    var gb = maxgap - gslope * maxfact;
+
+                    if (fact >= maxfact) {
+                        opts.dashPattern = [maxdash, maxgap];
                     }
-                    else if (fact >= 5) {
-                        var a = parseInt(fact/2);
-                        var b = a + fact%2;
+                    else if (fact >= minfact) {
+                        console.log(fact);
+                        var a = db + dslope * fact;
+                        var b = gb + gslope * fact;
                         opts.dashPattern = [a, b];
                     }
                     else {
                         opts.dashPoints = true;
                     }
+                    console.log(opts.dashPattern);
 
                 }
                 else if (!$.isArray(opts.dashPattern)) {

src/jqplot.shapeRenderer.js

                 if (points[i][0] != null && points[i][1] != null) {
                     if (move) {
                         ctx.moveTo(points[i][0], points[i][1]);
+
                         // if drawing dashed line and just drawing points, draw one here
                         if (opts.dashedLine && opts.dashPoints) {
                             ctx.arc(points[i][0], points[i][1], 2, 0, 2*Math.PI, true);
 
                                 else {
                                     ndashes = parseInt(pl/dashTotLen);
-                                    x = points[i][0];
-                                    y = points[i][1];
+                                    x = points[i-1][0];
+                                    y = points[i-1][1];
 
                                     for (var j=0; j<ndashes; j++) {
                                         x += dashx;