Customer feedback quickly and easily -
Traffic Light Feedback

Posts Tagged ‘Canvas’

dygraphs is an open source JavaScript charting library for displaying data of time series.

It can show values on mouseover that makes discovering the values easier & zooms any selected area.

Zoomable JavaScript Charts

The data can be called from a CSV file or mentioned in the code staticly (in CSV format).

The library can handle fractions intelligently & supports error bands around data series.

It works in all major browsers (IE requires excanvas) & it is compatible with the Google Visualization API.

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.

TypeSelect is a JavaScript-based solution for using selectable custom fonts on the web.

It combines the power of typeface.js, jQuery, the canvas, toDataURL, CSS background properties & real overlayed text to accomplish this feature.

TypeSelect

TypeSelect is very easy to understand & implement. It is totally controlled via CSS & no server-side files are required.

It has support for double/triple-click selections, UTF-8 characters & gracefully degrades in IE6.

On the other hand, currently, it has some limitations like unselectable text in IE, not being able to use :hover or line breaks & few more.

Protovis is a JavaScript library for visualizing data using the canvas element.

Custom views of data can be composed with simple graphical primitives like bars and dots. These primitives are called marks, and each mark encodes data visually through dynamic properties such as color and position.

Protovis Canvas Charts

Although Protovis looks complicated, it is very easy to understand (specially for JavaScript users) & has a straight forward logic which offers a flexible way to create any type of visualizations.

To see more, you can check the API documentation (very well-documented) & examples built with it.

Pixastic is an open source JavaScript image processing library.

It uses HTML5 Canvas element that enables accessing to raw pixel data.

JavaScript Image Effects Library

Supported effects are:

  • desaturation/greyscale
  • invert
  • flipping
  • brightness/contrast adjustment
  • hue/saturation
  • emboss
  • blur & more

There is an image editor built with it & the library is well-documented.

This is another Coverflow script which uses canvas for the effects.

The script is very easy to implement & works smoothly.

Coverflow script

Images can be browsed via scroll wheel or left-right keys besides the mouse clicks. And, it is tested with other javascript libraries like jQuery, MooTools, Dojo and Prototype.

For the canvas support in IE, checkout ExplorerCanvas.

Raphaël is a JavaScript library that facilitates using & creating vector graphics in websites.

It uses SVG & VML for creating graphics. As every graphic generated is a DOM object, you can manipulate them via JavaScript.

JavaScript Vector Graphics

This graphics JavaScript library is very ideal for creating charts, images effects like rotation or reflection.

An example:

Creating graphics is much easier with Raphaël compared to writing everything from scratch as a circle can be created with:

paper.circle(320, 240, 50).attr({fill: "#223fa3", stroke: "#223fa3", "stroke-width": 3, "fill-opacity": 0.5});

The library currently works in all major browsers except Firefox 2 & it is still under development.

ProtoChart is an open source canvas chart library built with Prototype.

This library is highly inspired from Flot, Flotr and PlotKit & it enables us to create different chart types on the fly.

Prototype Canvas Charts

Features of this chart library:

  • Line, bar, pie, curve, mix, and area charts available
  • Multiple data series on same graph
  • Highly customizable legend support
  • Customizable grid, grid border, background
  • Customizable axis-tick values (both x and y)
  • Supports: IE6/7, FF2/3 and Safari
  • Even works on an iPhone!

As IE6 does not support the canvas tag, Excanvas library is used for compatibility.

JavaScript Image Effects is a library that you can instantly create effects like rotate, blur, emboss & more.

Emboss Effect

Using such a library is very functional in situations where you may need to add an effect to lots of images, need to provide an interface to the users for creating effects & so.

How to use?

After inserting the imagefx.js file into your webpage, you have 2 options:

<script type="text/javascript" >
jsImageFX.doImage(document.getElementById("myimage"), "blur");
</script>

or

<img src="image.jpg" imagefx="blur" /> 

where both are very easy to apply.

Every image effect is not available in every browser and a comprehensive browser compatibility chart can be found in the website

BgPatterns is a pattern library where you can find, create & share patterns.

You can create the patterns from ready-to-use images by changing the colors & canvas and scaling or rotating them. And this process is done with a slick interface.

Free Background Patterns

The pattern design interface lets you preview them easily.

And, you can also check the recently created and popular patterns.

  • Tags:
  • Filed under: Design, No License, Texture
  • 3 Comments
  • Uptime Robot
    feed-holder
    FeedBurner
    • PSD to HTML
    • activeCollab | Project Management
    • PSD to HTML
      MailChimp
      PSD to HTML

    Vivvo CMS - Web Publishing at your Fingertips