Jquery HTML Graph

A small code snippet for drawing a pure HTML graph using Jquey

   var points = {0.3,0.5,0.9,0.7};
    function htmlgraph(points){
        var str = "";
        for (var i = 0; i < points.length; i++) {
            var ioid = 'io'+i;
            var x = i*(100/points.length);
            var y = points[i]*100+10;
            var css = 'border:1px solid red;left:'+x+'%;top:'+y+'%;width:1px;height:1px;position:absolute;';
            var mystr = '<div class="p" id="'+ioid+'" style="'+css+'"></div>';
            str += mystr;
        $("#graph").html("<strong>"+i+" points</strong><div id=\"gIOIO\">"+str+"</div>");
        $("#graph #gIOIO").css({'border':'1px solid #ccc', 'height':'100%'});


Post new comment

  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>. Beside the tag style "<foo>" it is also possible to use "[foo]". PHP source code can also be enclosed in <?php ... ?> or <% ... %>.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <h3> <h2> <h4> <img> <div> <table> <tr> <td> <pre>
  • Lines and paragraphs break automatically.
  • Insert image: [img:node_id align=(left|right) size=(|fullLA|fullPreview|fullSQ|halfLA|halfPO|halfSQ|thirdSQ) action=(popup|link|frame) url=url style="margin:10px;" title=text description=text]

More information about formatting options

info@theanthillsocial.co.uk XHTML 1.0 Strict CSS2 WAI