Matt's 411

A Web Developer's Blog · Javascript, CSS, HTML and more

  • Canvas Pie and Ring Charts with Tooltips

    Saturday, November 16, 2012·Share
    • Facebook
    • ·
    • Google Plus
    • ·
    • LinkedIn
    • ·
    • StumbleUpon
    • ·
    • Twitter
    ·Comments

    Here are some demos of a Canvas-based pie chart and Canvas-based ring chart. Both charts support mouse-over tooltips and can be updated with new values after initial rendering. When updated, under certain conditions, an animation will play of the charts updating themselves. To see this in action, click on the demo links below.

    Features:

    • Cross browser compatible (Internet Explorer 7+, FireFox, Chrome, Safari, Opera)
    • Framework independent - Works with jQuery, Mootools, etc.
    • Pie charts with animations and tooltips
    • 2-level Ring charts with animations and tooltips
    • Open source: GitHub project page

    Canvas Pie and Ring Charts

    = View Pie Chart Demo == View Ring Chart Demo =

Latest Posts

  • Internet Explorer localStorage polyfill using userData
  • Autocomplete with <datalist>
  • Internet Explorer 9 oninput event
  • Grid Updated
  • Canvas Pie and Ring Charts with Tooltips
  • Receive an SMS via Twilio When Your Website Goes Down
  • Comments with Disqus.com
  • Disabling Spellcheck in Textarea Elements
  • Setting the name attribute in IE's DOM
  • Recent Activity
  • Tips for Web Developers
  • Delaying Javascript Event Execution
  • Auto Selecting HTML Text with Javascript