Skip to content
This repository

Added tickShadowColor option to the axis settings #73

Open
wants to merge 9 commits into from

3 participants

Alberto Avila Mounier Florian sievlev
Alberto Avila

Usage:
xaxis: {
tickShadowColor: 'white';
}

If tickShadowColor is defined for an axis, an aditional line will be drawn one pixel after ever tick giving it a depth effect.

Alberto Avila

I uploaded a screenshot of the rendering of tick shadows

http://albertein.com.mx/chart-tick-shadow-color.png

The settings used were:

yaxis: {
    show: true,
    tickColor: '#c6c6c6',
    tickShadowColor: 'white'
}

If you look closely you can notice that below every tick of color #c6c6c6 you can see an additional white line.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.

Showing 1 changed file with 120 additions and 66 deletions. Show diff stats Hide diff stats

  1. 186  jquery.flot.js
186  jquery.flot.js
@@ -71,6 +71,7 @@
71 71
                     tickFormatter: null, // fn: number -> string
72 72
                     labelWidth: null, // size of tick labels in pixels
73 73
                     labelHeight: null,
  74
+                    labelAngle: null,
74 75
                     reserveSpace: null, // whether to reserve space even if axis isn't shown
75 76
                     tickLength: null, // size in pixels of ticks, or "full" for whole line
76 77
                     alignTicksWithAxis: null, // axis number or null for no sync
@@ -254,6 +255,10 @@
254 255
             if (options.yaxis.tickColor == null) // backwards-compatibility
255 256
                 options.yaxis.tickColor = options.grid.tickColor;
256 257
 
  258
+            // Transform angle in radiants
  259
+            if (options.xaxis.labelAngle != null)
  260
+                options.xaxis.labelAngle = (options.xaxis.labelAngle * Math.PI) / 180;
  261
+
257 262
             if (options.grid.borderColor == null)
258 263
                 options.grid.borderColor = options.grid.color;
259 264
             if (options.grid.tickColor == null)
@@ -949,10 +954,19 @@
949 954
                         m = ctx.measureText(line.text);
950 955
                     
951 956
                     line.width = m.width;
  957
+
952 958
                     // m.height might not be defined, not in the
953 959
                     // standard yet
954 960
                     line.height = m.height != null ? m.height : f.size;
955 961
 
  962
+                    var angle = opts.labelAngle;
  963
+                    if(angle) {
  964
+                        var abs = Math.abs, sin = Math.sin, cos = Math.cos,
  965
+                        w = line.width, h = line.height;
  966
+                        line.height = abs(w * sin(angle)) + abs(h * cos(angle));
  967
+                        line.width = abs(w * cos(angle)) + abs(h * sin(angle));
  968
+                    }
  969
+
956 970
                     // add a bit of margin since font rendering is
957 971
                     // not pixel perfect and cut off letters look
958 972
                     // bad, this also doubles as spacing between
@@ -1220,7 +1234,8 @@
1220 1234
             else
1221 1235
                 // heuristic based on the model a*sqrt(x) fitted to
1222 1236
                 // some data points that seemed reasonable
1223  
-                noTicks = 0.3 * Math.sqrt(axis.direction == "x" ? canvasWidth : canvasHeight);
  1237
+                // Increase factor if labels have an angle
  1238
+                noTicks = (0.3 + (opts.labelAngle ? Math.abs(Math.sin(opts.labelAngle)) * .5 : 0)) * Math.sqrt(axis.direction == "x" ? canvasWidth : canvasHeight);
1224 1239
 
1225 1240
             axis.delta = (axis.max - axis.min) / noTicks;
1226 1241
 
@@ -1563,45 +1578,61 @@
1563 1578
                 }
1564 1579
 
1565 1580
                 // draw ticks
