Column Chart: Magic Charts (): Magic JavaScript

Default Column Chart

<canvas id="column_1" width="450" height="400"></canvas> <script type="text/javascript"> $m.trick.magic_charts.column = [{ "canvas_id" : "column_1" ,"data" : [ "Chrome:200" ,"Firefox:120" ,"MSIE:80" ,"Safari:230" ,"Opera:345" ] }] </script>

Custom Column Chart

<canvas id="column_2" width="270" height="350"></canvas> <script type="text/javascript"> $m.trick.magic_charts.column = [{ "canvas_id" : "column_2" ,"background_color" : "#FFFFCC" // 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>