Quick Jump ↵
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>
<script type="text/javascript" src="/PATH/TO/magic/tricks/magic_charts/magic_charts..js" charset="UTF-8"></script>
<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!
Default Pie Chart
<canvas id="pie_1" width="200" height="200"></canvas> <script type="text/javascript"> $m.trick.magic_charts.pie = [{ "canvas_id" : "pie_1" ,"data" : [ "Chrome:40" ,"Firefox:45" ,"MSIE:5" ,"Safari:10" ] }] </script>
Custom Pie Chart
<canvas id="pie_2" width="300" height="300"></canvas> <script type="text/javascript"> $m.trick.magic_charts.pie = [{ "canvas_id" : "pie_2" ,"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>
« Back to Magic Charts
« Back to the main documentation
Pie Chart: Magic Charts (): Magic JavaScript Pie Chart: Magic Charts (): Magic JavaScript