Connect With WRD
feed via e-mail
feed via e-mail

Posts Tagged ‘VML’

jsDraw2DX is a standalone JavaScript library for creating any type of interactive graphics with SVG (and VML for old IE browsers).

Besides the ability to generate all basic shapes like line, rectangle, polygon, circle, ellipse, arc, etc., the library can draw curves, beziers (any degree), function plots, images and decorated text.


The library is object-oriented and its coordinate system + scaling can all be configured.

As it uses SVG, interactivity can be easily accomplished by manipulating the DOM.

P.S. jsDraw2DX is built by the creators of jsDraw2D which draws any shapes using JavaScript.

  • Tags:
  • Filed under: Charts, Goodies, LGPL License
  • JQVMap is a jQuery plugin for rendering vector maps by using SVG for modern browsers and VML for the rest.

    It is a heavily modified version of another plugin, jVectorMap, and comes with ready-to-use maps of "world, USA, Europe and Germany".

    There are several customization options for beautifying the maps including colors, borders or their opacities.

    jQuery JQVMAp

    Maps can have zooming enabled or not, show tooltips of data when hovered and there is callback for clicks.

    Also, it is possible to select any regions on initial load or after any custom event.

    JSGL is a JavaScript graphics library for drawing and moving vector shapes with ease.

    The library enables us to create and transform objects (using SVG/VML) dynamically.

    There are built-in elements like line, circle, ellipse, polygon, etc. and support for stroking and/or filling them with many customization options.

    Demos provided (PathFinder and NeuralNet) give us a strong opinion on the capabilities of the library.

    JSGL - JavaScript Graphics

    Spin.js is a tiny JavaScript library that enables us to generate loading/activity indicators without any images.

    It creates the UI with CSS3 (VML in Internet Explorer) and works in all browsers (even in IE6).


    The spinners can be customized in several ways like setting the number of lines, their color, length, width, radius, speed of the animation and the trail effect. Such a flexibility ends up in many possible variations.

    And, Spin.js weights only 1.7kb gzipped which is smaller than an animated GIF file in most cases.

    P.S. Although, it is a standalone library, there is an optional jQuery provided.

    Elycharts is an easy-to-use and customizable library for creating charts with only JavaScript.

    The library supports most of the popular chart types including line, column, are, bar, pie, sparklines and combinations.


    Elycharts comes with many interactions like mouse tracking and events, highlight of selected areas with various animations, tooltip and hints, html anchors and many more.

    Also, it can modify data dynamically with good-looking animations to display the change in charts.

    The charts are generated with SVG/VML and the library is built on jQuery + Raphaël.

    Flexi is a lightweight (4.3kb) color picker that doesn't use any images (thanks to SVG/VML), CSS or 1px hacks but only JavaScript.

    It is a standalone script that doesn't require any JavaScript frameworks and can pass the color selected in hexadecimal, HSV and RGB formats.

    The dimensions, position of the picker and slide area can be fully customized in CSS just like any other div element.

    Flexi Color Picker

    NETEYE Activity Indicator is a jQuery plugin for creating and displaying flexible activity indicators when needed.

    The plugin doesn't require any images as it makes use of SVG or VML.

    jQuery Activity Indicator

    Its color can be defined and, considering the indicators generated support transparency, they fit perfectly to any background color.

    There are multiple options offered for customizing it like: number of segments, size (width, length, space), speed of the animation and more.

    Highcharts is a JavaScript charting library for creating interactive charts in various types (line, spline, area, areaspline, column, bar, pie & scatter).

    The library offers a high-level of usability with features like:

    • tooltip labels displaying info on hovered items
    • zooming on a specific part of the chart
    • text rotation on labels for a better readability

    Highcharts: JavaScript Charting Library

    Highcharts has an admirable effort in browser compatibility. For standard browsers it uses the canvas element and in some cases SVG for the graphics rendering. In Internet Explorer, graphics are drawn using VML. Besides all major browsers, it works in iPhone & IE6.

    The library is offered for free to be used in personal/non-commercial projects & requires a license for commercial ones.

    gRaphaël is an open source JavaScript charting library that is based on Raphaël graphics library (WRD link).

    It is capable of generating both static & interactive outputs including pie, bar, line or dot charts.

    gRaphaël - JavaScript Charts

    The charts are created with VML & supports the most popular browsers like Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0.

    There are some beautiful demos provided including the interactive pie chart & the dot chart.

    DD_roundies is another rounded corners solution that is very easy to implement & cross-browser compliant.

    This rounded corners script doesn’t use any images, works in IE6 without AlphaImageLoader & lightweight (3.62kb compressed).

    Easy Rounded Corners

    Radius of the corners are not fixed & can be defined.

    As the major problem for rounded corners lies beneath IE, this rounded corners script uses VML (inspired from Jonathan Snook’s solution). A possible future problem is IE8 -currently- does not support VML.

  • Tags:
  • Filed under: CC License, Effects, Goodies
  • Uptime Robot