Created 19 July 13
Last Update 19 July 13
Compatible Browsers IE8, IE9, IE10, Firefox, Opera, Chrome
Software Version jQuery
High Resolution No
Files Included JavaScript JS, HTML, CSS
Download Rating

Dynamic Horizontal Chart with Javascript

NetBeuz Dynamic Horizontal Chart

-You can create any size, any color, any much of charts charts dynamically and easily. -NO require knowledge in JavaScript . -NO css file included. -NO images. -Easy Usage. -Automatic Y axsiss. It creates itself according to max item value. -You can set link with items. -You can set nameHolder area’s width percent. -You can change colors, styles, size of charts. In netbeuz.js file. -Compatibility for all browsers. (expect border-radius in IE7 /IE8)

USAGE:

Step 1: All to do is create a html code like below. span>color property is bar’s color. and span>value property is bar’s value.
 <div id="myChart" caption="PROGRAMMING LANGUAGES CHART">
            <ul>
                <li><span color="#b5d600" val="95"><a iid="" title="ASP.NET">ASP.NET </a></span></li>
                <li><span color="#c0dcff" val="80"><a iid="" title="C#">C# </a></span></li>
                <li><span color="#db7780" val="40"><a iid="" title="Php">Php </a></span></li>
                <li><span color="lightgreen" val="60"><a iid="" title="Java">Java </a></span></li>
                <li><span color="yellow" val="50"><a iid="" title="Python">Python </a></span></li>
                <li><span color="#ffd554" val="84"><a iid="" title="XCODE">XCODE </a></span></li>
                <li><span color="#ffe0f7" val="45"><a iid="" title="Android">Android </a></span>
                </li>
            </ul>
    </div>
Step 2: Just one code is enough to run. myChart(width,height); >
 $("div#myChart").myChart(1000, 400);  
-This item require Jquery library.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>