Dedra L. Welch
 Software Engineer | IT Architect | Web Developer
Dedra L. Welch Software Engineer | IT Architect | Web Developer

Dynamic Charts Using HTML5 and JavaScript


In this demo, I'm using the HTML5 canvas element and object oriented JavaScript to create several varieties of chart objects. Each chart construtor accepts an array for data, colors and legend titles, a string for legend heading and integers for height and width - or diameter if appropriate. If the color array is an empty string, then random colors are generated for each data point. The contructor then calls the draw() method for the object to create the chart. Now you can append the chart's canvas and legend properties to DOM elements. Once instantiated, you can call the draw() method again to update the chart with new values.

Enter new data and color arrays and new dimensions then hit "Create Charts" to re-draw each chart.