Groups keyboard shortcuts have been updated
Dismiss
See shortcuts

Using Tangle to size a bar chart

298 views
Skip to first unread message

Cody Winchester

unread,
Jul 8, 2013, 6:53:39 PM7/8/13
to tangl...@googlegroups.com
Hi everyone,

Trying to implement the example in the API docs of using a Tangle class to dynamically size a bar chart. The code I'm trying to run returns nothing on the page -- no errors in the console, just nothing on the page. I am probably doing something obviously wrong?

js:

function setUpTangle () {
var element = document.getElementById("barchart");
var tangle = new Tangle(element, {
initialize: function () {
this.length = 50;
},
update: function () {
        element.style.width = "" + this.length + "%";
        }
    });
};


html:

  <div id="barchart" style="color:blue; height:50px;">
<span data-var="length" class="TKAdjustableNumber" data-min="1" data-max="100"></span>
</div>


Thanks for any help.

CW









m2c...@gmail.com

unread,
Jul 8, 2013, 8:20:04 PM7/8/13
to tangl...@googlegroups.com
Maybe you shouldn't use the name 'length' for a var. Try using sth different, that's my guess.

Cody Winchester

unread,
Jul 8, 2013, 11:08:56 PM7/8/13
to tangl...@googlegroups.com
I was using "color" instead of "background" on my div. Works fine with the CSS properly labeled, of course. Thanks!


--
You received this message because you are subscribed to a topic in the Google Groups "Tangle Talk" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tangle-talk/c104SSM0qA4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tangle-talk...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

joshtr...@gmail.com

unread,
Jul 11, 2013, 9:13:53 PM7/11/13
to tangl...@googlegroups.com
Hi Cody,
Could you post your full Tangle + barchart code? I'm missing something here -- newbie to JS. Thanks.

Cody Winchester

unread,
Jul 12, 2013, 2:02:44 AM7/12/13
to tangl...@googlegroups.com
Sure. Also new to JS, so there's probably a much more parsimonious way to achieve the same end here:


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Bars/circle test</title>

    <style>
    body {
    margin:20px; 
    padding:20px; 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    }
    
    #container{
    width:600px;
    padding:10px;
    }
    
    h1 {
    font-size:80px;
    }
    
    .circle {
border-radius: 50%;
    webkit-border-radius: 50%;
    moz-border-radius: 50%;
width: 200px;
height: 200px;
    background:purple;
}
    
    </style>
    
    <script type="text/javascript" src="Tangle.js"></script>

    <link rel="stylesheet" href="TangleKit/TangleKit.css" type="text/css">
    <script type="text/javascript" src="TangleKit/mootools.js"></script>
    <script type="text/javascript" src="TangleKit/sprintf.js"></script>
    <script type="text/javascript" src="TangleKit/BVTouchable.js"></script>
    <script type="text/javascript" src="TangleKit/TangleKit.js"></script>

    <script type="text/javascript">

        function setUpTangle() {
            var bardata = document.getElementById("bardata");
            var circledata = document.getElementById("circledata");
            var barchart = document.getElementById("barchart");
            var barchart2 = document.getElementById("barchart2");
            var circle = document.getElementById("circle");
            var tangle = new Tangle(bardata, {
                initialize: function () {
                    this.barwidth = 50;
                    this.barwidth2 = 50;
                },
                update: function () {
                    var obama = 100 - this.barwidth2;
                    var romney = 100 - this.barwidth;
                    this.barwidth = obama;
                    this.barwidth2 = romney;
                    barchart.style.width = "" + this.barwidth + "%";
                    barchart2.style.width = "" + this.barwidth2 + "%";
                    circle.style.width = "" + this.circsize + "px";
                    circle.style.height = "" + this.circsize + "px";
                }
            });

            var circtangle = new Tangle(circdata, {
                initialize: function () {
                    this.circsize = 200;
                },
                update: function () {
                    circle.style.width = "" + this.circsize + "px";
                    circle.style.height = "" + this.circsize + "px";
                }
            });

        };
    </script>
</head>

<body onload="setUpTangle();">

<div id="container" style="width:600px; padding:5px;">

<div id="bardata">
<h1 style="text-align:center;">Obama: <span data-var="barwidth" class="TKAdjustableNumber" data-min="0" data-max="100">%</span><br/>
Romney: <span data-var="barwidth2" class="TKAdjustableNumber" data-min="0" data-max="100">%</span></h1>

<div style="border-right:2px solid #ccc;">
<div id="barchart" style="background:blue; height:50px; color:white; font-weight:bold; text-align:right;"><span data-var="barwidth" style="vertical-align:-80%; padding-right:6px;">%</span></div>
<div id="barchart2" style="background:red; height:50px; color:white; font-weight:bold; text-align:right;"><span data-var="barwidth2" style="vertical-align:-80%; padding-right:6px;">%</span></div>
</div>

</div>

<div id="circdata">

<h1 style="text-align:center;">Circle: <span data-var="circsize" class="TKAdjustableNumber" data-min="1" data-step="10" data-max="600"> px</span>

<div class="circle" id="circle" style="margin-top:50px;"></div>

</div>

</div>

</body>
</html>
Reply all
Reply to author
Forward
0 new messages