Try this:
(defn add-rows []
(let [data (js/google.visualization.DataTable.)]
(.addColumn data "string" "Topping")
(.addColumn data "number" "slices")
(.addRows data (clj->js [["Mushrooms" 3] ["Onions" 1] ["Olives" 1]]))
data))
(defn chart-options []
(clj->js {:title "How much Pizza i ate last night"
:width 400
:height 300}))
(defn get-chart []
(js/google.visualization.PieChart. (.get ($ "div.container div#content") 0)))
(defn draw-chart []
(let [data (add-rows)
options (chart-options)
chart (get-chart)]
(.draw chart data options)))
(.load js/google "visualization" "1.0" (clj->js {:packages ["corechart"]}))
(.setOnLoadCallback js/google draw-chart)
On Fri, Apr 27, 2012 at 11:15 AM, Murtaza Husain
<[email protected]> wrote:
> Hi,
>
> I am trying to use google charts from clojurescript, however cant get it
> working. I have included both the js code from google's site and my
> clojurescript conversion. Any help in figuring out the problem will be
> appreciated.
>
> Thanks,
> Murtaza
>
> JS Code -
>
> <script type="text/javascript" src="https://www.google.com/jsapi";></script>
> <script type="text/javascript">
>
> // Load the Visualization API and the piechart package.
> google.load('visualization', '1.0', {'packages':['corechart']});
>
> // Set a callback to run when the Google Visualization API is loaded.
> google.setOnLoadCallback(drawChart);
>
> // Callback that creates and populates a data table,
> // instantiates the pie chart, passes in the data and
> // draws it.
> function drawChart() {
>
> // Create the data table.
> var data = new google.visualization.DataTable();
> data.addColumn('string', 'Topping');
> data.addColumn('number', 'Slices');
> data.addRows([
> ['Mushrooms', 3],
> ['Onions', 1],
> ['Olives', 1],
> ['Zucchini', 1],
> ['Pepperoni', 2]
> ]);
>
> // Set chart options
> var options = {'title':'How Much Pizza I Ate Last Night',
> 'width':400,
> 'height':300};
>
> // Instantiate and draw our chart, passing in some options.
> var chart = new
> google.visualization.PieChart(document.getElementById('chart_div'));
> chart.draw(data, options);
> }
> </script>
>
>
> CLJS code -
>
> ;;clj->js and $ are functions from jayq
>
> (defn add-rows []
> (let [data (js/google.visualization.DataTable.)]
> (.addColumn data "string" "Topping")
> (.addColumn data "number" "slices")
> (.addRows data [["Mushrooms" 3] ["Onions" 1] ["Olives" 1]])
> data))
>
>
> (defn chart-options []
> (clj->js {:title "How much Pizza i ate last night"
> :width 400
> :height 300}))
>
> (defn get-chart []
> (js/google.visualization.PieChart. ($ "div.container div#content")))
>
> (defn draw-chart []
> (fn []
> (let [data (add-rows)
> options (chart-options)
> chart (get-chart)]
> (.draw chart data options))))
>
>
> (.load js/google "visualization" "1.0" {"packages" ["corechart"]})
>
> (.setOnLoadCallback js/google draw-chart)
>
>
>
> --
> You received this message because you are subscribed to the Google
> Groups "Clojure" group.
> To post to this group, send email to [email protected]
> Note that posts from new members are moderated - please be patient with your
> first post.
> To unsubscribe from this group, send email to
> [email protected]
> For more options, visit this group at
> http://groups.google.com/group/clojure?hl=en
--
You received this message because you are subscribed to the Google
Groups "Clojure" group.
To post to this group, send email to [email protected]
Note that posts from new members are moderated - please be patient with your
first post.
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/clojure?hl=en
