Visualize jQuery Plugin

Generate bar and pie charts using HTML. Demo available on Code Pen or at kellyking.me/projects/visualize.

Example usage:

<ul class="myPieChart">
  <li class="visualize" data-value="43" data-color="red">Apple</li>
  <li class="visualize" data-value="27" data-color="#BADA55">Key Lime</li>
  <li class="visualize" data-value="30" data-color="rgb(0,255,255)">Blueberry</li>
</ul>

<script>
   $('.myPieChart').visualize({
        width: 325,
        type: 'pie',
        legend: true
   });
</script>

The unsorted list will be replaced with the a canvas pie chart, like this:

Any items with a class of 'visualize' nested within the selector will be added to the graph. The only required piece of data is a 'data-value' attribute. In addition, items may include a 'data-color' attribute in the form of a valid CSS string, or a random color will be assigned.

Optional parameters to the visualize method include:

• width, height
  • numeric
  • default is 300
• type
  • 'pie' or 'bar'
  • default is 'pie'
• legend
  • true or false
  • default is false