Wednesday, May 29, 2013

Wooden Comb Finished

This is a continuation of the project shown here.

I finally got the finish work on the Bloodwood + Red Oak comb done.  I chose 100% Pure Tung oil for the finish so I had to wait at least a day or two between coats.  The oil smells a bit like peanuts, but it undergoes an oxidative chemical reaction as it dries and the smell goes away.  I went with tung oil because of its water resistance, non-toxicity, ability to be reapplied, and oxidative drying.  Tung oil does come from a nut, so if you're building for someone with nut allergies maybe consider linseed oil.  I was hesitant to use a nondrying oil because it just seems like it would be a little gross to be oiling your hair as you combed it (smelly too).  It is possible that you could just let the comb oil itself with human oil (shudder) as it was handled, but you'd have to take great care not to expose it to moisture.  I decided against doing any sort of enamel or spray finish because I didn't think it would hold up to repeated handling.


Here it is right after applying the 4th and final (so far) coat, direct light really brings out the red, in the dark it looks purplish:


I was applying successive coats with 600 grit wet-use sandpaper.  The oil mixes with tiny bits of the bloodwood to create a red slurry that looks really cool once it gets into the pores and holes. I let it dry a week and a half and then buffed it out with a cloth.  I'm pretty happy with the results, though I do wish it was more red.

I'm considering selling these, custom made.  I don't really want to build the same thing over and over (easy and cheap, but not very fun).  I have some cool ideas for potential variations and wood combinations.  Luckily the cost of the materials is fairly low, but they'd still be pretty pricey, a lot of time goes into them.  I've been wanting to build a CNC machine, I'd probably do that if I had to make a lot of these.  If you're interested drop me an email at nooleanbot@gmail.com and we can discuss woods, finishes, ect.  Would be pretty easy to incorporate wood/designs from an old family property or decaying heirloom too, might as well make things extra personalized.

More pictures below.  Since taking these pictures I've gone back with a needle and some glue and carefully filled some of the holes that developed around the inserts during the sanding and finish work.  Direct sunlight really brings out the red, sadly the pics below were taken under overcast conditions.





Sunday, May 19, 2013

Google Charts Tips

I incorporated a few Google Charts into a recent project.  I wrote some code to automatically write the chart javascript using data extracted from an SQL database.  I found the Google Charts API well documented and fairly easy to use.  However, I did encounter a few issues that I think merit addressing.

Here's an example of a highly customized graph that makes use of some of the more involved chart options.



This graph contains a secondary vertical axis, an option not demonstrated in the Google examples.  Also used are date, number, and tool-tip formatting.  Notice the formatted numbers on the mouseover tooltips for the first set of data points (May 1st) compared to the default formatting on the other points.  The code below will generate the graph as seen above.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<div id="history_div" style="width: 730px; height: 400px; margin: 0;"></div>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load('visualization', '1.0', {'packages':['corechart']});
    google.setOnLoadCallback(drawVisualization);
    function drawVisualization() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Cost Total($)');
        data.addColumn('number', 'Sell Total($)');
        data.addColumn('number', '# of Products');
        data.addRows([
            [new Date(2013,4,1), {v: 90000.00, f: '$90,000.00'}, {v: 140000.00, f: '$140,000.00'}, {v: 8000.00, f: '8,000'}],
            [new Date(2013,5,1), 100000, 160000, 10000],
            [new Date(2013,6,1), 130000, 200000, 14000],
            [new Date(2013,7,1), 95000, 150000, 9000],
            [new Date(2013,8,1), 95000, 150000, 9000]
        ]);
        var options = {
            pointSize: 2,
            width: 730,
            height: 400,
            vAxis: {
                baseline: 0,
                gridlines: {count: 8}},
            vAxes: [
                {title: 'Value ($)', format: '$###,###,###', textStyle: {color: '#088A08'}},
                {title: '# of Products', format: '#', textStyle: {color: '#0000FF'}}],
            hAxis: {
                title: "Date", 
                format: 'M/d', 
                gridlines: {count: 8}},
            series: {
                0: {type: "line", targetAxisIndex: 0, color: '#21610B'},
                1: {type: "line", targetAxisIndex: 0, color: '#5FB404'},
                2: {type: "line", targetAxisIndex: 1, color: '0000FF'}}, 
            chartArea:{
                width: "75%", 
                height: "75%"}    
        }
        var chart = new google.visualization.ComboChart(document.getElementById('history_div'));
        chart.draw(data, options);
    }
</script>

Secondary Vertical Axis:  Created using the vAxes option.  We can then tell the # of Products data series to use the secondary axis using the targetAxisIndex in the series configuration as shown in line 37.

Formatted Data Values:  Declared using the {v: VALUE, f: 'FORMATTED VALUE'} notation.  An example of formatting tooltip numbers is shown in line 14.

Dates:  Created using Date(Y,M,D) remember that javascript months count from 0-11.

Component Overlapping Bug:  
The image below shows another problem you may encounter while implementing Google Charts.  The overlapping of the chart entities is the result of the chart not being visible at the time of its loading.  In my case it was in a div that was hidden at the time of page load.  Ensure that the chart is visible at the time of its loading (at least for a few milliseconds) in order to fix this problem.


I had some problems trying to get the graph to size itself correctly in browsers other than Chrome.  I haven't been able to reliably reproduce the problem  (so it may have just been a typo on my part), but it seems that as long as you declare a size both in both your div styling and the chart options the chart will render correctly.