Commits

camlspotter  committed 83f8a50

chart port

  • Participants
  • Parent commits a93ce90

Comments (0)

Files changed (4)

File chart2/OMakefile

+FILES[] =
+    google
+    chart
+
+MyOCamlJSProgram(chart, $(FILES))

File chart2/chart.ml

+open Js
+
+open Google
+
+let _ = google##load (Js.string "visualization", Js.string "1.0", Unsafe.variable "{'packages':['corechart']}")
+
+(* eval_string cannot define a function. i.e.
+
+   eval_string "function drawChart () { ... }"
+
+   has no error (I do not know what happens) but it is inaccessible.
+*)
+
+let drawChart () = 
+  let data = jsnew (google##visualization##_DataTable) () in
+  data##addColumn(Js.string "string", Js.string "Topping", Js.string "");
+  data##addColumn(Js.string "number", Js.string "Slices", Js.string "");
+  let rows = [ ("Mushrooms", 3); 
+               ("Onions", 1);
+               ("Olives", 1); 
+               ("Zucchini", 1);
+               ("Pepperoni", 2) ]
+  in
+  data##addRows(Js.array (Array.of_list (List.map (fun (name,q) -> 
+    Js.array [| Js.string name; 
+                (* No phantom for top type? *)
+                Obj.magic q |])  rows)));
+  (* eval_string of JavaScript object literal fails *)
+  let options = Unsafe.variable "{'title':'How Much Pizza I Ate Last Night', 'width':400, 'height':300}" in
+  let divPie = match Opt.to_option (Dom_html.window##document##getElementById (Js.string "pie_chart_div")) with
+    | None -> assert false
+    | Some div -> div
+  in
+  let divBar = match Opt.to_option (Dom_html.window##document##getElementById (Js.string "bar_chart_div")) with
+    | None -> assert false
+    | Some div -> div
+  in
+  let pieChart = jsnew (google##visualization##_PieChart) (divPie) in
+  let barChart = jsnew (google##visualization##_BarChart) (divBar) in
+  pieChart##draw(data, options);
+  barChart##draw(data, options)
+
+let _ = google##setOnLoadCallback(drawChart)
+

File chart2/google.ml

+open Js
+
+module DataTable = struct
+  class type t = object
+    method addColumn : js_string Js.t (* type. Either "string", "number", "boolean", "date", "datetime" or "timeofday" *)
+                       -> js_string Js.t (* label *)
+                       -> js_string Js.t (* id *)
+                       -> unit meth
+
+    method addRows : js_string Js.t js_array Js.t js_array Js.t -> unit meth
+  end
+end
+
+module Chart = struct
+  class type t = object
+    method draw : DataTable.t Js.t -> 'options Js.t(* ? *) -> unit meth
+  end
+end
+
+(* Does not work: google.visualization is undefined
+   Use readonly_props
+      let cls = Unsafe.variable "google.visualization.DataTable"
+      let create () : dataTable Js.t = Unsafe.new_obj cls [| |]
+*)
+
+module Visualization = struct
+
+  class type t = object
+    (* methods and props begin with a Capital letter is prefixed with '_' in OCaml *)
+
+    (*
+      method _DataTable : dataTable Js.t readonly_prop 
+      (* Simple, but no jsnew interface.
+         for new, Unsafe.new_obj google##visualization##_DataTable_ [| |]
+      *)
+    *)
+
+    method _DataTable : DataTable.t Js.t constr readonly_prop 
+    method _PieChart : (Dom_html.element Js.t -> Chart.t Js.t) constr readonly_prop
+    method _BarChart : (Dom_html.element Js.t -> Chart.t Js.t) constr readonly_prop
+      
+  end
+end
+
+class type t = object
+  method load : js_string Js.t (* name *) -> js_string Js.t (* version *) -> 'option Js.t (* option *) -> unit meth
+  method setOnLoadCallback : (unit -> unit) (* ? *) -> unit meth
+  method visualization : Visualization.t Js.t readonly_prop
+end
+
+let google : t Js.t = Unsafe.variable "google"
+
+

File chart2/index.html

+<html>
+  <head>
+    <!--Load the AJAX API-->
+    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
+    <script type="text/javascript" src="chart.js"></script>
+
+  </head>
+
+  <body>
+    <div id="pie_chart_div"></div>
+    <div id="bar_chart_div"></div>
+  </body>
+</html>