Column 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_right_10" id="column_2" width="450" height="400"></canvas> <script type="text/javascript"> $m.trick.magic_charts.column = [ { "canvas_id" : "column_2" ,"data" : [ "Chrome:200" ,"Firefox:120" ,"MSIE:80" ,"Safari:230" ,"Opera:345" ] } ] </script>

<canvas class="border_silver margin_left_10" id="column_1" width="270" height="350"></canvas> <script type="text/javascript"> $m.trick.magic_charts.column = [ { "canvas_id" : "column_1" ,"background_color" : "#f5f5f5" // optional ,"bar_color" : "navy" // optional ,"bar_margin" : 30 // optional ,"bar_width" : 40 // optional ,"text_color" : "gray" // optional ,"x_axis_data_lines" : true // optional ,"x_axis_color" : "navy" // optional ,"x_axis_width" : 1.5 // optional ,"x_show_names" : true // optional ,"x_show_values" : true // optional ,"y_axis_color" : "purple" // optional ,"y_axis_width" : 1.5 // optional ,"y_show_increments" : false // optional ,"y_increments" : 50 // optional ,"data" : [ "iOS:100" ," Win:275:blue" // optional bar color ," Mac:175:maroon" // optional bar color ," Lin:50" ] } ] </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.