1566  
-                ctx.beginPath();
1567  
-                for (i = 0; i < axis.ticks.length; ++i) {
1568  
-                    var v = axis.ticks[i].v;
1569  
-                    
1570  
-                    xoff = yoff = 0;
  1581
+                var drawTicks = function(isShadow) {
  1582
+                    ctx.beginPath();
  1583
+                    for (i = 0; i < axis.ticks.length; ++i) {
  1584
+                        var v = axis.ticks[i].v;
  1585
+                        
  1586
+                        xoff = yoff = 0;
1571 1587
 
1572  
-                    if (v < axis.min || v > axis.max
1573  
-                        // skip those lying on the axes if we got a border
1574  
-                        || (t == "full" && bw > 0
1575  
-                            && (v == axis.min || v == axis.max)))
1576  
-                        continue;
  1588
+                        if (v < axis.min || v > axis.max
  1589
+                            // skip those lying on the axes if we got a border
  1590
+                            || (t == "full" && bw > 0
  1591
+                                && (v == axis.min || v == axis.max)))
  1592
+                            continue;
1577 1593
 
1578  
-                    if (axis.direction == "x") {
1579  
-                        x = axis.p2c(v);
1580  
-                        yoff = t == "full" ? -plotHeight : t;
1581  
-                        
1582  
-                        if (axis.position == "top")
1583  
-                            yoff = -yoff;
1584  
-                    }
1585  
-                    else {
1586  
-                        y = axis.p2c(v);
1587  
-                        xoff = t == "full" ? -plotWidth : t;
1588  
-                        
1589  
-                        if (axis.position == "left")
1590  
-                            xoff = -xoff;
1591  
-                    }
  1594
+                        if (axis.direction == "x") {
  1595
+                            x = axis.p2c(v);
  1596
+                            yoff = t == "full" ? -plotHeight : t;
  1597
+                            
  1598
+                            if (axis.position == "top")
  1599
+                                yoff = -yoff;
  1600
+                        }
  1601
+                        else {
  1602
+                            y = axis.p2c(v);
  1603
+                            xoff = t == "full" ? -plotWidth : t;
  1604
+                            
  1605
+                            if (axis.position == "left")
  1606
+                                xoff = -xoff;
  1607
+                        }
1592 1608
 
1593  
-                    if (ctx.lineWidth == 1) {
1594  
-                        if (axis.direction == "x")
1595  
-                            x = Math.floor(x) + 0.5;
1596  
-                        else
1597  
-                            y = Math.floor(y) + 0.5;
1598  
-                    }
  1609
+                        if (ctx.lineWidth == 1) {
  1610
+                            if (axis.direction == "x")
  1611
+                                x = Math.floor(x) + 0.5;
  1612
+                            else
  1613
+                                y = Math.floor(y) + 0.5;
  1614
+                        }
1599 1615
 
1600  
-                    ctx.moveTo(x, y);
1601  
-                    ctx.lineTo(x + xoff, y + yoff);
  1616
+                        //The tick shadows are a single aditional line after the tick
  1617
+                        if (isShadow) {
  1618
+                            if (axis.direction == 'x')
  1619
+                                x++;
  1620
+                            else
  1621
+                                y++;
  1622
+                        }
  1623
+
  1624
+                        ctx.moveTo(x, y);
  1625
+                        ctx.lineTo(x + xoff, y + yoff);
  1626
+                    }
  1627
+                    
  1628
+                    ctx.stroke();
  1629
+                };
  1630
+                drawTicks();
  1631
+                //Only render the tick shadow if the axis has a color defined for it
  1632
+                if (axis.options.tickShadowColor) { 
  1633
+                    ctx.strokeStyle = axis.options.tickShadowColor;
  1634
+                    drawTicks(true);
1602 1635
                 }
1603  
-                
1604  
-                ctx.stroke();
1605 1636
             }
1606 1637
             
1607 1638
             
@@ -1642,41 +1673,64 @@
1642 1673
                     if (!tick.label || tick.v < axis.min || tick.v > axis.max)
1643 1674
                         continue;
1644 1675
 
1645  
-                    var x, y, offset = 0, line;
  1676
