Pie Chart: Magic Charts (): Magic JavaScript

• Add <script type="text/javascript" src="/PATH/TO/magic/tricks/magic_charts/magic_charts..js" charset="UTF-8"></script>
  
  below your <script type="text/javascript" src="/PATH/TO/magic/wand..js" charset="UTF-8"></script>
• Use the examples below as a guide for building your own charts!

<canvas class="border_silver margin_left_10" id="pie_2" width="200" height="200"></canvas> <script type="text/javascript"> $m.trick.magic_charts.pie = [ { "canvas_id" : "pie_2" ,"data" : [ "Chrome:40" ,"Firefox:45" ,"MSIE:5" ,"Safari:10" ] } ] </script>

<canvas class="border_silver margin_left_10" id="pie_1" width="300" height="300"></canvas> <script type="text/javascript"> $m.trick.magic_charts.pie = [ { "canvas_id" : "pie_1" ,"text_color" : "black" // optional ,"text_style" : "bold 15px sans-serif" // optional ,"data" : [ "Mac:50:red" // optional slice color - :red ,"Win:25:blue" // optional slice color - :blue ,"Lin:20:green" // optional slice color - :green ,"iPhone:3" ,"iPad:2" ] } ] </script>

• The width="X" height="X" on your <canvas> tag controls the width and height of your chart. This may sound obvious but will bug you if not set appropriately.