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 Line Graph
<canvas id="line_graph_1" width="500" height="175"></canvas> <script type="text/javascript"> $m.trick.magic_charts.line_graph = [{ "canvas_id" : "line_graph_1" ,"data" : [ "Jan:4" ,"Feb:10" ,"Mar:28" ,"Apr:34" ,"May:30" ,"Jun:19" ,"Jul:31" ,"Aug:25" ] }] </script>
Custom Line Graph
<canvas id="line_graph_2" width="300" height="250"></canvas> <script type="text/javascript"> $m.trick.magic_charts.line_graph = [{ "canvas_id" : "line_graph_2" ,"dot_color" : "purple" //optional ,"line_color" : "orange" //optional ,"text_color" : "purple" //optional ,"text_style" : "italic 11px sans-serif" //optional ,"y_increments" : 10 // optional ,"data" : [ "Jan:12" ,"Feb:28" ,"Mar:18" ,"Apr:34" ,"May:40" ] }] </script>
« Back to Magic Charts
« Back to the main documentation
Line Graph: Magic Charts (): Magic JavaScript
Line Graph: Magic Charts (): Magic JavaScript