+                    var x, y, offset = 0, line, angle;
1646 1677
                     for (var k = 0; k < tick.lines.length; ++k) {
1647 1678
                         line = tick.lines[k];
1648  
-                        
1649  
-                        if (axis.direction == "x") {
1650  
-                            x = plotOffset.left + axis.p2c(tick.v) - line.width/2;
1651  
-                            if (axis.position == "bottom")
1652  
-                                y = box.top + box.padding;
1653  
-                            else
1654  
-                                y = box.top + box.height - box.padding - tick.height;
1655  
-                        }
1656  
-                        else {
1657  
-                            y = plotOffset.top + axis.p2c(tick.v) - tick.height/2;
1658  
-                            if (axis.position == "left")
1659  
-                                x = box.left + box.width - box.padding - line.width;
1660  
-                            else
1661  
-                                x = box.left + box.padding;
1662  
-                        }
  1679
+                        angle = axis.options.labelAngle
  1680
+
  1681
+                        if(angle) {
  1682
+                            ctx.save();
  1683
+                            x = plotOffset.left + axis.p2c(tick.v);
  1684
+                            y = box.top + 2 * box.padding;
  1685
+
  1686
+                            var sin_angle = Math.sin(angle);
  1687
+                            var cos_angle = Math.cos(angle);
  1688
+
  1689
+                            if (sin_angle < 0 && cos_angle < 0) {
  1690
+                                x += line.width;
  1691
+                                y += line.height - 2*box.padding;
  1692
+                            } else if (sin_angle < 0 && cos_angle > 0) {
  1693
+                                x -= line.width;
  1694
+                                y += line.height - 2*box.padding;
  1695
+                            }
  1696
+
  1697
+                            ctx.translate(x, y);
  1698
+                            ctx.rotate(angle);
  1699
+                            ctx.fillText(line.text, 0, 0);
  1700
+                            ctx.restore();
  1701
+                        } else {
  1702
+                            if (axis.direction == "x") {
  1703
+                                x = plotOffset.left + axis.p2c(tick.v) - line.width/2;
  1704
+                                if (axis.position == "bottom")
  1705
+                                    y = box.top + box.padding;
  1706
+                                else
  1707
+                                    y = box.top + box.height - box.padding - tick.height;
  1708
+                            }
  1709
+                            else {
  1710
+                                y = plotOffset.top + axis.p2c(tick.v) - tick.height/2;
  1711
+                                if (axis.position == "left")
  1712
+                                    x = box.left + box.width - box.padding - line.width;
  1713
+                                else
  1714
+                                    x = box.left + box.padding;
  1715
+                            }
1663 1716
 
1664  
-                        // account for middle aligning and line number
1665  
-                        y += line.height/2 + offset;
1666  
-                        offset += line.height;
1667  
-
1668  
-                        if ($.browser.opera) {
1669  
-                            // FIXME: UGLY BROWSER DETECTION
1670  
-                            // round the coordinates since Opera
1671  
-                            // otherwise switches to more ugly
1672  
-                            // rendering (probably non-hinted) and
1673  
-                            // offset the y coordinates since it seems
1674  
-                            // to be off pretty consistently compared
1675  
-                            // to the other browsers
1676  
-                            x = Math.floor(x);
1677  
-                            y = Math.ceil(y - 2);
  1717
+                            // account for middle aligning and line number
  1718
+                            y += line.height/2 + offset;
  1719
+                            offset += line.height;
  1720
+
  1721
+                            if ($.browser.opera) {
  1722
+                                // FIXME: UGLY BROWSER DETECTION
  1723
+                                // round the coordinates since Opera
  1724
+                                // otherwise switches to more ugly
  1725
+                                // rendering (probably non-hinted) and
  1726
+                                // offset the y coordinates since it seems
  1727
+                                // to be off pretty consistently compared
  1728
+                                // to the other browsers
  1729
+                                x = Math.floor(x);
  1730
+                                y = Math.ceil(y - 2);
  1731
+                            }
  1732
+                            ctx.fillText(line.text, x, y);
1678 1733
                         }
1679  
-                        ctx.fillText(line.text, x, y);
1680 1734
                     }
1681 1735
                 }
1682 1736
             });
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.